Konwertujemy obrazki na format webp, czyli przyspieszania strony ciąg dalszy
W poprzednim wpisie dodałam poradnik o ładowaniu obrazków metodą lazy load, dzięki której strony zostaną przyspieszone i uzyskają lepszy wynik w google page speed test. Dziś kolejna część o konwertowaniu grafik do formatu webp oraz umieszczaniu ich na stronę html. Na blogu był już o tym poradnik, ale ten sposób jest aktualniejszy, prostszy i szybszy do wykonania.
Konwertowanie obrazków do webp
Przechodzimy na stronę: https://cloudconvert.com/jpg-to-webp i klikamy na przycisk „select file”, wybieramy „convert to webp”. Chwilę czekamy, klikamy „download” i pobieramy przekonwertowany na webp obrazek. Może to być .jpg, .png, .gif i inne. Przy okazji zmniejszył się rozmiar pliku, a właśnie o to nam chodziło (u mnie z 65 kb do 28 kb). Obrazek ten umieszczamy do folderu z plikami strony, razem z oryginalnym obrazkiem, czyli 2 obrazki. Pliki strony to index.html oraz style.css.
Umieszczamy kod html
W <body> wstawiamy następujący kod:
<picture>
<source type="image/webp" srcset="obrazek.webp">
<source type="image/png" srcset="obrazek.png">
<img src="obrazek.png" alt="obrazek">
</picture>
W kodzie są 3 linijki z 2 obrazkami. Jeden to przekonwertowany webp, drugi .png. Jeśli przeglądarka nie zobaczy .webp, to w razie czego pojawi się obrazek w formacie .png. W taki sposób możemy zrobić wszystkie obrazki na stronie, dzięki czemu przyspieszymy stronę.
Styli css nie będę pisać, bo do tego kodu nie jest to potrzebne. Każdy sam sobie ustawi wygląd obrazków na stronie.
I to cała filozofia, jeden kod i gotowe! 🙂
Cały kod strony html:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tytuł</title>
</head>
<body>
<picture>
<source type="image/webp" srcset="obrazek.webp">
<source type="image/png" srcset="obrazek.png">
<img src="obrazek.png" alt="obrazek">
</picture>
</body>
</html>
