Zdjęcia na stronie firmy: WebP, AVIF, waga i opisy alt

Zdjęcie prosto z telefonu ma często kilka megabajtów. Wrzucone na stronę bez zmian potrafi sprawić, że przeglądarka ładuje sam jeden obraz dłużej niż resztę strony. Klient na komórce z gorszym zasięgiem nie czeka i wychodzi.

W tej poradzie pokażę, jak przygotować zdjęcia na stronę firmy: w jakim formacie, jakiej wielkości, z jakim opisem alt i nazwą pliku. Wszystko da się zrobić za darmo, w kilka minut na zdjęcie.

Dlaczego zdjęcia najczęściej spowalniają stronę

W większości stron małych firm to właśnie obrazy są najcięższym elementem. Tekst i kod ważą po kilkadziesiąt kilobajtów, a jedno zdjęcie realizacji potrafi ważyć kilka megabajtów. Dlatego od zdjęć zaczynam, gdy ktoś prosi mnie o przyspieszenie strony.

Przykład z mojej pracy opisuję w case study o szybkiej stronie na telefonie: jednym z efektów była waga strony zmniejszona z 3 MB do 0,5 MB. Spora część tej różnicy to właśnie poprawione obrazy.

Krok 1: wybierz format, czyli JPEG, WebP czy AVIF

Trzy formaty, które spotkasz najczęściej:

Moja rada dla zwykłej strony: zapisuj zdjęcia jako WebP. Jeśli strona jest budowana przez wykonawcę, AVIF można dodać jako wersję pierwszą, a WebP jako zapasową. Obie obsługuje dziś większość aktualnych przeglądarek, ale warto to sprawdzić u siebie po wdrożeniu.

Logo i proste ikony najlepiej zapisać jako SVG (grafika wektorowa) albo PNG, gdy potrzebujesz przezroczystego tła. Do zdjęć PNG się nie nadaje, bo jest bardzo ciężki.

Krok 2: zmniejsz rozmiar w pikselach

To najczęstszy błąd: zdjęcie ma 4000 pikseli szerokości, a na stronie wyświetla się w kolumnie szerokiej na 600. Przeglądarka pobiera cały plik, a potem go zmniejsza.

Zasada jest prosta: plik nie musi być szerszy niż miejsce, w którym go pokazujesz, z zapasem na ekrany o wysokiej gęstości. Praktyczne wartości, które stosuję:

• zdjęcie na całą szerokość strony (np. u góry): ok. 1600–2000 px szerokości,
• zdjęcie w galerii albo w kolumnie tekstu: ok. 800–1200 px,
• miniatura na liście: ok. 400–600 px.

To moje wartości robocze, a nie norma Google. Dopasuj je do swojego projektu: jeśli Twoja strona pokazuje zdjęcie w kolumnie 500 px, nie wgrywaj 2000 px.

Krok 3: ustaw cel wagi pliku

Google nie ustala jednej obowiązującej liczby kilobajtów dla zdjęcia. Potrzebujesz więc własnego celu. Ja przyjmuję taki:

• zdjęcie na całą szerokość: do ok. 150–250 KB,
• zdjęcie w galerii: do ok. 100–150 KB,
• miniatura: do ok. 50–100 KB.

To cele praktyczne, a nie wymóg. Zdjęcie z dużą ilością szczegółów (np. kamień, tkanina) może ważyć nieco więcej, a proste, jednolite tło mniej. Liczy się to, by cała strona ładowała się szybko na telefonie, a o tym przekona Cię test (opisuję go niżej).

Krok 4: skonwertuj zdjęcia w Squoosh

Squoosh to darmowe narzędzie w przeglądarce, które nie wymaga konta. Działa tak:

1. Otwórz stronę Squoosh i przeciągnij zdjęcie.
2. Po prawej stronie wybierz format (WebP albo AVIF).
3. W opcjach zmiany rozmiaru wpisz docelową szerokość w pikselach.
4. Przesuń suwak jakości, na przykład w okolice 75–80, i porównaj podgląd po lewej i prawej stronie.
5. Gdy wynik wygląda dobrze, a plik ma rozsądną wagę, pobierz go.

Nazwy opcji mogą się z czasem zmieniać, ale zasada jest ta sama. Jakość dobierz oczami: zacznij od niższej i podnoś, aż zniknie widoczne pogorszenie.

Jeśli masz dużo zdjęć, poproś wykonawcę o automatyczną konwersję. Tak działa to na stronach, które robię: zdjęcia są przygotowywane na etapie budowy, a nie ręcznie, jedno po drugim.

Krok 5: zmniejsz zdjęcia już w telefonie

Nie czekaj, aż zdjęcie trafi na stronę. Przy wysyłaniu z telefonu masz dwie proste drogi:

• Zmniejsz rozmiar przy wysyłaniu. W wielu aplikacjach (poczta, komunikatory) przy dołączaniu zdjęcia pojawia się wybór wielkości. Wybierz średnią zamiast oryginału.
• Ustaw niższą rozdzielczość aparatu dla zdjęć, które nie są do druku, jeśli Twój telefon na to pozwala.

Pamiętaj też, że iPhone zapisuje domyślnie format HEIC, którego przeglądarki zwykle nie pokazują. Przy wysyłaniu do wykonawcy wybierz opcję, która zamienia je na JPEG.

Krok 6: dodaj width i height oraz leniwe ładowanie

To już dotyczy kodu, więc jeśli stroną zajmuje się wykonawca, wyślij mu ten fragment. Dwa atrybuty robią dużą różnicę.

Atrybuty width i height mówią przeglądarce, ile miejsca zarezerwować na zdjęcie, zanim się załaduje. Bez nich strona „przeskakuje”, gdy obrazy się pojawiają, i trudno trafić w przycisk.

Leniwe ładowanie (loading="lazy") każe przeglądarce pobierać zdjęcia dopiero wtedy, gdy użytkownik zbliża się do nich podczas przewijania. Oszczędza to transfer na długiej stronie.

<img
  src="taras-drewno-gizycko.webp"
  alt="Taras z desek kompozytowych przy domu jednorodzinnym w Giżycku"
  width="1200"
  height="800"
  loading="lazy"
/>

Jest jeden ważny wyjątek: główne zdjęcie widoczne od razu po wejściu na stronę nie powinno mieć leniwego ładowania. Ma się wczytać jak najszybciej, więc zostaw je bez loading="lazy". Wykonawca może dodatkowo oznaczyć je jako priorytetowe (fetchpriority="high").

Gdy chcesz podać dwa formaty, kod wygląda tak:

<picture>
  <source srcset="taras.avif" type="image/avif">
  <source srcset="taras.webp" type="image/webp">
  <img src="taras.jpg" alt="Taras z desek kompozytowych" width="1200" height="800" loading="lazy">
</picture>

Przeglądarka wybierze pierwszy format, który potrafi odczytać.

Krok 7: napisz opis alt

Opis alt służy dwóm rzeczom. Czytnik ekranu odczytuje go osobie niewidomej lub niedowidzącej. Wyszukiwarka używa go, by zrozumieć, co pokazuje zdjęcie. Dlatego pisz go przede wszystkim dla człowieka.

Zasady, których się trzymam:

• opisz to, co widać, krótko i konkretnie (zwykle jedno zdanie),
• dodaj kontekst, który ma znaczenie: co to za realizacja, gdzie, z czego,
• nie zaczynaj od „zdjęcie” ani „obraz”, bo czytnik sam powie, że to grafika,
• nie upychaj fraz typu „taras Giżycko tanio najlepszy taras”,
• zdjęcia ozdobne zostaw z pustym alt="".

Dwa przykłady:

W audytach dostępności brak opisów alt to jeden z najczęstszych błędów, więc warto je poprawić przy okazji porządków. Szerzej o dostępności piszę w poradzie o dostępności stron od 28 czerwca 2025.

Krok 8: nazwij pliki po ludzku

Nazwa pliku to drobiazg, ale też pomaga wyszukiwarce i porządkuje materiały. Zamiast IMG_4521.jpg czy zdjecie-final-nowe2.webp użyj opisowej nazwy:

• małe litery, bez polskich znaków,
• słowa rozdzielone myślnikami,
• krótko, 3–5 słów, np. taras-kompozyt-balustrada-mazury.webp.

Nazwa nie zastępuje opisu alt, tylko go uzupełnia. Zmień ją przed wgraniem na stronę, bo później łatwo o bałagan.

Czego nie robić

• Nie wgrywaj oryginałów z telefonu i nie licz na to, że strona sama je zmniejszy. Część systemów to robi, ale nie wszystkie.
• Nie kompresuj za mocno. Rozmyte zdjęcie realizacji zniechęca bardziej niż 50 KB więcej.
• Nie umieszczaj tekstu w zdjęciu (cennik, numer telefonu jako obrazek). Czytnik go nie przeczyta, a Google trudniej zrozumie.
• Nie używaj jednego zdjęcia w trzech rozmiarach, zmniejszając je tylko stylami. Przygotuj osobne pliki.
• Nie zostawiaj pustych opisów alt na zdjęciach, które niosą treść.

Jak sprawdzić efekt

Po zmianach uruchom darmowy test strony. W około 30 sekund sprawdza on stronę w kilku obszarach: szybkość (pomiar Google PageSpeed na telefonie), SEO, bezpieczeństwo i dostępność. Zobaczysz, czy obrazy nadal są wskazywane jako problem, a przy brakach alt dostaniesz wskazówkę, co poprawić.

Porównaj wynik przed i po. Jeśli ocena szybkości wyraźnie wzrosła, a strona nie przeskakuje przy ładowaniu, zdjęcia są przygotowane dobrze.

Podsumowanie

Przygotowanie zdjęć to cztery rzeczy: format WebP (lub AVIF), rozmiar dopasowany do miejsca, rozsądna waga pliku i sensowny opis alt z czytelną nazwą. Reszta, czyli width, height i leniwe ładowanie, to kwestia kilku linijek kodu.

Jeśli Twoja strona ładuje się wolno przez ciężkie obrazy, napisz do mnie. W ramach modernizacji strony przerobię grafiki, kod i opisy alt, a opieka techniczna pomoże pilnować tego po starcie. Odpowiadam w 24 godziny.