Opinia z ankiety na temat optymalizacji obrazów w lecie 2019 r.

Komentarze respondentów ankiety na temat różnych technik optymalizacji zdjęć

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 ankiety było ustalenie, dlaczego większość witryn nie stosuje się do 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 jesteś dostawcą usług CDN lub usług związanych z obrazami, ten post może Ci pomóc znaleźć nowe 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 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 we wszystkich przeglądarkach”. [Uwaga: Sketch obsługuje format WebP]
  • „Następna generacja rozwiązań formatowania byłaby świetna”.
  • „Zaprzestańcie tak mocnego promowania WebP, gdy przeglądarki nie obsługują tego formatu, 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 uniknąć długiego czasu wczytywania. W razie potrzeby używamy też plików SVG, aby zapewnić jakość w przypadku projektowania responsywnego”.
  • „Staramy się używać zoptymalizowanej grafiki wektorowej w przypadku wszystkich obrazów, ale jeśli to możliwe, używamy zdjęć”.

Inne formaty obrazów

  • „Musimy lepiej uświadamiać ludzi, 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 uciążliwe”.
  • „Utwórz atrybuty ładowania opóźnionego, które będą 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 WOLĄ”. Nasz zespół podsumował to w ten sposób. 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 tła obrazu 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 metoda na utrzymanie zaangażowania użytkowników bez konieczności wczytywania obrazów wysokiej jakości na samym początku”.

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ć protokołu 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 zmniejszenie 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 drukowanej, to jest to przeszkoda nie do przejścia. Ostatecznie przekazujemy sprzeczne informacje na temat wymagań dotyczących przesyłania manuskryptó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łaby 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 obrazów adaptacyjnych/obrazu. Najlepszym sposobem na uniknięcie tego problemu jest użycie „hacka z ujemnym wypełnieniem” w przypadku stałego formatu obrazu, a następnie umieszczenie obrazu w polu formatu. 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, mocno skompresowane zdjęcie to bardzo przyzwoite 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 CDN do zmiany rozmiaru obrazów to bardzo złe rozwiązanie, chociaż korzystałem z niego 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 było je wyświetlać w różnych formatach w różnych kontekstach”.
  • „Używam też obrazów z innych źródeł, takich jak Unsplash, gdzie kontrola rozdzielczości, jakości i kompresji jest dużo mniejsza”.

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 są często najtrudniejszym elementem, 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ć leniwie”.

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ż oznaczałaby ona niepotrzebne koszty 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 rozmiarów oraz zarządzanie nimi jest kosztowne”.
  • „Zajmują dużo miejsca na naszym serwerze”.

SEO

  • „Trudne jest znalezienie równowagi między akceptowalną jakością obrazu a rozmiarem pliku. Z jednej strony zależy mi na szybkim wczytywaniu, 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 tym bardzo zaniepokojony, 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 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 dla nas i dla niego. Niektórzy z naszych klientów prowadzących małe firmy po prostu nie mają budżetu na naprawianie obrazów i ich ponowne zapisywanie 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 jest obsługiwana przez HTTP1.x, to na pewno, ale jeśli witryna jest obsługiwana przez HTTP2, liczba żądań jest mniej ważna lub nie stanowi problemu, jeśli pochodzi z tego samego hosta. Mam stronę lite, ale wczytuję 30 mniejszych plików WebP (łącznie około 35 żądań) przez HTTP2 na tym samym adresie hosta. Lighthouse sygnalizuje ten problem jako „Liczba żądań i ilość przesyłanych danych powinny być małe”, ale jest to superszybka strona, a dzięki 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 potem trzeba będzie przetworzyć więcej kodu 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”.
  • „Zachowanie w różnych przeglądarkach jest nieprzewidywalne, dlatego najprostsze rozwiązania są często najbezpieczniejsze”.