Obrazy na mojej stronie wyglądały przyzwoicie i szybko się ładowały. Myślałem, że to wystarczy. Potem zainwestowałem trochę czasu w ich Retina-ready i WOWZA, ulepszone zdjęcia wyglądały phe-nom-e-nal! Teraz nie ma mowy, żebym mógł wrócić.

Urządzenia Retina mają więcej pikseli na cal, więc wymagają obrazów o wysokiej rozdzielczości, aby wypełnić te dodatkowe piksele. Ale urządzenia Apple nie są jedynymi gobblerami pikseli. Tablety Surface, telefony z Androidem, iPhone ‘ y, wszystkie wymagają obrazów gotowych do siatkówki.

W tym poście pokażę Ci, jak stworzyłem obrazy o wysokiej rozdzielczości w WordPress dla urządzeń Retina. Nauczę cię jak robić zdjęcia z tego…

… do tego…

… jednocześnie upewniając się, że dostarczasz najbardziej zoptymalizowany plik, ponieważ te piękne obrazy w wysokiej rozdzielczości są ogromne i spowolnią Twoją witrynę, jeśli nie będzie poprawnie obsługiwana.

P. S. Jeśli powyższe obrazy wyglądają tak samo, to dlatego, że Twoje urządzenie nie obsługuje obrazów w wysokiej rozdzielczości, ale stają się coraz bardziej popularne, więc powinieneś poświęcić czas na optymalizację pod kątem ekranów o wysokiej rozdzielczości.

Przewodnik WordPress do obrazów siatkówki

Twój ekran składa się z tysięcy (może milionów, jeśli masz duży ekran) małych kwadratów, zwanych pikselami. Aby renderować obraz, plik obrazu zawiera instrukcje dla każdego piksela na ekranie, informujące go, jakiego koloru ma być, aby uzyskać obraz.

Rozdzielczość obrazu w dużym stopniu wpływa na sposób wyświetlania obrazu na ekranie, ale nie w sposób, w jaki możesz myśleć. Zakładamy, że rozdzielczość na ekranach działa tak samo jak rozdzielczość na papierze, ale tak nie jest.

Sprawdźmy więc swoje założenia w pop quizie!

1. Która rozdzielczość daje najmniejszy rozmiar pliku?
A) 72 DPI
B) 150 DPI
C) 300 DPI
D) wszystkie powyższe

2. W jakiej rozdzielczości należy zapisać obrazy, aby wyglądały w wysokiej jakości w Internecie?
A) 72 DPI
B) 150 DPI
C) 300 DPI
D) kogo to obchodzi?

Odpowiedź na oba pytania to D.

Gdzieś po drodze dowiedziałem się, że 72 DPI jest standardową rozdzielczością dla sieci. Założyłem, że jeśli chcę, aby moje obrazy wyglądały ładnie na ekranach siatkówki, powinienem podwoić tę liczbę. Wybrałem 150 DPI, ponieważ była to ładna okrągła liczba, która dała mi trochę więcej, więc zacząłem zapisywać wszystkie obrazy na mojej stronie w 150DPI.

Teraz wiem, że się myliłam.

Po pierwsze, DPI nie wpływa na sposób wyświetlania obrazu w witrynie. DPI oznacza kropki na cal na papierze. Oto, co się naprawdę dzieje.

Sprawdź te trzy obrazy, które zostały zapisane w różnych DPIs:

Photograph Beetle on Succulent
72 DPI, 149KB
Photograph Beetle on Succulent
150 DPI, 149KB
Photograph Beetle on Succulent
300 DPI, 149KB

Wszystkie wyglądają tak samo i mają ten sam rozmiar pliku. Pobierz je i otwórz w Photoshopie, jeśli mi Nie wierzysz.

Wszystkie mają ten sam rozmiar pliku, ponieważ wszystkie mają te same instrukcje dla tej samej liczby pikseli.

Twój ekran nie ma nic przeciwko DPI, ale drukarka ma. DPI informuje drukarkę, jak gęsto zapakować piksele na ekranie, gdy drukuje obraz na papierze.

Oto, jak te trzy obrazy wyglądają, gdy je drukowałem:

Bug image at 72DPI, 150DPI and 300DPOI printed on one sheet of paper, each image is a different size
Wszystkie obrazy wydrukowane na jednej kartce papieru

Rozdzielczość komunikuje, jak gęsto mają być wyświetlane dane obrazu. Jeśli mam obraz 100px na 100px, mam dane dla 10,000 pikseli.

  • Na obrazie o wysokiej rozdzielczości pakuję te dane do mniejszej przestrzeni, tworząc więcej szczegółów.
  • W przypadku obrazu o niskiej rozdzielczości, rozprzestrzeniam te dane na większy obszar.

Rozdzielczość obrazu nie zmienia ilości danych na obrazie, tylko to, jak gęsto te dane się pojawiają.

Miss-iss-i-PPI

PPI lub pikseli na cal jest miarą liczby pikseli wyświetlanych na ekranie w calu.

Ekrany Retina mają dwa razy więcej pikseli, pionowo i poziomo, co oznacza, że przestrzeń, która kiedyś była zajmowana przez jeden piksel, ma teraz cztery piksele!

Jak wiemy z góry, nie mamy wystarczająco dużo danych, aby dać instrukcje wszystkim nowym pikselom. To dlatego regularne obrazy na ekranach siatkówki wyglądają tak cholernie rozmazane. Znowu ten robak.

Photograph Beetle on Succulent
Siatkówka, 398KB
Photograph Beetle on Succulent
Nie Siatkówka obvi

Zamiast serwować piękny, ale mały obraz, Aby zachować szczegóły, jak w przypadku druku, ekrany Retina próbują rozpowszechniać dane. Biedne zaniedbane piksele, które nie mają własnych danych, próbują użyć danych z pikseli wokół nich, aby dowiedzieć się, jakiego koloru powinny być, jak banda żartownisiów.

Robią, co w ich mocy, ale bądźmy szczerzy, wykonują gównianą robotę.

Aby to naprawić, musimy dostarczyć WordPress z gęstszymi obrazami, więc jest wystarczająco dużo danych, aby obejść. Co prowadzi nas do tego, jak zrobić obrazy siatkówki, Krok 1…

Krok 1: Musisz utworzyć obrazy o podwójnych wymiarach pikseli dla Twojej witryny

Jeśli stosujesz się do najlepszych praktyk, wiesz, że przed ich przesłaniem musisz przeskalować obrazy do odpowiedniego rozmiaru. Aby utworzyć obrazy siatkówki w WordPress z wystarczającą ilością danych dla każdego piksela, musisz podwoić wymiary pikseli dla każdego przesłanego obrazu.

Jeśli masz duży obraz bohatera o szerokości 1600px i wysokości 400px, musisz stworzyć obraz o szerokości 3200px i wysokości 800px. Jeśli szerokość Twojego bloga wynosi 800px, obrazy na Twoim blogu będą musiały mieć szerokość 1600px i tak dalej.

Wystarczy podwoić wymiary pikseli dla największy możliwy rozmiar, przy którym będzie wyświetlany Twój obraz. Nie trzeba tworzyć obrazów o podwójnych wymiarach dla każdego możliwego rozmiaru responsywnego.

Możesz zapisać swoje obrazy z @2x w nazwie pliku przed rozszerzeniem pliku, ale nie jest to konieczne, ponieważ wtyczka poniżej zrobi to za Ciebie.

Jak zrobić obrazy siatkówki dla obrazów, które już przesłałem?

Tworzenie witryny przyjaznej dla siatkówki może być czasochłonnym procesem, jeśli masz już witrynę z dużą ilością treści, ponieważ musisz wrócić do oryginalnych obrazów pobranych z Internetu lub aparatu i uzyskać odpowiedni rozmiar. Nie możesz po prostu pobrać obrazu i powiększyć go w Photoshopie lub uzyskasz te same rozmyte wyniki.

