Komentarze respondentów ankiety na temat różnych technik optymalizacji obrazów
Sam Dutton
W tym poście znajdziesz opinie, które zespół Google Web DevRel zebrał w ramach ankiety dotyczącej technik optymalizacji obrazów przeprowadzonej latem 2019 r. Odpowiedzi zostały zebrane za pomocą Web Fundamentals i @ChromiumDev. Celem badania było ustalenie, dlaczego większość witryn nie stosuje sprawdzonych metod optymalizacji obrazów, mimo że wydają się one stosunkowo łatwym sposobem na poprawę wydajności. Dane o odpowiedziach nie są tutaj wymienione, ponieważ w metodologii ankiety były błędy.
Odbiorcy
- Jeśli jesteś programistą stron internetowych, ten post może Ci się przydać. Znajdziesz w nim nowe techniki optymalizacji obrazów oraz informacje o tym, jak inni programiści rozwiązali problem, z którym się borykasz, a także o kosztach, zaletach i ograniczeniach poszczególnych technik.
- Jeśli zarządzasz usługą lub dostawcą CDN obrazów, ten post może Ci pomóc w znalezieniu nowych możliwości na rynku.
- Jeśli jesteś deweloperem frameworka, narzędzia do kompilacji lub systemu CMS, ten post może Ci podsunąć nowe pomysły na funkcje do wdrożenia.
Komentarze
WebP
- „Podoba mi się format WebP, ale nie jest on jeszcze w pełni gotowy. Co więcej, WordPress nie obsługuje formatu WebP. Jedna z najpopularniejszych aplikacji do edycji zdjęć, Photoshop, również nie obsługuje formatu WebP. Nie możemy więc polegać na aplikacjach ani usługach innych firm w zakresie kompresji obrazów”.
- „Umożliw użycie WebP w Safari”.
- „Chętnie używałbym formatu WebP, gdybym mógł eksportować z Photoshopa, Figmy lub Sketcha i gdyby był on obsługiwany przez wszystkie przeglądarki”. [Uwaga: Sketch obsługuje format WebP]
- „Następna generacja rozwiązań formatowania byłaby świetna”.
- „Zaprzestańcie tak mocnego promowania WebP, gdy przeglądarki słabo je obsługują, i weźmiecie pod uwagę potrzebę korzystania z formatu PNG zamiast JPEG do zrzutów ekranu”.
- „Dokumenty Google nie obsługują formatu WebP”.
- „Chcielibyśmy używać wyłącznie formatu WebP, ale obawiamy się o zgodność z przeglądarkami”.
- „Najpierw napraw zgodność z przeglądarkami i zaktualizuj starsze przeglądarki lub dodaj poprawki dla starszych przeglądarek, a potem ludzie chętniej zaczną stosować nowe formaty obrazów, takie jak WebP”.
- „Zachęcaj twórców wtyczek i motywów do udostępnienia obsługi formatu WebP i innych nowoczesnych formatów obrazów, aby użytkownicy nie musieli się z nimi męczyć”.
obrazy wektorowe i w formacie SVG.
- „Jeśli to możliwe, używam (animowanego) SVG. Biblioteka gatsby-image rozwiązała wiele problemów. Ale gdy przyjrzysz się temu, co zrobili, okaże się, że jest zupełnie nierealne, aby zwykła witryna musiała tworzyć coś takiego, aby obrazy działały prawidłowo. Przejdźmy do przeglądarki, która powinna wziąć na siebie więcej odpowiedzialności”.
- „Czy można opisać, jak tworzyć animacje SVG za pomocą lottie.js?”
- „Staramy się, aby w naszej witrynie były używane zdjęcia JPEG o dużej rozdzielczości i małej wielkości, co pozwala skrócić czas wczytywania. Używamy też wektorów SVG, gdy jest to konieczne, aby zapewnić jakość w przypadku projektowania responsywnego”.
- „Staramy się używać zoptymalizowanej grafiki wektorowej w przypadku wszystkich zdjęć, ale jeśli to możliwe, używamy zdjęć”.
Inne formaty obrazów
- „Musimy lepiej uświadamiać ludziom, aby przestali używać GIF-ów”.
Leniwe ładowanie
- „Przy rozważaniu funkcji takich jak ładowanie opóźnione miej na uwadze użytkownika, ponieważ dla wielu osób jest to denerwujące”.
- „Utwórz atrybut lazy load, który będzie działać z atrybutem background-image”.
- „Frameworki powinny zapewniać lepszą obsługę zasobów”.
- „Już dawno przeszliśmy z opóźnionego wczytywania. Użytkownicy zgłaszają, że miliony obrazów i witryn „NIE ŁADUJĄ”. Tak nasz zespół podsumował tę kwestię. Nietechnicyczni użytkownicy mają trudności z opisywaniem problemów”.
- „Chcę lepiej zrozumieć, jak używać interfejsu Intersection Observer API do ładowania opóźnionego zamiast tradycyjnych technik”.
- „To u mnie działa: pwafire.org/developer/codelabs/progressive-loading”.
Obrazy tła
- „Zwykle wczytuję obrazy jako tło w arkuszu CSS”.
- „Tag
<img>jest problematyczny i trudno jest kontrolować szczegółowe informacje, zwłaszcza w przypadku treści przesyłanych przez użytkowników. Używamy stylizacji<div>i background-image znacznie częściej, ponieważ pozwala nam to używać atrybutów background-size i background-position oraz zapobiega zapisywaniu obrazów po kliknięciu prawym przyciskiem myszy.
Przejrzystość
- „Jest rok 2019. Dlaczego pliki JPG nadal nie mają przezroczystości alfa?
- „Format PNG używam tylko do zdjęć, gdy potrzebuję przezroczystego tła”.
Obiekty zastępcze obrazów o niskiej jakości (LQIP)
- „Używamy LQIPS, ponieważ to świetna technika, która pozwala utrzymać zaangażowanie użytkowników bez zbyt wczesnego wczytywania obrazów wysokiej jakości”.
Wyniki
- „Niedawno wystąpił u nas problem z wydajnością obrazów. Gdy użytkownik przewija naszą witrynę w dół, wyświetlamy kolejne 60 kart z miniaturą. Ze względu na limit 6 połączeń w ramach tej samej domeny miniatury były blokowane, podobnie jak kolejne żądanie AJAX, które pobierało kolejne 60 kart, jeśli użytkownik kontynuował przewijanie w dół”.
- „Chcielibyśmy używać HTTP/2, ale większość naszych klientów korzysta z IE11. Dlatego rozważamy podział domen lub wczytywanie żądań danych JSON AJAX z innej domeny”.
Dobieranie rozmiaru
- „Przepraszam za rozmiar wewnętrzny. Użycie wysokości i szerokości wydaje się lepsze”.
- „Szukam sposobu na wygenerowanie mniejszej liczby rozmiarów. Obecnie jest ich około 12”.
- „Dynamiczna zmiana rozmiaru obrazów jest bardzo trudna i niemożliwa bez JS”.
- „Na potrzeby web.dev dobrze sprawdza się narzędzie responsivebreakpoints.com”.
Zdjęcia wysokiej jakości i w wysokiej rozdzielczości
- „How to download compress images without losing DPI quality?”
- „Jesteśmy firmą zajmującą się zarządzaniem dokumentami. Nasze aplikacje obsługują MILIONY zeskanowanych obrazów w wysokiej rozdzielczości, zwykle w formacie TIFF lub PDF.
- „To kłopot. Pliki obrazu w wysokiej rozdzielczości są wymagane w przypadku formatu drukowanego; muszą być zoptymalizowane pod kątem internetu. Zmniejszanie rozmiaru obrazów na potrzeby internetu jest kłopotliwe, ale jeśli autorzy dostarczają tylko lekkie pliki przeznaczone do publikacji w druku, to staje się to przeszkodą. Ostatecznie przekazujemy sprzeczne informacje na temat wymagań dotyczących przesyłania rękopisów z elementami graficznymi. W efekcie kończymy z kompleksowymi procesami przetwarzania tych materiałów”.
Możliwości przeglądarki
- „Automatyczne kadrowanie obrazów w zależności od rozmiaru w przeglądarce jako [wbudowana] funkcja byłoby bardzo przydatne, ponieważ kadrowanie wszystkich obrazów do 4 rozmiarów i zapisywanie całego znacznika znaczników zajmuje dużo czasu. Jeśli możemy przesłać jedno duże zdjęcie i napisać prosty tag obrazu, który automatycznie utworzy w przeglądarkach wiele atrybutów src, byłoby to świetna funkcja”.
- „Osobiście trudno mi uniknąć przepływu strony, gdy obraz z CSS jest ustawiony na obrazy elastyczne (max-width: 100%; height auto lub height: width: 100%; height auto), zwłaszcza w połączeniu z kierunkiem artystycznym z tagu obrazu/obrazu elastycznego. Najlepszym sposobem na uniknięcie tego problemu jest użycie „ujemnego wypełnienia” w przypadku stałego współczynnika proporcji obrazu, a następnie umieszczenie obrazu w polu tego współczynnika. Lepsze wsparcie przeglądarki lub obsługa obrazów responsywnych byłoby bardzo pomocne.
- „Wyłącz autoodtwarzanie GIF-a, pobierając tylko pierwszy kadr”.
Sieci CDN i usługi dotyczące obrazów
- „Google powinien udostępnić bezpłatną usługę CDN, taką jak Cloudflare”.
- „Może przydałoby się więcej narzędzi do konfigurowania dynamicznego skalowania i sieci CDN u różnych dostawców”.
- „Jedno duże, skompresowane zdjęcie to bardzo dobre rozwiązanie bez dodatkowych kosztów produkcji. Na potrzeby urządzeń mobilnych potrzebujesz obrazów o szerokości około 1000 pikseli (szerokość renderowania 500 pikseli). Taki rozmiar jest też odpowiedni na potrzeby dużych wyświetlaczy na komputerach stacjonarnych. Uważam, że sieci CDN zmieniające rozmiary obrazów to bardzo złe rozwiązanie, choć korzystałem z nich w przeszłości. System CMS powinien obsługiwać zmianę rozmiaru, ale jego konfiguracja jest zbyt skomplikowana, więc (na razie) dobrym kompromisem jest jedno rozwiązanie”.
- „CloudFlare automatycznie dostosowuje rozmiar naszych obrazów do ekranu użytkownika. Dzięki temu możemy skrócić czas wczytywania, ponieważ obrazy są wczytywane w stosunku do wyświetlacza użytkownika. Jeśli na przykład użytkownik korzysta z telefonu, obraz nie będzie wczytany w rozmiarach pulpitu.
- „Cloudflare robi to w tle, bez konieczności wykonywania przez nas jakichkolwiek czynności poza zaznaczeniem pola w panelu ustawień”.
- „Powtarzam, że jedynym powodem, dla którego mogę używać atrybutu srcset itp., jest łatwość obsługi Cloudinary. Jednak Cloudinary staje się drogie bardzo szybko. To wydaje się być poważną luką w procesie tworzenia.
- „Potrzebujemy sposobu na łatwe i inteligentne automatyczne przycinanie obrazów, aby można je było wyświetlać w różnych formatach w różnych kontekstach”.
- „Używam też obrazów z innych źródeł, takich jak Unsplash, gdzie można mieć mniejszą kontrolę nad rozdzielczością, jakością i skompresowaniem”.
Platforma CMS, platforma i ramy
- „Podczas tworzenia witryny za pomocą systemu CMS nadal trudno mi znaleźć najlepszy sposób na używanie obrazów. Autorzy zwykle konfigurują obrazy z różnymi wymiarami i oczekują, że nie będą one się kurczyć ani skalować. Nie wiem, czy można ustawić maksymalną szerokość lub wysokość dla obrazów.
- „Używam pakietu gatsby-image w ostatnich projektach i nie zamierzam zmienić tego podejścia”.
- „Zdjęcia często stanowią trudność, ponieważ są one umieszczane w systemie CMS przez użytkownika końcowego. Mogą one mieć dowolny rozmiar i format. Czasami nie ma też dostępnego oryginalnego obrazu w idealnym formacie i wymiarach”.
- „Zdjęcia są trudne do utrzymania, ponieważ nasz system jest systemem samoobsługowym. Dodawanie elementów sterujących jest trudne, chyba że wszystko odbywa się automatycznie bez wpływu na rozdzielczość. Also for us images don't look correct in mobile vs desktop"
- „Pomagam ludziom w optymalizacji ich witryn (WordPress). Największe problemy, które zauważyłem w przypadku obrazów: konieczność korzystania z CDN lub wtyczek do tworzenia formatu WebP. Element srcset/picture musi być prawidłowo zakodowany przez twórców motywów. Większość wtyczek do ładowania opóźnionego wczytuje się powoli, co powoduje nieprzyjemne wrażenia użytkownika. Obrazy tła trudno jest ładować w trybie leniwym”.
Koszt-efekt
- „Nowe metody są skuteczne, ale wydłużają czas tworzenia witryn”.
- „Wiele firm z listy Fortune 500 niechętnie wdraża nowe standardy, takie jak srcset i WebP. Wiele firm nie chciało wprowadzić tej zmiany, ponieważ wiązałoby się to z niepotrzebnym kosztem rozwoju obecnych stron internetowych. Zwiększenie wydajności nie jest szeroko omawiane ani zgłaszane przez użytkowników. W ewentualnym przypadku utrudnia to zapisywanie obrazów z internetu”.
- „Tworzenie wielu wersji i zarządzanie nimi w różnych rozmiarach jest kosztowne”.
- „Zajmują dużo miejsca na naszym serwerze”.
SEO
- „Trudno jest znaleźć równowagę między akceptowalną jakością obrazu a rozmiarem pliku. Z jednej strony chcę, aby strona wczytywała się szybko, co jest korzystne dla SEO, ale z drugiej strony słabej jakości obrazy obniżają jakość interfejsu użytkownika.
Rola obrazów w internecie
- „W internecie jest ich zbyt wiele. Przestań używać bezużytecznych obrazów, które nie wzbogacają treści pisanych.
- „Pamiętasz jeszcze czasy, gdy w internecie nie było obrazów, a selfie publikowaliśmy w postaci ASCII?
Narzędzia, wskazówki, standardy i sprawdzone metody: problemy i prośby
- [W odpowiedzi na tę ankietę jeden z uczestników napisał post na blogu]
- „Wymagania stale się zmieniają. Jako programista jestem sfrustrowany, ponieważ zapisywanie obrazów zajmuje dużo czasu. Optymalizujemy jak najlepiej, sprawdzamy witrynę, a następnie miesiące później Google decyduje, że obrazy można jeszcze bardziej skompresować lub że muszą być w innym formacie. To uniemożliwia nam znalezienie najlepszego możliwego rozwiązania dla klienta, które byłoby trwałe, a zamiast tego powoduje kosztowne działania po naszej i jego stronie. Niektórzy z naszych klientów prowadzących małe firmy po prostu nie mają budżetu na naprawianie i ponowne zapisywanie obrazów w celu spełnienia wymagań. Nie mamy budżetu na realizację tej pracy w ramach pakietów zarządzania. Pisanie kodu do wywoływania różnych rozmiarów obrazów na różnych urządzeniach również zajmuje dużo czasu. Fajnie byłoby mieć system zapisywania obrazów, który byłby spójny przez dłuższy czas”.
- „Tak, uważam, że w Lighthouse nie udało Ci się spełnić wymogu „Liczba żądań i ilość przesyłanych danych powinny być małe”. Jeśli witryna obsługuje protokół HTTP1.x, to na pewno, ale jeśli obsługuje HTTP2, liczba żądań jest mniej ważna lub nie ma znaczenia, jeśli pochodzą z tego samego hosta. Mam stronę lite, ale wczytuję 30 małych plików WebP (łącznie około 35 żądań) przez HTTP2 na tym samym adresie hosta. Lighthouse flaguje to jako problem „Liczba żądań i ilość przesyłanych danych powinny być małe”, ale jest to superszybkie, a dzięki protokołowi HTTP2 na tym samym adresie hosta liczba żądań nie stanowi problemu. I tak, pliki są już małe (większość ma od 1 KB do 2 KB lub mniej). Mogę załadować sprite, ale wtedy trzeba będzie wykonać więcej obliczeń CSS. Zaktualizuj raport „Liczba żądań i ilość przesyłanych danych powinny być małe” w Lighthouse, aby uwzględnić HTTP2 przez ten sam host.
- „Ludzie mieli problemy z zapamiętaniem, aby kompresować obrazy”.
- „Działania w różnych przeglądarkach są nieprzewidywalne, dlatego najprostsze rozwiązania są często najbezpieczniejsze”.