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:
Wszystkie wyglądają tak samo i mają ten sam rozmiar pliku. Pobierz je i otwórz w Photoshop, 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:
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.
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…
Jak zrobić obrazy Retina gotowy?
Punkt 1. Twórz obrazy z podwójnymi pikselami
Punkt 2. Podawać obrazy siatkówki do urządzeń Retina
Punkt 3. Prześlij obrazy Retina do swojej witryny
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 musisz 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 atrybutu srcset. Oto jak to działa. Zamiast używać atrybutu src do udostępniania jednego obrazu, 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 atrybucie srcset musimy uwzględnić zwykły obraz dla urządzeń innych niż siatkówka 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ż dołączyć zwykły znacznik src dla przeglądarek, które jeszcze nie obsługują srcset.
Tak to będzie wyglądało:
Widzisz 1x i 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 wyświetli obraz 2x. Jeśli nie, to będzie służyć wersji 1x. A jeśli przeglądarka nie obsługuje srcset, użyje tego w atrybucie src.
Łatwe, prawda? Po prostu dodajesz atrybut srcset do kodu HTML podczas wstawiania obrazów i możesz 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
Na
Zobacz jak jest zagnieżdżona w
element. W rzeczywistości,
jest wymogiem (lub obraz nie będzie renderować) i musi pojawić się jako ostatni.
Ale najfajniejsza część o
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.
Dlaczego WordPress Retina 2X jest najlepszą wtyczką do pracy?
- Nie musisz ręcznie edytować kodu HTML, aby dodać obrazy siatkówki
- 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.
- WordPress Retina 2x jest kompatybilny z wtyczkami buforującymi, czego nie można powiedzieć o wszystkich wtyczkach Retina.
- 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.
- 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.
- Dobrze integruje się z Smush i Smush Pro
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, ton Smush Pro CDN będzie służył w odpowiednim rozmiarze. 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
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.
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ć atrybutu srcset w WordPress.
Responsywne Obrazy
Aby skorzystać z Responsywne Obrazy metoda, musisz używać WordPress 4.4 lub nowszego, który automatycznie używa atrybutu srcset 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 zmienia znaczniki src po wykryciu urządzenia Retina, ale może potencjalnie mieć problemy, gdy jest używany 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.
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.
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ł aby wtyczka WP Retina 2x rozpoznała go jako plik siatkówki i serwowała go na kompatybilnych urządzeniach.
Na przykład, jeśli masz ikonę witryny 200 x 200px z ikoną nazwy pliku.png, utworzysz wersję 400 x 400px i nadasz jej nazwę [email protected] i prześlij ją przez FTP lub SFTP do tego samego folderu, co oryginalna ikona.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 używasz 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.
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.
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.
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 popularny, 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.
Tagi:
