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

Komentarze respondentów ankiety na temat różnych technik optymalizacji obrazów

[Imię i nazwisko]

W tym poście znajdziesz pełną opinię, którą firma Google Web DevRel otrzymała w ramach ankiety dotyczącej technik optymalizacji obrazów, która odbyła się latem 2019 r. Odpowiedzi na te pytania można było uzyskać w Podstawach tworzenia witryn i @ChromiumDev. Celem ankiety było wyjaśnienie, dlaczego większość witryn nie stosuje sprawdzonych metod optymalizacji obrazów, mimo że wydają się one stosunkowo łatwym sposobem na poprawę skuteczności. Dane odpowiedzi nie są tu wymienione, ponieważ wystąpiły błędy w metodologii ankiet.

Odbiorcy

  • Jeśli jesteś programistą stron internetowych, ten post może być dla Ciebie przydatny, by poznać nowe metody optymalizacji obrazów oraz dowiedzieć się, jak inni twórcy stron internetowych rozwiązali Twój problem. Możesz także poznać koszty, korzyści i ograniczenia każdej z tych metod.
  • Jeśli jesteś dostawcą usług graficznych lub dostawcą CDN na potrzeby obrazów, ten post może Ci pomóc w znalezieniu nowych możliwości rynkowych.
  • Jeśli tworzysz platformę, narzędzie do tworzenia lub programista, ten post może podsunąć Ci pomysły na nowe funkcje, które warto wdrożyć.

Komentarze

WebP

  • „Lubię WebP, ale nie jest jeszcze w pełni gotowy. Co więcej, WordPress nie obsługuje WebP. Jedna z najpopularniejszych aplikacji do edycji zdjęć, Photoshop, od razu nie obsługuje WebP. Dlatego nie możemy polegać na aplikacjach ani usługach innych firm w zakresie kompresji obrazów”.
  • „Wykorzystaj WebP w Safari”.
  • „Chętnie wyeksportowałbym pliki z programu Photoshop/Figma/Sketch i chciałbym wyeksportować je ze wszystkich przeglądarek”. [Uwaga: aplikacja Sketch nie obsługuje formatu WebP]
  • „Najlepiej byłoby użyć formatowania nowej generacji”.
  • „Przestań tak mocno obciążać WebP, gdy przeglądarka nie jest obsługiwana. Zastanów się, czy do tworzenia zrzutów ekranu potrzebny był format PNG zamiast JPEG”.
  • „Dokumenty Google nie obsługują formatu WebP”.
  • „Wykorzystalibyśmy wyłącznie technologię WebP, ale obawiamy się o zgodność z przeglądarkami”.
  • „Najpierw popraw zgodność ze starszymi przeglądarkami i zaktualizuj starsze przeglądarki lub dodaj starsze poprawki. Jeśli to zrobisz, użytkownicy będą bardziej skłonni do stosowania nowych typów obrazów, takich jak WebP...”
  • „Zachęć programistów wtyczek/motywów do zaoferowania obsługi WebP i innych typów obrazów nowej generacji, dzięki czemu osoby niebędące programistami nie będą musiały się tym zajmować”.

SVG i obrazów wektorowych

  • „W miarę możliwości używam (animowanych) SVG. gatsby-image w wielu przypadkach poprawił ten błąd. Gdy jednak przyjrzymy się ich efektom, trudno jest stwierdzić, że zwykła witryna musiała stworzyć coś takiego, aby obrazy działały prawidłowo. Przeglądarka powinna wziąć na siebie większą odpowiedzialność”.
  • „Czy byłoby możliwe udokumentowanie sposobu tworzenia animacji SVG za pomocą lottie.js?”
  • „Na naszej stronie najczęściej staramy się używać zdjęć JPEG w dużej rozdzielczości i niskich rozmiarów, aby uniknąć czasu wczytywania. W razie potrzeby wykorzystujemy też pliki SVG, aby zapewnić wysoką jakość projektowania responsywnego”.
  • „W miarę możliwości staramy się używać zoptymalizowanej grafiki wektorowej dla wszystkich zdjęć oprócz zdjęć”.

inne formaty graficzne.

  • „Musimy lepiej edukować ludzi, aby przestali używać GIF-ów”.

Leniwe ładowanie

  • „Pamiętaj o użytkownikach, gdy zastanawiasz się nad takimi funkcjami jak leniwe ładowanie, ponieważ dla wielu osób takie funkcje mogą być irytujące”.
  • „Wykorzystaj atrybut leniwego ładowania, aby działał z obrazem tła”.
  • „struktury powinny od razu lepiej przetwarzać komponenty”.
  • „Wielo czasu temu dokonaliśmy konwersji z leniwego ładowania. Użytkownicy zgłaszają miliony obrazów i witryn „NIE WCZYTUJĘ”. Dlatego nasz zespół podsumował wydarzenie. Osoby bez wiedzy technicznej trudno jest opisać problem”.
  • „Chciałbym dowiedzieć się więcej o korzystaniu z interfejsu Intersection Observer API do leniwego ładowania zamiast stosowania tradycyjnych technik”.
  • „Podoba mi się to: pwafire.org/developer/codelabs/progressive-loading”.

Obrazy tła

  • „Zazwyczaj wczytuję obrazy jako tła w CSS”.
  • „Tag <img> stwarza problem i trudno jest kontrolować szczegółowe informacje, zwłaszcza w przypadku treści przesyłanych przez użytkowników. Częściej używamy <div> i stylu obrazu tła, ponieważ pozwala nam to określić rozmiar tła i położenie tła oraz uniemożliwia zapisywanie obrazu po kliknięciu prawym przyciskiem myszy”.

Przejrzystość

  • „Jest 2019 rok. Dlaczego pliki JPG nadal nie mają przezroczystości w wersji alfa?”
  • „Używam plików PNG przy zdjęciach tylko wtedy, gdy potrzebuję przezroczystego tła”.

Obrazy zastępcze niskiej jakości (LQIP)

  • „Używamy LQIPS. To wspaniała technika utrzymania zaangażowania użytkowników bez wcześniejszego wczytywania obrazów wysokiej jakości”.

Występy

  • „Niedawno mieliśmy problem z wydajnością obrazów. Gdy użytkownik przewija stronę w dół, pokazujemy 60 kolejnych kart, które zawierają miniaturę. Ze względu na limit 6 połączeń w tej samej domenie miniatury były blokowane, a także następne żądanie AJAX o pobranie 60 kart, jeśli użytkownik nadal przewinie stronę w dół”.
  • „Chcielibyśmy używać protokołu HTTP/2, ale większość naszych klientów używa IE11. Dlatego pracujemy nad fragmentacją domeny i wczytaniem żądań danych JSON AJAX z innej domeny”.

Rozmiary

  • „Przepraszamy za budowę. Lepiej mi pasuje wysokość/szerokość”.
  • „Szukam sposobu na generowanie mniejszej liczby rozmiarów, ale w tej chwili jest ich około 12”.
  • „Dynamiczne zmienianie rozmiaru obrazów jest naprawdę trudne i niemożliwe bez JS”.
  • „W przypadku web.dev warto skorzystać z takiego narzędzia jak responsivebreakpoints.com”.

zdjęcia wysokiej jakości i rozdzielczości,

  • „Jak pobrać skompresowane obrazy bez utraty jakości DPI?”
  • „Jesteśmy firmą zarządzającą dokumentami. Nasze aplikacje obsługują MILIONY zeskanowanych obrazów w wysokiej rozdzielczości, zwykle w formacie TIFF lub PDF”.
  • „To kłopotliwe. Pliki img w wysokiej rozdzielczości są niezbędne do formatu wydruku i muszą być zoptymalizowane pod kątem internetu. Zmniejszanie rozmiaru obrazów w internecie jest uciążliwe, ale w sytuacji, gdy autorzy dostarczają tylko lekkie pliki z obrazami przeznaczonymi do publikacji w wersji drukowanej. Na koniec przekazywaliśmy różne wiadomości na temat wymagań dotyczących przesyłania rękopisów z dziełami sztuki. Potem zakończyliśmy wykonywanie złożonych zadań związanych z przetwarzaniem tych materiałów”.

Możliwości przeglądarki

  • „Automatyczna responsywna przycinanie źródła z przeglądarki jako [wbudowana] funkcja byłaby bardzo przydatna, ponieważ przycinanie wszystkich obrazów do 4 rozmiarów i zapisywanie wszystkich znaczników było bardzo czasochłonne. Jeśli uda nam się przesłać jedno duże zdjęcie i napisać prosty tag graficzny, przeglądarki automatycznie utworzą zwycięską funkcję wielu atrybutów src”.
  • „Osobiście mam problem z unikaniem przeformatowania strony, gdy atrybut „image with” jest ustawiony przez CSS dla obrazów elastycznych (max-width: 100%; wysokość automatyczna lub wysokość: szerokość: 100%; wysokość automatyczna), zwłaszcza w połączeniu z kierunkiem grafiki z tagu adaptacyjnych obrazów/obrazów. Wydaje się, że najlepszym sposobem uniknięcia takich problemów jest korzystanie z „tzw. negatywu dopełnienia” umożliwiającego ustalenie stałego współczynnika proporcji, a następnie umieszczenie obrazu wewnątrz pola proporcji. Lepsza obsługa przeglądarek i obsługa elastycznych obrazów będą naprawdę bardzo przydatne”.
  • „Wyłącz autoodtwarzanie GIF-ów, pobierając tylko pierwszą klatkę”.

Sieci CDN i usługi graficzne

  • „Google powinien udostępnić bezpłatną sieć CDN, taką jak Cloudflare”.
  • „Może przydałoby się więcej narzędzi do skonfigurowania skalowania dynamicznego i sieci CDN z różnymi dostawcami”.
  • „Pojedynczy, nadmiarowy obraz o dużym rozmiarze to bardzo przyzwoite rozwiązanie, które nie wymaga dodatkowych kosztów produkcji. Potrzebujesz około 1000 pikseli szerokości w przypadku urządzeń mobilnych (szerokości renderowania 500 pikseli). Jest to też rozmiar potrzebny w przypadku dużych i komputerowych wyświetlaczy innych niż retina. Uważam, że sieci CDN do zmiany rozmiaru obrazów to bardzo złe rozwiązanie, choć w przeszłości z niego korzystałem. Zmiana rozmiaru powinna przeprowadzić do systemu CMS, a jego konfiguracja jest zbyt skomplikowana, więc na razie dobrym kompromisem jest jedno rozwiązanie”.
  • „CloudFlare automatycznie skaluje nasze obrazy, aby jak najlepiej pasowały do wyświetlacza użytkownika. Możemy więc zaoszczędzić czas wczytywania, ponieważ obrazy są wczytywane względem widoku użytkownika. Jeśli na przykład użytkownik korzysta z telefonu, nie załaduje się ono w tle o rozmiarze pulpitu.
  • „Cloudflare działa w tle, a my nie musimy niczego robić z wyjątkiem zaznaczenia pola wyboru w panelu ustawień”.
  • „Przypominam, że jedynym powodem, dla którego mogę skutecznie używać srcset itp., jest łatwość korzystania z Cloudinary. Ale usługa Cloudinary staje się droga i naprawdę szybko staje się droga. Wygląda to na ogromną dziurę w programowaniu”.
  • „Potrzebujemy sposobu na łatwe automatyczne przycinanie obrazów w przemyślany sposób, aby działały z różnymi formatami obrazu w różnych kontekstach”.
  • „Korzystam też z obrazów innych dostawców, takich jak Unsplash, gdzie masz znacznie mniejszą kontrolę nad rozdzielczością, jakością i kompresją”.

CMS, platforma i platforma;

  • „Podczas tworzenia witryny za pomocą systemu CMS nadal mam problem ze znalezieniem najlepszego sposobu użycia obrazów. Autorzy zwykle konfigurują obrazy o różnych wymiarach i oczekują, że obrazy się nie zmniejszą ani nie powiększą. Nie wiem, czy można ustawić wartości max-width lub max-height w przypadku obrazów.
  • „Użyłem gatsby-image przez kilka ostatnich projektów i nigdy nie oglądałem się wstecz”.
  • „Obrazy są często trudne podczas dodawania do systemu CMS przez użytkownika. Mogą być używane w dowolnym rozmiarze i formacie. Czasami oryginalne obrazy w idealnym formacie, a wymiary nie są dostępne”.
  • „Utrzymanie obrazów jest trudne, ponieważ nasz system samoobsługowe dodawanie elementów sterujących jest trudne, chyba że wszystko dzieje się automatycznie i nie wpływa na rozdzielczość. U nas również obrazy wyglądają inaczej na urządzeniach mobilnych i komputerach”.
  • „Pomagam użytkownikom optymalizować ich witryny (WordPress). Największe problemy, które dostrzegłem w przypadku obrazów, polegają na tym, że tworzenie WebP wymaga użycia sieci CDN lub wtyczek. Programiści motywów muszą używać kodu srcset/picture. Większość wtyczek leniwego ładowania wczytuje się powoli, co pogarsza komfort korzystania z urządzenia. Obrazy tła są trudne do leniwego ładowania”.