Jeśli nie skalowałeś swoich obrazów i przesyłałeś ogromny obraz, możesz mieć szczęście, jeśli obrazy są wystarczająco duże. Jeśli przesyłałeś Duży Rozmiar obrazu (2000px x 800px) dla wszystkich zdjęć, nawet jeśli miały one pojawić się tylko w treści bloga przy 800px, to nie muszę prześlij dużą wymianę. Masz już obraz z wystarczającą ilością danych, które wystarczą, nawet jeśli jest nieco za duży; jednak najlepszą praktyką jest wyprodukowanie dokładnego rozmiaru, którego potrzebujesz, aby uzyskać korzyści z wydajności.

Krok 2: podawaj obrazy siatkówki do urządzeń Retina

Istnieje wiele różnych sposobów, aby to zrobić. Pokażę wam. Najpierw pokażę wam manualny sposób, abyście miłośnicy kodu mogli zobaczyć, co się dzieje. Następnie pokażę Ci szybki i łatwy sposób dla wszystkich, którzy nienawidzą kodu 😉

Opcja 1: Ręcznie zmodyfikuj Srcset w WordPress

Jednym z lepszych sposobów serwowania obrazów siatkówki jest użycie srcset atrybut. Oto jak to działa. Zamiast używać src aby udostępnić jeden obraz, dajesz przeglądarce listę obrazów do wyboru. Następnie przeglądarka wybiera pobrane pliki i wyświetla najbardziej odpowiedni obraz dla urządzenia odwiedzającego. Działa to nie tylko w przypadku obrazów siatkówki, ale można go używać do wyświetlania różnych rozmiarów obrazów lub różnych formatów.

Skupimy się na obrazach siatkówki, więc w naszym srcset atrybut, musimy dołączyć zwykły obraz dla urządzeń nie-siatkówki i obraz siatkówki dla urządzeń siatkówki. Nie chcesz tracić czasu na pobieranie i serwowanie zbyt dużych obrazów na ekranach innych niż Retina, dlatego ważne jest, aby uwzględnić oba. Musisz również uwzględnić zwykłe src znacznik dla przeglądarek, które nie obsługują srcset jeszcze.

Tak to będzie wyglądało:

< img src = " logo_regular .1x. jpg, logo_retina.jpg 2x "src=" logo_regular.jpg" / >

Zobacz 1x oraz 2x? Pomaga to przeglądarce zidentyfikować, który obraz jest wersją regularną, a który wersją siatkówki. Jeśli użytkownik posiada urządzenie Retina, przeglądarka chce służyć 2x image. Jeśli nie, to będzie służyć 1x wersja. A jeśli przeglądarka nie obsługuje srcset, wtedy użyje tego w src atrybut.

Łatwe, prawda? Wystarczy dodać srcset przypisać do kodu HTML podczas wstawiania obrazów i można podawać obrazy siatkówki…z wyjątkiem to nigdy nie jest takie proste.

Problem polega na tym, że nie dajesz przeglądarce mniejszych obrazów dla mniejszych urządzeń. Innymi słowy, powyższy kod nie generuje responsywnych obrazów. Możesz serwować ogromne Zdjęcie siatkówki na małym iPhonie w 4G.

Tutaj może się to skomplikować, ponieważ musisz dodać o wiele więcej atrybutów, aby uporządkować wszystkie różne opcje, które chcesz dać przeglądarce.

Najpierw musisz przejść do HTML5 < obrazek> element.

Na < obrazek> element ma o wiele więcej:

< obrazek>
  < source srcset = " image .jpg "type=" image / jpeg">
  <img src = " image.jpg "alt =" Mój obraz " width = "100" height = "100">
< / picture>

Zobacz jak <img> jest zagnieżdżona w < obrazek> element? Przeglądarki, które nie obsługują HTML5 < obrazek> element powróci do obrazu określonego w <img> element. W rzeczywistości, <img> jest wymogiem (lub obraz nie będzie renderować) i musi pojawić się jako ostatni.

