Jak optymalizować obrazy dla szybszych stron internetowych

Obrazy to zazwyczaj największe pliki na każdej stronie internetowej. Niezoptymalizowane obrazy są powodem numer jeden, dla którego strony ładują się wolno, co bezpośrednio szkodzi doświadczeniu użytkownika, współczynnikom konwersji i pozycjom w wyszukiwarce Google. Google używa Core Web Vitals jako sygnału rankingowego, a szybkość strony jest kluczowym składnikiem. Najszybszym sposobem na przyspieszenie strony internetowej jest optymalizacja jej obrazów.

Dlaczego optymalizacja obrazów ma znaczenie dla SEO

Google jasno to stwierdził: szybkość strony wpływa na pozycje w rankingu. Ich metryka Largest Contentful Paint (LCP) mierzy konkretnie, jak szybko ładuje się największy widoczny element, którym niemal zawsze jest obraz. Jeśli Twój LCP przekracza 2,5 sekundy, tracisz pozycje rankingowe na rzecz konkurentów z szybszymi stronami. W przypadku e-commerce Amazon odkrył, że każde dodatkowe 100 ms czasu ładowania kosztowało ich 1% sprzedaży.

Cztery filary optymalizacji obrazów

1. Wybierz odpowiedni format

Wybór formatu to pojedynczy największy czynnik wpływający na rozmiar pliku obrazu:

• WebP powinien być Twoim domyślnym formatem obrazów internetowych. Jest o 25-35% mniejszy niż JPEG przy tej samej jakości i obsługuje przezroczystość. Użyj konwertera JPG na WebP fileGOD lub konwertera PNG na WebP do konwersji wsadowej.
• JPEG do fotografii, gdy WebP nie jest obsługiwany przez Twoją platformę.
• PNG tylko wtedy, gdy potrzebujesz przezroczystości i nie możesz użyć WebP.
• SVG do logo, ikon i prostych grafik. Pliki SVG są małe i skalują się nieskończenie.

2. Kompresuj przed przesłaniem

Każdy obraz powinien być skompresowany, zanim trafi na Twoją stronę internetową. Nowoczesna kompresja może zmniejszyć rozmiar plików o 60-80% bez widocznej utraty jakości.

• Użyj kompresji JPEG do fotografii przy jakości 75-85.
• Użyj kompresji PNG do grafik i zrzutów ekranu.
• W przypadku obrazów hero i dużych banerów oszczędności są najbardziej dramatyczne. Obraz hero o rozmiarze 5 MB skompresowany do 200 KB sprawia ogromną różnicę w czasie ładowania.

3. Zmień rozmiar do rzeczywistych wymiarów wyświetlania

To najbardziej przeoczana optymalizacja. Jeśli Twoja strona wyświetla obraz o szerokości 800 px, nie przesyłaj źródłowego obrazu o szerokości 4000 px i nie pozwól przeglądarce go zmniejszać. Przeglądarka nadal pobiera pełny plik. Zmień rozmiar swoich obrazów do rzeczywistych wymiarów wyświetlania przed przesłaniem.

Dla stron responsywnych przygotuj 2-3 rozmiary (mały na telefon, średni na tablet, duży na komputer) i pozwól przeglądarce wybrać odpowiedni za pomocą atrybutu srcset.

4. Usuń niepotrzebne metadane

Dane EXIF (model aparatu, współrzędne GPS, znaczniki czasu) dodają 10-50 KB na obraz. Nie służą żadnemu celowi na stronie internetowej i mogą stanowić zagrożenie dla prywatności, jeśli zawierają dane GPS. Usuń metadane ze wszystkich obrazów internetowych przed przesłaniem.

Szybka lista kontrolna optymalizacji

• Konwertuj fotografie na WebP (lub JPEG, jeśli WebP nie jest opcją)
• Zmień rozmiar do rzeczywistych wymiarów wyświetlania, nie większych
• Kompresuj przy jakości 75-85 dla zdjęć
• Usuń metadane EXIF
• Używaj opisowych nazw plików i tekstu alternatywnego (pomaga w SEO wyszukiwania obrazów)
• Zaimplementuj lazy loading dla obrazów poniżej linii widoku

Wszystkie powyższe operacje na plikach można wykonać w przeglądarce za pomocą fileGOD. Bez przesyłania na serwery stron trzecich, bez subskrypcji, a wiele obrazów można przetwarzać wsadowo naraz.