Zadbaj o idealny wygląd swojej witryny dzięki plikowi images.tooling.report

Sprawdź stan narzędzi do obsługi obrazów.

Patrick Kettner
Patrick Kettner

Umieszczanie obrazu w internecie to jedno, ale trudno jest to zrobić dobrze. Wybór odpowiedniego formatu, kompresji, punktów na cal (DPI) i setek innych ustawień może być trudny, jeśli wszystko robimy sami.

Dobra wiadomość jest taka, że obecnie mamy mnóstwo narzędzi i usług, które mogą za nas wykonać wszystkie te czynności. Złą wiadomością jest to, że jest ich mnóstwo. Trudno jest wybrać odpowiednie narzędzie lub usługę. Dlatego uruchamiamy stronę images.tooling.report, na której wymieniamy elementy, które naszym zdaniem są najważniejsze podczas publikowania obrazów w produkcji, oraz porównujemy niektóre z najpopularniejszych programów i usług, zarówno płatnych, jak i bezpłatnych, hostowanych i samohostowanych.

Dlaczego?

Obrazy stanowią ogromną część przesyłanych bajtów witryny, a te bajty się sumują. Okazało się, że nieoptymalizowane obrazy stanowiły blisko 75% łącznej wielkości strony. Wszystkie te zmarnowane bajty mają swój koszt. Dlatego w badaniu obejmującym miliony sesji rzeczywistych użytkowników okazało się, że strony, które doprowadziły do konwersji, miały o 38% mniej obrazów niż strony, które do konwersji nie doprowadziły. Czy więc należy usunąć wszystkie obrazy? Oczywiście, że nie. Należy jednak zadbać o to, aby wysyłane obrazy były zoptymalizowane pod kątem wszystkich użytkowników, niezależnie od urządzeń, których używają.

Co to jest?

Wyświetlanie zoptymalizowanych obrazów to coś więcej niż kliknięcie „Zapisz na potrzeby sieci”. Dlatego images.tooling.report sprawdza wiele funkcji. Omówimy podstawy, np. stopień kompresji zapewniany przez różne narzędzia i usługi, oraz optymalizacje sieci, takie jak długotrwałe nagłówki pamięci podręcznej.

Na tym jednak nie koniec. Szukaliśmy bardziej zaawansowanych opcji, takich jak obsługa Save-Data, ECT i innych wskazówek klienta, aby znaleźć automatyczną analizę psychowizualną, która może używać modeli danych do wielokrotnego kompresowania obrazów w celu znalezienia wersji, która zajmuje najmniej bajtów bez zmiany sposobu, w jaki postrzegamy obraz. Czy przed wysłaniem danych przez sieć wykorzystujesz wszystkie niewizualne informacje zawarte w obrazach?

Zrzut ekranu strony docelowej images.tooling.report w trybie ciemnym.

Oczywiście każda witryna jest inna – żadne narzędzie ani usługa nie spełniały wszystkich naszych oczekiwań. To jest oczekiwane. Dlatego podzieliliśmy testy na różne kategorie. Dotyczy to sieci dystrybucji treści (CDN), hostowanych samodzielnie projektów, wtyczek do systemów zarządzania treścią (CMS) i kreatorów witryn. Są to dość luźne definicje, które mają na celu ułatwienie porównywania różnych opcji:

  • Wtyczki systemu CMS to pakiety, które ułatwiają tworzenie aplikacji na platformach takich jak WordPress.
  • Kreatorzy witryn porównują różne usługi, których możesz używać do tworzenia witryn.
  • Samousługowy jest przeznaczony dla programistów, którzy potrafią klonować projekt Git lub uruchamiać własny obraz Dockera w środowisku produkcyjnym.
  • CDN jest nieco bardziej skomplikowany. Niektóre z nich usługami CDN w tradycyjnym znaczeniu, ale inne to usługi, które przechowują lub hostują Twoje obrazy na obrzeżach sieci.

Nie możesz być wszystkim dla wszystkich przez cały czas, ale warto sprawdzić testy i funkcje, które są oceniane, i sprawdzić, jak radzi sobie Twój optymalizator obrazów. A co, jeśli nie robisz jeszcze nic, aby zoptymalizować obrazy? Teraz możesz zapoznać się z narzędziami do obsługi obrazów i sprawdzić, jakie korzyści możesz zaoferować użytkownikom, którzy już korzystają z Twojej witryny.

Co dalej?

Czy uważasz, że pominęliśmy jakiś obraz, narzędzie lub usługę? Powiedz nam o tym! Zarówno narzędzia, jak i usługi, a także same testy są stale aktualizowane. Jeśli chcesz szybko sprawdzić stan obrazów w związku z wysyłką, odwiedź stronę images.tooling.report.

Baner powitalny autorstwa Michael Maasen z Unsplash.