Ale najfajniejsza część o < obrazek> element jest < źródło> element, który jest schowany w środku. Na < źródło> elementy umożliwiają zapytania o media w media atrybut. Aby dać przeglądarce różne opcje obrazu responsywnego, wstawisz wiele < źródło> elementy w < obrazek> element i powiedzieć przeglądarce, kiedy jest to właściwe, aby go używać, z media atrybut. Następnie dodasz obraz siatkówki i zwykły obraz do srcset atrybut w < źródło> element. Przejdźmy do sedna, bo to dużo.

Ładowanie gist d42f64209472c970b30ecfd9af239d14

Cóż … to szybko się nasiliło. I nawet nie chcesz wiedzieć, jak długo to potrwa, gdy dodasz opcje obrazu WebP.

Nie polecam modyfikowania wszystkich obrazów, aby zawierać cały ten dodatkowy kod ręcznie. Zdecydowanie chcesz użyć narzędzia do automatyzacji tego procesu lub wtyczki do modyfikowania kodu HTML. Co prowadzi nas do wtyczki WP Retina 2x.

Opcja 2: Zainstaluj i skonfiguruj wtyczkę WordPress Retina 2x

WP Retina 2X to darmowa wtyczka w repozytorium WordPress w wersji Pro. Darmowa wersja wystarczy do tego samouczka.

Screenshot of WP Retina 2x plugin on wordpress.org
Wtyczka WP Retina 2x

Dlaczego WordPress Retina 2X jest najlepszą wtyczką do pracy?

  1. Nie musisz ręcznie edytować kodu HTML, aby dodać obrazy siatkówki
  2. W przeciwieństwie do innych wtyczek Retina, WordPress Retina 2x nie wymaga zmiany nazwy wszystkich obrazów za pomocą @2x, aby zidentyfikować je jako obrazy siatkówki.
  3. WordPress Retina 2x jest kompatybilny z wtyczkami buforującymi, czego nie można powiedzieć o wszystkich wtyczkach Retina.
  4. Ma widok biblioteki multimediów (patrz poniżej), dzięki czemu możesz śledzić, jakie obrazy muszą być Retina-fied. Jest to przydatne, jeśli masz witrynę z dużą ilością istniejących obrazów.
  5. Wtyczka daje wiele opcji serwowania obrazów siatkówki w WordPress, więc jeśli jedna metoda jest niezgodna z Twoją witryną, możesz przejść do innej metody.
  6. Dobrze integruje się z Smush i Smush Pro
Screenshot of WP Retina 2x media library view
Aktualizacja do WP Retina 2x Pro da Ci dodatkowe narzędzia, które przyspieszą proces przesyłania i zastępowania wielu istniejących obrazów

Skupmy się na tym ostatnim powodem, ponieważ Optymalizacja obrazu staje się jeszcze ważniejsza podczas pracy z obrazami siatkówki.

Z powyższym zdjęciem beetle możesz zobaczyć, jak Rozmiar Pliku obrazu siatkówki jest dwa razy większy niż zwykły obraz. Jeśli masz dużo zdjęć na stronie, to drastycznie spowolni to Twoją witrynę.

Smush może pomóc zoptymalizować obrazy, ale Smush Pro daje dodatkową przewagę. Smush Pro CDN może automatycznie konwertować obrazy na pliki WebP, które są znacznie mniejsze niż porównywalne pliki JPEG i PNG. Smush Pro CDN automatycznie zmienia rozmiar obrazu, więc jeśli Twoja biblioteka multimediów ma zbyt duże obrazy, Smush Pro CDN będzie miał odpowiedni rozmiar. Wypróbuj Smush Pro za darmo tutaj.

Jak skonfigurować wtyczkę WordPress Retina 2x, aby tworzyć obrazy do wyświetlania Retina

Przejdźmy do niektórych dostępnych ustawień wtyczki WordPress Retina 2x.

Podstawowe Ustawienia

Screenshot of WP Retina 2x basic settings

