Optymalizacja obrazków - jak przyśpieszyć działanie aplikacji

Optymalizacja obrazków jest jedną z kluczowych czynności poprawiających wydajność naszych stron i aplikacji webowych.

W dzisiejszym wpisie dowiesz się w jaki sposób wydajnie ładować zdjęcia oraz SVG, pomówimy również o lazy loadingu, a to wszystko w kontekście metryk Web Vitals.

Formaty obrazków

Formatów obrazków na rynku jest wiele. Znamy klasyczne .jpg czy .png, możliwe, że słyszeliśmy o .webp. Świat technologii idzie do przodu i pojawiają się coraz to nowsze formaty, takie jak .avif. Czym się charakteryzują i który wybrać?

JPEG

Znany wszystkim format JPEG sprawdzi się świetnie do zdjęć i screenshotów. Kompresuje on obrazki z niewielką utratą jakości, niewidoczną dla ludzkiego oka.

PNG

Grafiki rastrowe z rozszerzeniem .png, w przeciwieństwie do JPG, nie podlegają kompresji stratnej i mogą być transparentne. Nadają się one do różnego rodzaju grafik, pixelartów i wszędzie tam, gdzie potrzebujemy jak najwyżej jakości.

WebP

WebP jest stosunkowo nowym formatem obrazków. Oferuję on znacznie lepszą kompresję, obrazki w tym formacie są średnio 20-30% mniejsze od JPG i PNG. Wspiera on również animowane i transparentne obrazki oraz większą głębię kolorów.

Wsparcie dla .webp jest bardzo dobre, jedyną bolączką może być Safari, w którym tego formatu możemy użyć dopiero od wersji 11 Big Sur.

AVIF

AVIF to format nowej generacji, ma wszystkie zalety WebP, ale obrazki w tym formacie mogą być nawet do 10 razy mniejsze! Jest wspierany przez wielkie korporacje pokroju Google, Apple czy Amazaona.

Obecnie z formatu .avif możemy korzystać w Chromie oraz najnowszej Operze i Firefoxie.

Progressive Enhancement

Korzystanie z nowoczesnych formatów obrazków mogłoby się wydawać niewykonalne, przecież nie wszystkie dostępne przeglądarki je wspierają… Nic bardziej mylnego! Dzięki tagowi <picture> możemy ładować obrazki w formatach takich jak .webp czy .avif dla przeglądarek, które je obsługują. Jeśli przeglądarka nie wspiera jakiegoś formatu, to zostanie zastosowany tzw. fallback, w tym przypadku będzie to grafika w formacie .png.

<picture>  
	<source srcset="logo.avif" type="image/avif" /> 
	<source srcset="logo.webp" type="image/webp" />  
	<img src="logo.png" alt="" width="640" height="360" />
</picture>

Responsywne obrazki

Załóżmy, że na stronie chcemy umieścić naprawdę spory obrazek. O ile na desktopie może to nie być aż tak istotne, to użytkownicy urządzeń mobilnych mogą odczuć rozmiar zdjęcia. Po raz kolejny możemy skorzystać z tagu <picture>, który umożliwia nam załączanie odpowiedniego zdjęcia na podstawie np. szerokości ekranu.

<picture>  
	<source srcset="logo-768.png" media="(min-width: 768px)" /> 
	<source srcset="logo-480.png" media="(min-width: 480px)" />  
	<img src="logo.png" alt="" width="640" height="360" />
</picture>

Takie responsywne obrazki możemy połączyć z wcześniejszym przykładem i zastosować również nowoczesne formaty:

<picture>  
	<source sizes="(max-width: 768px) 100vw, 768px" srcset="logo-768.avif 768w, logo-480.avif 480w" type="image/avif"  />  
	<source sizes="(max-width: 768px) 100vw, 768px" srcset="logo-768.webp 768w, logo-480.webp 480w" type="image/webp"  />  
	<source sizes="(max-width: 768px) 100vw, 768px" srcset="logo-768.png 768w, logo-480.png 480w" type="image/png"  />  
	<img src="logo.png" alt="" width="640" height="360" />
</picture>

Dokładnie takiej samej techniki możesz użyć do tła elementu!

background-image: url('logo.png'); /* Fallback */
background-image: image-set('logo-small.webp' 1x, 'logo-large.webp' 2x);

Predefiniowane wymiary

Zatrzymajmy się na chwilę przy technice, która pozwoli nam w znacznym stopniu usprawnić metrykę Cumulative Layout Shift. Bardzo często zapominamy o dodaniu atrybutów width i height do <img>, ustawiamy te wartości w CSS, niestety, nie jest to to samo.

<img src="image.jpg" width="640" height="360" alt="" class="image" />

Wszystko rozchodzi się tutaj o proporcję i aspect ratio. Gdy ustawimy wymiary w tagu <img>, przeglądarka zarezerwuję sobie miejsce dla naszego obrazka, dzięki czemu unikniemy nieoczekiwanej zmiany layoutu.

W przypadku naszego zdjęcia z wymiarami 640 na 360, aspect ratio wynosi 16:9. Jeśli taki obrazek znajdowałby się w jakimś kontenerze, moglibyśmy w łatwy sposób zmienić jego wymiary, zachowując przy tym odpowiednie proporcje:

.image {  
	height: auto;  
	width: 100%;
}

Lazy loading

Technika leniwego ładowania polega na tym, że pobieramy jakieś dane, dopiero wtedy, gdy ich potrzebujemy. Załóżmy, że mamy jakąś obszerną galerię zdjęć, obrazków może być nawet kilkadziesiąt. Zamiast ładować je wszystkie na raz, chcielibyśmy, żeby były ładowane dopiero wtedy, gdy użytkownik będzie scrollował stronę.

Jest to idealne rozwiązanie dla lazy loadingu. Od pewnego czasu, nowoczesne przeglądarki, takie jak Chrome, Firefox czy Opera, mają natywne wsparcie dla tej technologii. Wystarczy, że dodamy do naszego obrazka atrybut loading="lazy":

<img loading="lazy" src="image.jpg" width="640" height="360" alt="" />

Leniwe ładowanie możemy również zastosować dla wideo i iframe’ów. Dla przeglądarek, które nie wspierają lazy loadingu, istnieją specjalne polyfille, takie jak biblioteka lazysizes.

Technika ta może w znaczącym stopniu usprawnić wynik metryki First Contentful Paint.

Preloading

Preloading to technika, która jest w pewnym sensie przeciwieństwem lazy loadingu. Dzięki niej możemy jak najszybciej ładować krytyczne zasoby. Czym jest krytyczny zasób w kontekście dzisiejszego artykułu? Może być to znany wszystkim hero image czy okładka danego artykułu, tak naprawdę wszystko, co znajduję się w strefie tzw. above-the-fold, czyli na górze strony. Do prealodingu zdjęć posłuży nam link z atrybutem rel=preload.

<html>  
	<head>    
		<link rel="preload" as="image" href="image.jpg" imagesrcset="image-480.jpg 480w, image-768.jpg 768" imagesizes="50vw"/>  
	</head>  
	<body>    
		<img src="image.jpg" width="640" height="360" alt="" class="image" />  
	</body>
</html>

Technika ta świetnie się sprawdzi również dla background-image w CSS. Możesz z niej korzystać w Chromie, Safari, Operze i Firefoxie od wersji 78.

Zastosowanie prelodingu może mieć bardzo dobre rezultaty w poprawie metryki Largest Contentful Paint.

Video/Gif

W kontekście optymalizacji, gify nie sprawdzają się najlepiej. Dlaczego? Zazwyczaj są one po prostu zbyt ciężkie. Zamiast gifów zdecydowanie lepiej skorzystać po prostu z wideo.

Do zmiany gifów w wideo możemy użyć takich narzędzi jak FFmpeg, a następnie wrzucić je w tag <video>, rezultat będzie ten sam.

<video autoplay loop muted playsinline> 
	<source src="video.webm" type="video/webm" />  
	<source src="video.mp4" type="video/mp4" />
</video>

Auto odtwarzanie jakichkolwiek treści (wideo, gify, audio), bez interakcji użytkownika, nie jest wskazane ze względu na dostępność, miej to na uwadzę.

SVG

Grafiki wektorowe również możemy optymalizować. Bardzo często zdarza się tak, że exportujemy je z różnych programów graficznych. Mogą one posiadać wtedy różne niechciane przez nas rzeczy - zbyt skomplikowane ścieżki, zbędne elementy, komentarze czy spacje.

Spokojnie, nie musimy usuwać tego wszystkiego ręcznie, istnieją narzędzia takie jak SVGO, które optymalizują grafiki za nas!

Przydatne narzędzia

Wiele ze wspomnianych dziś optymalizacji możemy osiągnąć, wykorzystując przeznaczonych do tego narzędzi. Już wcześniej wspominałem Ci o kilku, ale dorzućmy do tego jeszcze:

TinyPNG - optymalizacja PNG
TinyJPG - optymalizacja JPG
Cloudinary - serwis typu CDN, który może nie tylko optymalizować obrazki, ale również dostarczać ich różne wersje (responsive images + nowoczesne formaty)
Imgix - alternatywa dla Cloudinary
Responsive Breakpoints - generator responsywnych obrazków
Image-webpack-loader - plugin do webpacka, który optymalizuje obrazki podczas builda, korzysta z bilbioteki Imagemin
Sharp - popularne narzędzie do optymalizacji obrazków, korzystają z niego nowoczesne frameworki takie jak Gatsby czy Next.js

Podsumowanie

Optymalizacja obrazków jest kluczowa, jeśli chcemy tworzyć szybkie i przyjazne SEO strony. Jeśli jesteś nowa/y w tym temacie, zacznij od serwowania zdjęć w nowoczesnych formatach, takich jak WebP czy AVIF.

Jeśli chcesz zgłębić swoją wiedzę w tym temacie, to dodatkowo zapraszam Cię do filmu na kanale Przeprogramowani, gdzie Marcin omawia metryki Core Web Vitals - kluczowe wskaźniki nowoczesnego, wydajnego front-endu:

Do zobaczenia już niebawem!

Źródła

Web.dev
MDN