Na stronach www na każdym kroku spotykamy się z wieloma grafikami, zdjęciami, ikonami itd. Są one zapisywane w różnych formatach graficznych, które możemy podzielić na rastrowe i wektorowe.

Pliki rastrowe mogą używać kompresji stratnej, a przykładem tutaj jest najpopularniejszy format JPG, oraz używać kompresji bezstratnej gdzie przykładem jest format PNG. Z tymi formatami na stronach internetowych spotkamy się najczęściej w przypadku zdjęć.

Popularne formaty plików wektorowych to SVG, CDR czy AI. W plikach wektorowych obraz jest opisany za pomocą figur geometrycznych umiejscowionych w układzie współrzędnych. Pliki wektorowe na stronach www możemy spotkać w przypadku różnego rodzaju ikon, choć te także mogą zostać zapisane w formatach JPG lub PNG.

Największą różnicą, a także zaletą grafiki wektorowej, w porównaniu do rastrowej, jest możliwość bezstratnego jej skalowania. Ponadto takie pliki zajmują mniej powierzchni dyskowej.

Jakich plików używać na stronie www?

W przypadku stron internetowych powinniśmy używać jak „najlżejszych” plików, by nie opóźniały one ładowania strony.

W przypadku wszelkiego rodzaju logotypów, ikon, ilustracji itd. powinniśmy używać plików w formacie SVG.

Są one dużo mniejsze od plików JPG i PNG, a ponadto skalują się, czyli będą dobrze wyglądać zarówno na urządzeniach mobilnych jak i na dużych ekranach komputerów. Niestety często tego rodzaju pliki (tj. ikony itd.) na stronach www zapisane są w formacie PNG, jest to błąd, którego powinniśmy unikać.

Ponadto pliki SVG możemy jeszcze zoptymalizować, np. używając darmowego narzędzia dostępnego online: https://jakearchibald.github.io/svgomg/.

Co, jeśli na stronie www używamy zdjęć, które są grafiką rastrową, a nie wektorową i nie mogą być zapisane jako SVG? Wtedy powinniśmy używać formatu WebP.

Format WebP jest rozwijany przez Google i jest nowym otwartym standardem dla skompresowanej grafiki używanej w Internecie. Przykładowe narzędzie, z którego możemy skorzystać online do konwersji plików JPG lub PNG do WebP możemy znaleźć tutaj: https://convertio.co. Pliki WebP obsługują przezroczystość, podobnie jak PNG, ale są od nich mniejsze, więc strona z takimi zdjęciami załaduje się szybciej.

Podsumowując, na stronach www używajmy tylko plików w formatach SVG i WebP. 🙂 A więcej w temacie optymalizacji stron www można przeczytać tutaj: 100/100, czyli jak tworzyć szybkie strony www.