Rozmiary Dla Niepełnosprawnych pozwala uniknąć konwersji niektórych rozmiarów obrazu do Retina w celu zaoszczędzenia miejsca na dysku.

Jakość Siatkówki umożliwia ustawienie jakości kompresji dla formatu JPEG.

Ważne ustawienie na tej stronie to Metoda. Masz kilka opcji serwowania obrazów siatkówki.

Screenshot Retina Settings Method Dropdown
Jeśli jedna z metod nie działa, wybierz inną.

PictureFill
PictureFill jest zalecaną metodą służącą obrazom siatkówki. Używa js polyfill, aby załadować obrazy lub przepisuje kod HTML, aby użyć srcset atrybut w WordPress.

Responsywne Obrazy
Aby skorzystać z Responsywne Obrazy metoda, musisz używać WordPress 4.4 lub nowszego, który automatycznie korzysta z srcset atrybut w WordPress. Wtyczka dodaje obrazy siatkówki do zestawu źródeł.

Siatkówka.js
Ta metoda opiera się w całości na JavaScript. HTML ładuje zarówno normalny obraz, a następnie, jeśli wykryto obsługę siatkówki, ładuje również obraz siatkówki, więc oba pliki obrazów są pobierane.

HTML Rewrite
HTML rewrite zmiany w src tagi po wykryciu urządzenia Retina, ale mogą potencjalnie mieć problemy, gdy są używane z niektórymi wtyczkami buforowania.

Siatkówka-Zdjęcia
Na Obrazy siatkówki metoda zmodyfikuje Twój .pliki htaccess w celu obsługi odpowiednich plików. Ta metoda nie zadziała, jeśli używasz CDN, takiego jak CDN Smush Pro.

Ustawienia Zaawansowane

W ustawienia zaawansowane sekcja, musisz włączyć Automatyczne Generowanie tak więc nowe przesłane pliki automatycznie tworzą plik Retina. Następnie zapisz ustawienia, naciskając niebieski przycisk.

Screenshot WP Retina 2x Advanced Settings
Automatyczne generowanie jest tutaj ważnym ustawieniem

Krok 3: Prześlij swoje obrazy siatkówki do WordPress i użyj ich w swojej witrynie

Po utworzeniu obrazów siatkówki i skonfigurowaniu wtyczki nadszedł czas, aby przesłać je do swojej witryny. Proces przesyłania jest taki sam, chociaż może być konieczne dostosowanie ustawień witryny, aby można było przesyłać ogromne pliki do biblioteki multimediów.

Screenshot of media library
Obraz ma szerokość 1200px, ale będę musiał użyć wersji, która jest 600px, aby uzyskać jakość siatkówki

Gdy zamierzasz użyć obrazu w swojej witrynie, będziesz chciał użyć odmiany obrazu, która jest o połowę szersza i wyższa od pełnego rozmiaru.

Wtyczka rozpoznaje tylko obrazy utworzone za pośrednictwem biblioteki multimediów. W przypadku obrazów, których wtyczka nie rozpoznaje, takich jak ikony motywu i logo, musisz dodać @2x do nazwy pliku, przed .png lub .rozszerzenie jpeg. Następnie prześlij plik w to samo miejsce co oryginał dla wtyczki WP Retina 2x, aby rozpoznać go jako plik siatkówki i serwować go na kompatybilnych urządzeniach.

Na przykład, jeśli masz ikonę witryny o wymiarach 200 x 200 px z nazwą pliku icon.png, utworzysz wersję 400 x 400px i nadasz jej nazwę [email protected] i przesłać go przez FTP lub SFTP do tego samego folderu co oryginał icon.png. Wtyczka zajmie się resztą.

Jak wspomniałem wcześniej, jeśli pracujesz nad witryną z wieloma istniejącymi obrazami, wtyczka WP Retina 2x Pro ma pewne narzędzia oszczędzające czas, aby ułatwić proces przesyłania i zastępowania istniejących obrazów.

Możliwe problemy z WP Retina 2x

