Optymalizacja obrazów dla SEO - Kompletny poradnik 2025

Obrazy stanowią średnio 50% wagi strony, a ich prawidłowa optymalizacja może przyspieszyć ładowanie nawet o 70%. W tym poradniku pokażę sprawdzone techniki kompresji, formatów i atrybutów, które stosujemy w ASEO24 dla naszych klientów.

Dlaczego optymalizacja obrazów jest kluczowa dla SEO?

Google od lat promuje szybkie strony w wynikach wyszukiwania. Według dokumentacji Core Web Vitals, obrazy mają bezpośredni wpływ na:

• LCP (Largest Contentful Paint) - główny obraz często determinuje ten wskaźnik
• CLS (Cumulative Layout Shift) - obrazy bez wymiarów powodują przeskoki layoutu
• Bounce rate - wolne strony tracą użytkowników (53% przy czasie >3s)

Formaty obrazów - który wybrać?

Współczesne formaty oferują znacznie lepszą kompresję niż tradycyjne JPG czy PNG:

WebP - standard 2025

Format opracowany przez Google (dokumentacja WebP) oferuje:

• 25-35% mniejszy rozmiar niż JPG przy tej samej jakości
• Wsparcie dla przezroczystości (jak PNG)
• Obsługę przez 97% przeglądarek

AVIF - przyszłość kompresji

Najnowszy format (specyfikacja AVIF) z kompresją o 50% lepszą niż JPG. Wsparcie rośnie - obecnie 85% przeglądarek.

Praktyczna zasada wyboru formatu

Optymalizacja rozmiaru i jakości

Maksymalne wymiary dla różnych zastosowań

Na podstawie naszych analiz i wytycznych Google:

• Thumbnails: 300x300px, jakość 70%
• Obrazy produktów: 800x800px, jakość 80%
• Hero images: 1920x1080px, jakość 75%
• Obrazy w treści: 1200px szerokości, jakość 80%

Kompresja - narzędzia

Sprawdzone narzędzia do kompresji:

• Squoosh - darmowe narzędzie Google, świetne do pojedynczych plików
• TinyPNG - kompresja PNG i JPG online
• Sharp (Node.js) - automatyzacja dla programistów
• Shopify CDN - automatyczna konwersja do WebP

Atrybuty HTML - alt, width, height, loading

Alt text - najczęstsze błędy

Według wytycznych Google Images, dobry alt text powinien:

• Opisywać zawartość obrazu naturalnym językiem
• Zawierać słowo kluczowe (jeśli pasuje naturalnie)
• Być konkretny - "Czerwona sukienka midi z bawełny" zamiast "sukienka"
• NIE zawierać "obrazek", "zdjęcie", "grafika" na początku

Width i height - obowiązkowe

Zawsze dodawaj wymiary, by zapobiec CLS:

<img src="produkt.webp"
     alt="Opis produktu"
     width="800"
     height="600"
     loading="lazy">

Lazy loading

Dla obrazów poniżej pierwszego ekranu używaj loading="lazy". Dla głównego obrazu (LCP) - loading="eager" lub brak atrybutu.

Responsive images - srcset i sizes

Dla różnych urządzeń serwuj odpowiednie rozmiary (dokumentacja MDN):

<img srcset="produkt-400.webp 400w,
             produkt-800.webp 800w,
             produkt-1200.webp 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1200px) 800px,
            1200px"
     src="produkt-800.webp"
     alt="Opis produktu">

Optymalizacja w Shopify

Shopify automatycznie (dokumentacja Shopify):

• Konwertuje obrazy do WebP dla wspieranych przeglądarek
• Generuje różne rozmiary przez parametr URL
• Serwuje przez globalny CDN

Użycie w Liquid

{{ product.featured_image | image_url: width: 800 | image_tag:
   loading: 'lazy',
   alt: product.title }}

Checklist optymalizacji obrazów

Ile kosztuje optymalizacja obrazów?

Samodzielna optymalizacja jest darmowa (Squoosh, TinyPNG). Profesjonalna optymalizacja całego sklepu to zazwyczaj 500-2000 zł w zależności od liczby produktów.

Efekty? W jednym projekcie zmniejszyliśmy wagę strony z 4.2MB do 890KB, co poprawiło LCP z 4.8s do 1.9s i zwiększyło konwersję o 12%.

Arkadiusz Kotliński

Specjalista SEO & Performance

Pomagam właścicielom e-commerce osiągać lepsze wyniki w Google poprzez optymalizację techniczną i strategię treści. Specjalizuję się w Shopify i WooCommerce.