Komentarze uczestników ankiety na temat różnych technik optymalizacji obrazów
Ten post zawiera opinię, którą zespół Google Web DevRel otrzymał w ankiecie dotyczącej technik optymalizacji obrazów latem 2019 r. Odpowiedzi pochodziły z platform Web Fundamentals i @ChromiumDev. Celem tej ankiety było ustalenie, dlaczego większość witryn nie stosuje sprawdzonych metod dotyczących optymalizacji obrazów, chociaż wydaje się to stosunkowo łatwy sposób na zwiększenie skuteczności. Danych odpowiedzi nie ma na tej liście, ponieważ w metodologii ankietowej wystąpiły błędy.
Odbiorcy
- Jeśli jesteś programistą stron internetowych, ten post może Ci się przydać, gdy chcesz poznać nowe techniki optymalizacji obrazów lub poznać sposoby rozwiązania napotkanego przez innych programistów stron internetowych, a także koszty, korzyści i ograniczenia każdej z tych metod.
- Jeśli jesteś dostawcą usług graficznych lub dostawcą CDN dla obrazów, ten post pomoże Ci znaleźć nowe możliwości rynkowe.
- Jeśli tworzysz platformy, narzędzia do tworzenia lub tworzysz CMS, ten post może podsunąć Ci pomysły na nowe funkcje, które warto wdrożyć.
Komentarze
WebP
- „Lubię WebP, ale nie jest on jeszcze w pełni gotowy. Nasz WordPress nie obsługuje formatu WebP. Jedna z najpopularniejszych aplikacji do edycji zdjęć – Photoshop od razu nie obsługuje WebP. W kwestii kompresji obrazu nie możemy polegać wyłącznie na aplikacjach i usługach innych firm”.
- „Włącz WebP w Safari”.
- „Chciałbym używać WebP, gdyby można było wyeksportować je z programu Photoshop, Figma/Sketch i wszystkie przeglądarki go obsługiwały”. [Uwaga: Sketch nie obsługuje WebP]
- „Byłoby świetne rozwiązanie do formatowania nowej generacji”.
- „Przestań przenosić WebP tak bardzo, gdy obsługa przeglądarki jest słaba, i rozważ konieczność tworzenia zrzutów ekranu w formacie PNG zamiast JPEG”.
- „Dokumenty Google nie obsługują WebP”.
- „Korzystalibyśmy wyłącznie z WebP, ale mamy obawy o zgodność przeglądarek”.
- „Najpierw napraw zgodność z przeglądarką i zaktualizuj starsze przeglądarki lub dodaj starsze poprawki, a użytkownicy będą bardziej skłonni do stosowania nowych typów obrazów, takich jak WebP...”.
- „Zachęć programistów wtyczek i motywów do rozważenia obsługi WebP i innych typów obrazów nowej generacji, aby osoby niebędące programistami nie musiały się nimi zajmować”.
Obrazy SVG i obrazy wektorowe
- „Jeśli to możliwe, korzystam z (animowanych) SVG. Funkcja gatsby-image naprawiła ten problem. Gdy jednak zagłębisz się w jego działania, możesz stwierdzić, że zwykła witryna musi tworzyć takie elementy, aby obrazy działały prawidłowo. Przeglądarka powinna wziąć na siebie większy udział”.
- „Czy byłoby możliwe udokumentowanie, jak tworzyć animacje SVG przy użyciu pliku lottie.js?
- „Przez większość czasu staramy się używać w naszej witrynie zdjęć JPEG o dużej rozdzielczości, o małym rozmiarze, aby uniknąć czasów wczytywania. W razie potrzeby stosujemy też pliki SVG, aby zapewnić odpowiednią jakość projektowania w sposób elastyczny”.
- „W miarę możliwości staramy się używać zoptymalizowanej grafiki wektorowej do wszystkich zdjęć oprócz zdjęć”.
Inne formaty obrazu
- „Musimy lepiej edukować ludzi, aby przestali używać GIF-ów”.
Leniwe ładowanie
- „Rozważając takie funkcje jak leniwe ładowanie, pamiętaj o użytkowniku, bo dla wielu osób jest to irytujące”.
- „Ustaw atrybut leniwego ładowania z obrazem tła”.
- „Frameworks powinny lepiej przetwarzać zasoby od razu po uruchomieniu”.
- „Dawniej zmieniliśmy leniwe ładowanie. Użytkownicy zgłaszają miliony obrazów i witryn ze stanem „NIE WCZYTUJĘ”. Trzeba zrozumieć, jakie podsumowanie podsumował nasz zespół. Użytkownikom bez wiedzy technicznej trudno jest opisać problemy”.
- „Chcę lepiej zrozumieć, jak używać interfejsu Intersection Observer API do leniwego ładowania zamiast korzystać z tradycyjnych technik”.
- „Dla mnie sprawdza się to: pwafire.org/developer/codelabs/progressive-loading”.
Obrazy tła
- „Zazwyczaj wczytuję obrazy jako tła w CSS”.
- „Tag
<img>
to problem i trudno kontrolować szczegółowe informacje, szczególnie w przypadku treści przesłanych przez użytkowników. Znacznie częściej korzystamy ze stylu<div>
i stylów obrazu tła, ponieważ pozwala to określić rozmiar tła i pozycję tła oraz zapobiec zapisywaniu obrazu prawym przyciskiem myszy.
Przejrzystość
- „Jest 2019 rok. Dlaczego pliki JPG wciąż są dostępne bez przezroczystości w wersji alfa?”.
- „Tak naprawdę używam plików PNG do zdjęć tylko wtedy, gdy potrzebuję przezroczystego tła”.
Obiekty zastępcze obrazów niskiej jakości (LQIP)
- „Używamy LQIPS i jest to świetna technika, aby utrzymać zaangażowanie użytkowników bez konieczności szybkiego wczytywania wysokiej jakości obrazów”.
Wydajność
- „Niedawno mieliśmy problem z wydajnością obrazów. Gdy użytkownik przewija stronę w dół, pokazujemy kolejne 60 kart, które zawierają miniaturę. Ze względu na limit 6 połączeń w tej samej domenie miniatury były blokowane, a w ramach następnego żądania AJAX, aby uzyskać kolejne 60 kart, jeśli użytkownik nadal przewinie stronę w dół”.
- „Chcielibyśmy używać HTTP/2, ale większość naszych klientów używa IE11. Dlatego analizujemy możliwość fragmentacji domeny / wczytywania żądań danych JSON w formacie JSON z innej domeny”.
Dobieranie rozmiaru
- „Przepraszamy za rozmiar wewnętrzny. Moim zdaniem lepsze wykorzystanie ma wysokość/szerokość”.
- „Szukam sposobu na generowanie mniejszej liczby rozmiarów. Obecnie wynosi on ok. 12”.
- „Dynamiczna zmiana rozmiaru obrazów jest naprawdę trudna i niemożliwa bez JavaScriptu”.
- „W przypadku web.dev sprawdzi się takie narzędzie jak responsivebreakpoints.com”.
Zdjęcia o wysokiej jakości i 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 w wysokiej rozdzielczości, zwykle w formacie TIFF lub PDF”.
- „To uciążliwe. Obrazy w wysokiej rozdzielczości są niezbędne w przypadku formatu drukowanego; muszą być zoptymalizowane pod kątem internetu. Zmniejszenie rozmiaru obrazów do publikacji w internecie jest kłopotliwe, ale problem sprawdza się, gdy autorzy dostarczają tylko lekkie pliki obrazów przeznaczonych do publikacji drukowanych. W końcu czytamy różne wiadomości o wymaganiach dotyczących przesyłania rękopisów z dziełami sztuki. Przetwarzanie tych materiałów kończy się wtedy złożonymi przepływami pracy”.
Funkcje przeglądarki
- „Automatyczna responsywność przycięcia typu src z przeglądarki jako [wbudowana] funkcja byłaby bardzo przydatna, ponieważ przycięcie wszystkich obrazów do 4 rozmiarów i pisanie wszystkich znaczników byłoby czasochłonne. Jeśli możemy przesłać jedno duże zdjęcie i napisać prosty tag obrazu, przeglądarki automatycznie utworzą wiele atrybutów src, które będą zwycięską funkcją.”
- „Mam problem z uniknięciem przeformatowania strony, gdy obraz z jest ustawiony przez CSS dla obrazów elastycznych (maksymalna szerokość: 100%; wysokość automatyczna lub wysokość: szerokość: 100%; wysokość automatyczna), zwłaszcza w połączeniu z kierunkiem grafiki z adaptacyjnych tagów obrazów/obrazów. Najlepszym sposobem na uniknięcie problemu jest stosowanie „negatywnego dopełnienia” w celu uzyskania stałego współczynnika proporcji obrazu, a następnie umieszczenie obrazu w ramach tego formatu. Lepsza obsługa przeglądarek/elastyczna obsługa obrazów bardzo się przyda”.
- „Wyłącz autoodtwarzanie” GIF-a, pobierając tylko pierwszą klatkę.
Sieci CDN i usługi graficzne
- „Google powinien udostępnić bezpłatną sieć CDN, taką jak Cloudflare”.
- „Przydałoby się więcej narzędzi do konfigurowania dynamicznego skalowania i sieci CDN z różnymi dostawcami”.
- „Pojedynczy ponadwymiarowy, skompresowany obraz to bardzo dobre rozwiązanie bez dodatkowych kosztów produkcji. Potrzebujesz około 1000 pikseli szerokości do wyświetlania na urządzeniach mobilnych (szerokości renderowania 500 pikseli) i tego samego rozmiaru w przypadku dużych ekranów innych niż Retina na komputerach. Uważam, że zmiana rozmiaru obrazów w sieciach CDN jest bardzo zła, choć korzystałam z niego już wcześniej. System CMS powinien sobie z tym poradzić, a konfiguracja jest zbyt skomplikowana. Na razie jedno rozwiązanie to dobry kompromis”.
- „CloudFlare automatycznie skaluje nasze obrazy, aby jak najlepiej pasowały do wyświetlacza użytkownika. Pozwala to zaoszczędzić czas wczytywania, ponieważ obrazy są wczytywane względem zawartości wyświetlanej przez użytkownika. Jeśli na przykład użytkownik korzysta z telefonu, treść nie załaduje się w tle na komputerze”.
- „Cloudflare działa w tle i nie musimy nic robić poza zaznaczeniem pola w panelu ustawień.
- „Dla przypomnienia: jedyny powód, dla którego mogę z powodzeniem używać srcset itp., to łatwość działania chmury. Usługa Cloudinary jest jednak kosztowna naprawdę szybko. To duża dziura w procesie programowania”.
- „Potrzebujemy sposobu na łatwe automatyczne przycinanie obrazów, tak aby pasowały do różnych formatów obrazu w różnych kontekstach”.
- „Używam też obrazów pochodzących od innych dostawców, takich jak Unsplash, gdzie kontrola rozdzielczości, jakości i kompresji jest bardzo słaba”.
CMS, platforma i platforma
- „Wciąż mam problemy ze znalezieniem najlepszego sposobu wykorzystania obrazów podczas tworzenia witryny za pomocą systemu CMS. Autorzy często konfigurują obrazy o różnych wymiarach i oczekują, że obrazy nie będą się zmniejszać ani nie skalować. Nie mam pewności, czy mogę ustawić wartość max-width lub max-height dla obrazów”.
- „Korzystałem(-am) z gatsby-image w kilku ostatnich projektach i nigdy nie myślałem(-am)”.
- „Obrazy są często trudnym zadaniem, ponieważ użytkownicy umieszczają je w systemie CMS. Mogą mieć dowolne rozmiary i formaty, a czasem nawet oryginalne obrazy w idealnym formacie, a wymiary nie są dostępne”.
- „Obsługa obrazów jest trudny, ponieważ nasz system samodzielnie się nimi zajmuje i ma trudności z dodawaniem elementów sterujących, chyba że wszystko dzieje się automatycznie i nie wpływa na rozdzielczość. Także nasze zdjęcia nie wyglądają poprawnie na urządzeniach mobilnych i komputerach”.
- „Pomagam użytkownikom w optymalizacji witryn (WordPress). Największe problemy z obrazami, które zauważyłem, to: potrzeba korzystania z sieci CDN lub wtyczek do stworzenia WebP. Komponent srcset/picture musi być odpowiednio zakodowany przez programistów motywów. Większość wtyczek ładuje się powoli, co powoduje złe wrażenia. Obrazy tła trudno się leniwie ładować”.
Koszt/korzyść
- „Nowe metody są skuteczne, ale wydłużają czas rozwoju witryn”.
- „Wiele firm z listy Fortune 500 z opóźnieniem przyjęło brak zgodności z nowymi standardami, takimi jak srcset i WebP. W związku z tym wiele firm nie walczy z tą zmianą, ponieważ nie stanowi to niepotrzebnego kosztu rozwoju istniejących witryn. Zyski nie są szeroko omawiane ani raportowane przez użytkowników (UX). W przeciwnym razie zapisywanie obrazów z internetu jest trochę trudniejsze”.
- „Tworzenie wielu rozmiarów i wersji oraz zarządzanie nimi jest kosztowne”.
- „Zajmują dużo miejsca na naszym serwerze”.
SEO
- „Trudno jest zachować równowagę między akceptowalną jakością obrazu a rozmiarem pliku. Z jednej strony zależy mi na szybkim ładowaniu ze względu na korzyści związane z SEO, ale z drugiej strony obrazy niskiej jakości będą odwracać uwagę od interfejsu i UX”.
Rola obrazów w internecie
- „W internecie jest ich zbyt wiele. Przestań używać bezużytecznych obrazów, które nie wzbogacają tekstu”.
- „Czy pamięta Pan/Pani czasy, kiedy w internecie nie było zdjęć i udostępnialiśmy selfie jako kod ASCII?”.
Narzędzia, wskazówki, standardy i sprawdzone metody: frustracje i prośby
- [W odpowiedzi na tę ankietę jeden z uczestników napisał posta na blogu]
- „Wymagania stale się zmieniają. Dla programistów stron internetowych to bardzo frustrujące, ponieważ zapisywanie obrazów jest bardzo czasochłonne. Robimy wszystko, co w naszej mocy, by sprawdzić witrynę, a kilka miesięcy później firma Google uznała, że obrazy powinny być jeszcze bardziej skompresowane lub mieć inny format. To sprawia, że nie możemy zaoferować klientom najlepszego możliwego rozwiązania, które jest trwałe, a co za tym idzie, jest kosztowne zarówno dla nas, jak i dla nas. Niektórzy z naszych małych firm po prostu nie mają wystarczających środków, aby ciągle poprawiać obrazy i zapisywać je ponownie, aby zachować zgodność z wymaganiami. Nie mamy budżetu, aby wykonać te zadania w ramach ich pakietów do zarządzania. Napisanie kodu wywołującego obrazy o różnych rozmiarach na różnych urządzeniach też jest czasochłonne. Świetnie byłoby wymyślić system zapisywania zdjęć, który działałaby w sposób spójny przez dłuższy czas”.
- „Tak, uważam, że w Lighthouse nie udało Ci się uzyskać informacji o liczbie żądań i małych rozmiarach plików”. Jeśli witryna obsługuje protokół HTTP1.x, to oczywiste, ale jeśli witryna używa protokołu HTTP2, wtedy liczba żądań jest mniej istotna lub nawet nie stanowi problemu, jeśli witryna pochodzi z tej samej nazwy hosta. Mam witrynę Lite, ale wczytuję 30 małych plików WebP z około 35 żądaniami łącznie przez HTTP2 na tej samej nazwie hosta. Lighthouse oznacza to jako błąd „Zachowaj małą liczbę żądań i małych rozmiarów plików”, podczas gdy jest to superszybkie działanie, a ze względu na protokół HTTP2 na tej samej nazwie hosta liczba żądań nie stanowi problemu. Tak, pliki są już małe (w większości od 1 KB do 2 KB). Mogę wczytać sprite, ale trzeba wykonać jeszcze więcej obliczeń CSS. W związku z tym zaktualizuj raport „Zachowaj małą liczbę żądań i mały rozmiar plików” w Lighthouse, aby uwzględniał protokół HTTP2 o tej samej nazwie hosta.
- „Ludzie z trudem muszą pamiętać o skompresowaniu swoich obrazów”.
- „Zachowanie użytkowników w różnych przeglądarkach pozostaje nieprzewidywalne, więc najprostsze rozwiązania są często najbezpieczniejsze”.