Należy pamiętać, że mogą wystąpić problemy z użyciem wtyczki WP Retina 2x, jeśli używasz niektórych wtyczek pokazu slajdów lub niekompatybilnych CDN. Na przykład CDN silnika WP jest znany z powodowania problemów, więc musisz zmodyfikować regułę ponownego pisania w Ustawieniach silnika WP, instrukcje tutaj. Jeśli korzystasz z Amazon S3, nie powinieneś w ogóle używać WP Retina 2x.

Jeśli szukasz CDN, który po prostu działa z WP Retina 2X i nie spowalnia WordPressa, Czy Mogę zasugerować, abyś spróbował Smush? Możesz użyć darmowej wersji, aby zoptymalizować i poprawić swoje obrazy, ale aby uzyskać dostęp do CDN i naprawdę odciążyć te ciężkie obrazy siatkówki, Smush Pro da ci to, czego potrzebujesz. Możesz zarejestrować się na bezpłatną wersję próbną Smush Pro tutaj.

Aby aktywować Smush Pro CDN, zainstaluj wtyczkę Smush Pro. Następnie w Ustawieniach Smush przejdź do sekcji CDN i naciśnij Rozpocznij guzik.

Screenshot of Smush Pro settings
Smush CDN jest dołączony do Smush Pro

Po aktywacji CDN proponuję włączyć Konwersja WebP. Pliki Obrazów WebP są znacznie mniejsze, więc Konwersja obrazów sprawi, że strony ładują się znacznie szybciej. Możesz uzyskać pełny podział korzyści tutaj.

Screenshot of Smush Pro settings
Konwersja obrazów na bardziej wydajny Typ pliku jest łatwa dzięki Smush Pro

Będziesz także chciał włączyć automatyczną zmianę rozmiaru obrazu. W ten sposób, jeśli masz zbyt duże obrazy, nie zużyjesz tak dużo miejsca na pliki, aby uzyskać większy obraz niż potrzebujesz. Po prostu odwróć Włącz automatyczną zmianę rozmiaru moich obrazów Przełącz w Ustawieniach Smush Pro CDN.

Screenshot Smush Pro resize images CDN
Odwróć Włącz automatyczną zmianę rozmiaru moich obrazów, aby przyspieszyć WordPress

Smush CDN pozwoli Ci serwować najbardziej wydajne obrazy siatkówki, dzięki czemu możesz uzyskać pożądaną jakość bez wzdęcia, które spowalnia Twoją witrynę.

To wszystko.

Podczas korzystania z Smush Pro CDN i wtyczki WP Retina 2X jest najlepszym sposobem na serwowanie większości obrazów siatkówki w WordPress, obrazy SVG są również opcją dla prostej grafiki, takiej jak płaskie logo i ikony. Możesz dowiedzieć się więcej o tym trudnym typie plików tutaj.

Obrazy siatkówki są serwowane tylko odwiedzającym z odpowiednimi urządzeniami, Inni odwiedzający nie odczują zmiany wydajności. Dzięki wtyczce WP Retina 2x nadal otrzymają te same obrazy, które zawsze mają, to znaczy, dopóki nie zaktualizują.

Urządzenia Retina stają się coraz bardziej popularne, więc powinieneś zacząć aktualizować swoją witrynę. Najlepiej zacząć od upewnienia się, że wszystkie nowe obrazy dodawane do Witryny są gotowe do siatkówki. Następnie zmodyfikuj największe, najbardziej imponujące wizualnie obrazy w swojej witrynie, tworząc wersję siatkówki i zastępując istniejący obraz. Następnie przejdź i skaluj wszystkie przewymiarowane obrazy, które pozostały w treści postów na blogu, a co nie. Będziesz miał wspaniałą stronę z fantastycznymi zdjęciami, zanim się obejrzysz.

Czy próbowałeś uaktualnić wszystkie obrazy na swojej stronie, aby były gotowe do siatkówki? Jak przebiegał proces? Czy masz jakieś wskazówki dla innych, którzy mają zamiar rozpocząć podróż siatkówki?

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…