Komentarze uczestników ankiety na temat różnych technik optymalizacji obrazów
Sam Dutton
Ten post zawiera opinie, które zespół Google Web DevRel otrzymał w ankiecie dotyczącej technik optymalizacji obrazów przeprowadzonej latem 2019 r. Odpowiedzi zostały zebrane za pomocą Podstaw tworzenia witryn i @ChromiumDev. Ankieta miała na celu ustalenie, dlaczego większość witryn nie stosuje sprawdzonych metod optymalizacji obrazów, mimo że wydaje się to stosunkowo łatwym sposobem na poprawę wydajności. Dane odpowiedzi nie są tu wymienione, ponieważ w metodologii ankiety wystąpiły błędy.
Odbiorcy
- Jeśli jesteś programistą stron internetowych, ten post może Ci się przydać do odkrywania nowych technik optymalizacji obrazów lub szczegółów dotyczących tego, jak inni programiści rozwiązali problem, z którym się mierzysz, a także kosztów, korzyści i ograniczeń każdej techniki.
- Jeśli jesteś dostawcą usług graficznych lub sieci CDN, ten post może pomóc Ci znaleźć nowe możliwości rynkowe.
- Jeśli jesteś deweloperem platformy, narzędzia do kompilacji lub systemu CMS, ten post może podsunąć Ci pomysły na nowe funkcje do wdrożenia.
Komentarze
WebP
- „Podoba mi się WebP, ale nie jest jeszcze w pełni gotowy. Co więcej, nasza wersja WordPressa nie obsługuje formatu WebP. Photoshop, jedna z najpopularniejszych aplikacji do edycji zdjęć, również nie obsługuje formatu WebP bez dodatkowych ustawień. Nie możemy więc polegać na aplikacjach ani usługach innych firm w zakresie kompresji obrazów”.
- „Umożliwienie korzystania z WebP w Safari”.
- „Chętnie używałbym formatu WebP, gdybym mógł eksportować pliki z Photoshopa, Figmy lub Sketcha i gdyby wszystkie przeglądarki go obsługiwały”. [Uwaga: Sketch obsługuje WebP]
- „Rozwiązanie do formatowania nowej generacji byłoby świetne”.
- „Przestańcie tak bardzo promować WebP, skoro przeglądarki słabo go obsługują, i rozważcie używanie PNG zamiast JPEG w przypadku zrzutów ekranu”.
- „Dokumenty Google nie obsługują formatu WebP”.
- „Używalibyśmy wyłącznie formatu WebP, ale obawiamy się o zgodność z przeglądarkami”.
- „Najpierw napraw zgodność przeglądarek i zaktualizuj starsze przeglądarki lub dodaj poprawki dla starszych wersji, a wtedy ludzie będą bardziej skłonni do korzystania z nowych typów obrazów, takich jak WebP…”
- „Zachęcaj deweloperów wtyczek i motywów do rozważenia obsługi formatu WebP i innych formatów obrazów nowej generacji, aby osoby, które nie są deweloperami, nie musiały się tym zajmować”.
obrazy SVG i wektorowe,
- „Jeśli to możliwe, używam (animowanych) plików SVG. Gatsby-image rozwiązał wiele z tych problemów. Jednak gdy przyjrzysz się temu, co zrobili, zobaczysz, że jest całkowicie nierealistyczne, aby normalna witryna musiała tworzyć coś takiego, aby obrazy działały prawidłowo. Przeglądarka powinna przejąć więcej tej odpowiedzialności”.
- „Czy można opisać, jak tworzyć animacje SVG za pomocą lottie.js?”
- „W większości przypadków staramy się używać w naszej witrynie obrazów JPEG o dużej rozdzielczości i małym rozmiarze, aby uniknąć długiego czasu wczytywania. W razie potrzeby używamy też plików SVG, aby zapewnić wysoką jakość elastycznego projektowania stron”.
- „Staramy się używać zoptymalizowanej grafiki wektorowej we wszystkich przypadkach, z wyjątkiem zdjęć, jeśli to możliwe”.
Inne formaty plików graficznych
- „[Musimy] lepiej edukować ludzi, aby przestali używać GIF-ów”.
Leniwe ładowanie
- „Podczas rozważania funkcji takich jak leniwe ładowanie należy pamiętać o użytkownikach, ponieważ dla wielu z nich jest to irytujące”.
- „Spraw, aby atrybut leniwego ładowania działał z obrazem tła”.
- „Frameworki powinny od razu lepiej przetwarzać zasoby”.
- „Dawno temu zrezygnowaliśmy z leniwego ładowania. Użytkownicy zgłaszają, że miliony obrazów i witryn „NIE ŁADUJĄ SIĘ”. Nasz zespół tak to zrozumiał. Użytkownikom bez wiedzy technicznej trudno jest opisać problemy”.
- „Chcę lepiej zrozumieć, jak używać interfejsu Intersection Observer API do leniwego ładowania zamiast tradycyjnych technik”.
- „W moim przypadku dobrze sprawdza się ta strona: pwafire.org/developer/codelabs/progressive-loading”.
Obrazy tła
- „Zwykle wczytuję obrazy jako tła w CSS”.
- „Tag
<img>jest problematyczny i trudno kontrolować jego szczegóły, zwłaszcza w przypadku treści przesyłanych przez użytkowników. Znacznie częściej używamy<div>i stylu background-image, ponieważ pozwala nam to korzystać z background-size i background-position oraz uniemożliwia zapisywanie obrazu po kliknięciu prawym przyciskiem myszy”.
Przejrzystość
- „Jest rok 2019. Jak to możliwe, że pliki JPG nadal nie mają przezroczystości alfa?
- „Używam formatu PNG tylko w przypadku zdjęć, gdy potrzebuję przezroczystego tła”.
Obiekty zastępcze obrazów o niskiej jakości (LQIP)
- „Używamy LQIPS i jest to świetna technika, która pozwala utrzymać zaangażowanie użytkowników bez konieczności wczytywania obrazów wysokiej jakości na samym początku”.
Wydajność
- „Niedawno mieliśmy problem z wydajnością obrazów. Gdy użytkownik przewija stronę w dół, wyświetlamy kolejne 60 kart z miniaturami. Ze względu na limit 6 połączeń w tej samej domenie miniatury były blokowane, podobnie jak kolejne żądanie AJAX, które miało pobrać następne 60 kart, gdy użytkownik przewijał stronę w dół”.
- „Chętnie korzystalibyśmy z HTTP/2, ale większość naszych klientów używa IE11. Dlatego rozważamy fragmentowanie domeny i wczytywanie żądań danych AJAX JSON z innej domeny”.
Dobieranie rozmiaru
- „Przepraszam za intrinsicsize; moim zdaniem lepiej jest używać height/width”.
- „Szukam sposobu na generowanie mniejszej liczby rozmiarów, obecnie jest ich około 12”.
- „Dynamiczna zmiana rozmiaru obrazów jest bardzo trudna i niemożliwa bez JS”.
- „Narzędzie takie jak responsivebreakpoints.com jest dobre dla web.dev :)”.
obrazy wysokiej jakości i w wysokiej rozdzielczości;
- „Jak pobrać skompresowane obrazy bez utraty jakości DPI?”
- „Zajmujemy się zarządzaniem dokumentami. Nasze aplikacje obsługują MILIONY zeskanowanych obrazów o wysokiej rozdzielczości, zwykle w formacie TIFF lub PDF”.
- „To kłopotliwe. Pliki graficzne o wysokiej rozdzielczości są niezbędne w przypadku formatu drukowanego. Muszą być zoptymalizowane pod kątem internetu. Zmniejszanie obrazów na potrzeby internetu jest uciążliwe, ale jeśli autorzy dostarczają tylko lekkie pliki obrazów przeznaczonych do publikacji drukowanej, może to uniemożliwić publikację. W rezultacie wysyłamy sprzeczne komunikaty dotyczące wymagań związanych z przesyłaniem manuskryptów z ilustracjami. W rezultacie mamy złożone przepływy pracy do przetwarzania tych materiałów”.
Możliwości przeglądarki
- „Automatyczne przycinanie obrazów przez przeglądarkę jako [wbudowana] funkcja byłoby bardzo przydatne, ponieważ przycinanie wszystkich obrazów do 4 rozmiarów i pisanie wszystkich znaczników jest czasochłonne. Jeśli możemy przesłać jedno duże zdjęcie i napisać prosty tag obrazu, który przeglądarki automatycznie utworzą w ramach wielu atrybutów src, będzie to bardzo przydatna funkcja”.
- „Osobiście mam trudności z unikaniem ponownego renderowania strony, gdy szerokość obrazu jest ustawiana przez CSS dla obrazów elastycznych (max-width: 100%; height auto lub height: width: 100%; height auto), zwłaszcza w połączeniu z kierunkiem artystycznym z obrazów adaptacyjnych / tagu obrazu. Najlepszym sposobem na uniknięcie tego problemu jest użycie „triku z ujemnym dopełnieniem” w przypadku stałego współczynnika obrazu, a następnie umieszczenie obrazu w polu o tym współczynniku. Lepsza obsługa przeglądarek i elastyczne przetwarzanie obrazów byłyby bardzo pomocne”.
- „Wyłącz autoodtwarzanie GIF-ów, pobierając tylko pierwszą klatkę”.
Sieci CDN i usługi graficzne
- „Google powinno udostępniać bezpłatną sieć 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”.
- „Pojedynczy, zbyt duży i nadmiernie skompresowany obraz to bardzo dobre rozwiązanie, które nie wiąże się z dodatkowymi kosztami produkcji. Na urządzeniach mobilnych potrzebujesz obrazów o szerokości około 1000 pikseli (szerokość renderowania 500 pikseli). Jest to też rozmiar, którego potrzebujesz na dużych wyświetlaczach i wyświetlaczach komputerów bez technologii Retina. Uważam, że sieci CDN zmieniające rozmiar obrazów to bardzo złe rozwiązanie, chociaż zdarzało mi się z niego korzystać. CMS powinien obsługiwać zmianę rozmiaru, a jeśli jest to zbyt skomplikowane, dobrym kompromisem (na razie) jest jedno rozwiązanie”.
- „Cloudflare automatycznie skaluje nasze obrazy, aby jak najlepiej pasowały do wyświetlacza użytkownika. Dzięki temu możemy skrócić czas wczytywania, ponieważ obrazy są wczytywane w odniesieniu do wyświetlacza użytkownika. Jeśli na przykład użytkownik korzysta z telefonu, nie zostanie wczytane tło w rozmiarze na komputer”.
- „Cloudflare robi to w tle, a my musimy tylko zaznaczyć pole w panelu ustawień”.
- „Powtórzę tylko, że jedynym powodem, dla którego mogę z powodzeniem używać srcset itp., jest łatwość korzystania z Cloudinary. Jednak Cloudinary bardzo szybko staje się drogie. To duża luka w procesie programowania”.
- Potrzebujemy sposobu na łatwe i inteligentne automatyczne przycinanie obrazów, aby można było ich używać w różnych formatach obrazu w różnych kontekstach.
- „Używam też obrazów od innych dostawców, takich jak Unsplash, gdzie kontrola nad rozdzielczością, jakością i kompresją jest bardzo ograniczona”.
CMS, platforma i framework
- „Nadal mam trudności z ustaleniem, jak najlepiej używać obrazów podczas tworzenia witryny za pomocą CMS. Autorzy zwykle konfigurują obrazy o różnych wymiarach i oczekują, że nie będą one zmniejszane ani skalowane. Nie mam pewności, czy można ustawić maksymalną szerokość lub wysokość obrazów”.
- „Używam gatsby-image w ostatnich kilku projektach i nie zamierzam z tego rezygnować”.
- Obrazy są często trudną częścią, ponieważ są umieszczane w systemie CMS przez użytkownika końcowego, który może używać dowolnego rozmiaru i formatu. Czasami oryginalny obraz w idealnym formacie pliku graficznego i wymiarach nie jest dostępny.
- „Zdjęcia są trudne w utrzymaniu, ponieważ nasz system jest samoobsługowy, a dodawanie elementów sterujących jest trudne, chyba że wszystko dzieje się automatycznie bez wpływu na rozdzielczość. Poza tym obrazy nie wyglądają prawidłowo na urządzeniach mobilnych w porównaniu z komputerami”.
- „Pomagam ludziom optymalizować ich witryny (WordPress). Największe problemy, jakie zauważyłem w przypadku obrazów, to: konieczność korzystania z sieci CDN lub wtyczek do tworzenia plików WebP. srcset/picture musi być prawidłowo zakodowany przez deweloperów motywów. Większość wtyczek do leniwego ładowania wczytuje się powoli, co pogarsza wrażenia użytkownika. Obrazy tła trudno jest ładować leniwie”.
Koszt/korzyść
- „Nowe praktyki są skuteczne, ale wydłużają czas tworzenia witryn”.
- „Wiele firm z listy Fortune 500 powoli wdraża nowe standardy, takie jak srcset i WebP. Wielu firmom wydaje się, że to niepotrzebny koszt związany z rozwojem obecnych witryn, i dlatego nie chcą wprowadzać zmian. Użytkownicy nie wspominają o poprawie wydajności ani nie zgłaszają jej (UX). Jeśli już, to nieco utrudnia zapisywanie obrazów z internetu”.
- „Tworzenie i zarządzanie wieloma rozmiarami i wersjami 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 szybko się ładowała, co jest korzystne dla SEO, ale z drugiej strony obrazy niskiej jakości będą negatywnie wpływać na interfejs i wrażenia użytkownika”.
Rola obrazów w internecie
- „W internecie jest ich za dużo. Przestań używać nieprzydatnych obrazów, które nie wzbogacają treści pisemnych”.
- „Pamiętasz jeszcze czasy, gdy w internecie nie było obrazów, a selfie udostępnialiśmy jako grafiki ASCII?”
Narzędzia, wskazówki, standardy i sprawdzone metody: frustracje i prośby
- [Jeden z uczestników napisał post na blogu w odpowiedzi na tę ankietę]
- „Wymagania wydają się stale zmieniać. Dla twórcy stron internetowych jest to bardzo frustrujące, ponieważ zapisywanie obrazów zajmuje dużo czasu. Optymalizujemy witrynę najlepiej, jak potrafimy, sprawdzamy ją, a po kilku miesiącach Google stwierdza, że obrazy mogłyby być jeszcze bardziej skompresowane lub powinny być w innym formacie. Uniemożliwia nam to dostarczenie klientowi najlepszego możliwego rozwiązania, które będzie trwałe, a zamiast tego tworzy kosztowne przedsięwzięcie dla niego i dla nas. Niektórzy z naszych klientów prowadzących małe firmy po prostu nie mają budżetu na to, abyśmy mogli stale poprawiać obrazy i ponownie je zapisywać, aby spełniały wymagania. Nie mamy budżetu na wykonanie tych prac w ramach pakietów zarządzania. Pisanie kodu, który wywołuje różne rozmiary obrazów na różnych urządzeniach, również jest czasochłonne. Dobrze byłoby opracować system zapisywania obrazów, który byłby spójny przez dłuższy czas”.
- „Tak, myślę, że źle rozumiesz zalecenie Lighthouse dotyczące utrzymywania małej liczby żądań i małych rozmiarów plików. Jeśli witryna jest obsługiwana przez HTTP1.x, to tak, ale jeśli jest obsługiwana przez HTTP2, liczba żądań jest mniej ważna lub nie stanowi problemu, jeśli pochodzą one z tej samej nazwy hosta. Mam lekką witrynę, ale wczytuję 30 małych plików WebP, co daje łącznie około 35 żądań, przez HTTP2 na tej samej nazwie hosta. Lighthouse oznacza to jako problem „Utrzymuj małą liczbę żądań i małe rozmiary plików”, podczas gdy jest to bardzo szybkie, a ze względu na HTTP2 na tej samej nazwie hosta liczba żądań nie stanowi problemu. Pliki są już małe (większość ma od 1 KB do 2 KB lub mniej). Mogę wczytać sprite, ale wtedy trzeba będzie wykonać więcej obliczeń CSS. Zaktualizuj raport „Keep Request Counts Low And File Sizes Small” (Utrzymuj małą liczbę żądań i niewielkie rozmiary plików) w Lighthouse, aby uwzględnić HTTP2 w przypadku tej samej nazwy hosta”.
- „Użytkownicy często zapominają o kompresowaniu obrazów”.
- „Zachowanie w różnych przeglądarkach pozostaje nieprzewidywalne, więc najprostsze rozwiązania są często najbezpieczniejsze”.