Koszt/korzyść

  • „Nowe metody są skuteczne, ale wydłużają czas tworzenia witryn”.
  • „Wiele firm z listy Fortune 500 zaczęło powoli stosować brak zgodności z nowymi standardami, takimi jak srcset i WebP. Z tego powodu wiele firm oparło się tej zmianie jako niepotrzebnym kosztem rozwoju istniejących stron internetowych. Wzrost skuteczności nie jest szeroko omawiany ani raportowany przez użytkowników. W razie potrzeby zapisywanie obrazów z internetu może być nieco trudniejsze”.
  • „Tworzenie wielu rozmiarów i wersji oraz zarządzanie nimi jest kosztowne”.
  • „Zajmują one dużo miejsca na naszym serwerze”.

SEO

  • „Trudno jest zachować równowagę między akceptowalną jakością zdjęć a rozmiarem pliku. Z jednej strony zależy mi na szybkim ładowaniu, aby poprawić wyniki SEO, ale z drugiej strony obrazy niskiej jakości będą negatywnie wpływać na interfejs/UX”.

Rola obrazów w internecie

  • „W internecie jest ich zbyt wiele. Przestań używać bezużytecznych obrazów, które nie wzbogacają tekstu reklamy”.
  • „Nadal pamiętasz czasy, kiedy w internecie nie było obrazów, a my udostępniliśmy selfie w postaci grafiki 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 wciąż się zmieniają. Twórcy stron internetowych są bardzo frustrujący, ponieważ zapisywanie obrazów zajmuje dużo czasu. Staramy się jak najlepiej optymalizować witrynę. Sprawdzamy witrynę, a kilka miesięcy później doszliśmy do wniosku, że obrazy mogą być jeszcze bardziej skompresowane lub w innym formacie. To uniemożliwia nam zaoferowanie klientom najlepszego możliwego rozwiązania, które będzie trwałe i kosztowne zarówno dla niego, jak i dla nas. Niektórzy z naszych małych firm po prostu nie mają budżetu, który pozwalałby nam ulepszać obrazy i zachowywać je ponownie, aby zachować zgodność z wymaganiami. Nie mamy budżetu, aby wykonać tę pracę w ramach ich pakietów zarządzania. Napisanie kodu wywołującego różne rozmiary obrazów na różnych urządzeniach również jest czasochłonne. Wspaniale byłoby wymyślić system zapisywania obrazów, który byłby spójny przez dłuższy czas”.
  • „Tak, wydaje mi się, że w Lighthouse masz problemy z liczbą żądań i małymi rozmiarami plików”. Jeśli witryna korzysta z protokołu HTTP1.x, to oczywiście, ale jeśli witryna używa HTTP2, liczba żądań jest mniej ważna lub wcale nie stanowi problemu, jeśli pochodzi z tej samej nazwy hosta. Mam witrynę w wersji uproszczonej, ale na tę samą nazwę hosta wczytuję 30 małych plików WebP z około 35 żądaniami. Narzędzie Lighthouse jest oznaczone jako problem „Keep Request Counts Low And File Sizes Small” (Utrzymywanie małej liczby żądań i małych rozmiarów plików), podczas gdy jest bardzo szybkie, a ze względu na protokół HTTP2 pod tą samą nazwą hosta liczba żądań nie stanowi problemu. Tak, pliki są już małe (większość od 1 KB do 2 KB lub mniej). Mogę załadować sprite, ale wymagane są dalsze obliczenia CSS. Dlatego zaktualizuj raport „Trzymaj liczbę żądań o małych rozmiarach i małe rozmiary plików” w Lighthouse, aby uwzględniać protokół HTTP2 w tej samej nazwie hosta.
  • „Ludzie mają problem z zapamiętaniem o kompresji zdjęć”.
  • „Zachowanie użytkowników w różnych przeglądarkach jest nieprzewidywalne, dlatego najprostsze rozwiązania często są najbezpieczniejsze”.