Zdjęcie produktu, baner albo zrzut ekranu może wyglądać świetnie w projekcie, a po publikacji na stronie stać się rozmazany, zbyt ciężki lub wolno się ładować. Grafika rastrowa, nazywana też bitmapą, opiera się na pikselach, dlatego jej jakość i rozmiar trzeba dopasować do konkretnego zastosowania. Pokażę, jak działa, czym różni się od wektora, jaki format wybrać do internetu i jak przygotować obrazy z myślą o szybkości oraz SEO.
Dobrze przygotowany obraz łączy jakość, mały rozmiar i właściwy format
- Bitmapa składa się z pikseli i może stracić ostrość przy powiększaniu.
- WebP i AVIF zwykle pozwalają zmniejszyć wagę pliku bez wyraźnego pogorszenia obrazu.
- JPEG sprawdza się głównie przy zdjęciach, a PNG przy przezroczystości i ostrych krawędziach.
- SVG nie jest formatem rastrowym, lecz wektorowym, dlatego lepiej nadaje się do logo i ikon.
- Wymiary, kompresja i atrybut alt mają znaczenie zarówno dla użytkownika, jak i widoczności strony.
Jak działa obraz zbudowany z pikseli
Bitmapa jest prostokątną siatką punktów. Każdy piksel przechowuje informację o kolorze, a w niektórych formatach także o przezroczystości. Obraz o wymiarach 1200 × 800 pikseli ma łącznie 960 tysięcy punktów, które przeglądarka musi pobrać, odczytać i wyświetlić.
Najważniejszą cechą tego typu grafiki jest zależność jakości od rozdzielczości. Pomniejszenie dużego zdjęcia zwykle nie stanowi problemu, ale powiększanie małego pliku prowadzi do widocznej pikselozy, czyli poszarpanych krawędzi i utraty szczegółów. Samo zapisanie obrazu w innym rozszerzeniu nie przywróci informacji, których pierwotnie nie było.
W internecie często myli się rozdzielczość obrazu z DPI. Dla strony najważniejsze są przede wszystkim piksele i rzeczywisty rozmiar wyświetlania. Parametr DPI ma większe znaczenie przy druku, natomiast przeglądarka interesuje się tym, ile pikseli ma plik i jak duży obszar zajmie na ekranie.
Co daje kanał alfa
Kanał alfa opisuje stopień przezroczystości poszczególnych pikseli. Dzięki niemu logo może mieć niewidoczne tło, a grafika produktowa może zostać położona na dowolnym kolorze strony. JPEG nie obsługuje przezroczystości, dlatego w takim zastosowaniu trzeba użyć PNG, WebP, AVIF albo odpowiednio przygotowanego SVG.
Przezroczystość nie zawsze jest jednak korzystna. Duży plik PNG z półprzezroczystymi cieniami może ważyć znacznie więcej niż dobrze skompresowany WebP. Z mojego doświadczenia wynika, że ważniejsze od przywiązania do jednego formatu jest sprawdzenie końcowego pliku i jego wyglądu na kilku ekranach.
Bitmapa a wektor na stronie internetowej
Grafika wektorowa opisuje kształty za pomocą punktów, linii i krzywych matematycznych. Można ją powiększać bez typowej pikselozy, dlatego świetnie nadaje się do logo, ikon, prostych ilustracji i wykresów. Obraz rastrowy przechowuje natomiast gotowy wygląd każdego punktu, więc lepiej radzi sobie z fotografią i naturalnymi przejściami kolorów.
| Cecha | Obraz rastrowy | Grafika wektorowa |
|---|---|---|
| Sposób zapisu | Siatka pikseli | Obiekty i krzywe matematyczne |
| Najlepsze zastosowanie | Zdjęcia, tekstury, realistyczne ilustracje | Logo, ikony, schematy i proste ilustracje |
| Powiększanie | Może powodować utratę ostrości | Zwykle bez utraty jakości |
| Popularne formaty | JPG, PNG, WebP, AVIF, GIF | SVG, AI, EPS |
Nie oznacza to, że SVG zawsze będzie lepszy. Skomplikowane zdjęcie zapisane jako wektor może stać się niepraktyczne, a niepoprawnie przygotowany plik SVG może zawierać zbędny kod lub problemy bezpieczeństwa. W praktyce stosuję prostą zasadę: fotografia potrzebuje bitmapy, a znak graficzny zwykle wektora.
Logo zapisane jako mały PNG może wyglądać poprawnie w nagłówku, ale straci ostrość na ekranie o wysokiej gęstości pikseli lub podczas drukowania. Jeśli oryginał istnieje w SVG, użycie tego formatu zazwyczaj daje lepszy efekt i mniejszy problem z dopasowaniem do różnych rozmiarów.
Jaki format wybrać do konkretnego zastosowania
Format pliku wpływa na wagę, jakość, przezroczystość i sposób kompresji. Nie ma jednego zwycięzcy dla wszystkich obrazów, choć w nowych projektach internetowych WebP jest rozsądnym formatem domyślnym, a AVIF warto rozważyć tam, gdzie liczy się możliwie mały rozmiar.
| Format | Najlepsze zastosowanie | Ograniczenie |
|---|---|---|
| JPEG | Zdjęcia i obrazy z dużą liczbą kolorów | Kompresja stratna, brak przezroczystości |
| PNG | Zrzuty ekranu, tekst, proste grafiki i przezroczystość | Przy dużych zdjęciach często tworzy ciężkie pliki |
| WebP | Zdjęcia, ilustracje, animacje i obrazy z alfa | Wymaga sprawdzenia procesu publikacji i kopii zapasowych |
| AVIF | Zdjęcia i obrazy, w których liczy się bardzo dobra kompresja | Przy starszych środowiskach może wymagać formatu awaryjnego |
| GIF | Proste, krótkie animacje o ograniczonej palecie | Mała liczba kolorów i zwykle gorsza wydajność niż WebP lub AVIF |
| BMP i TIFF | Praca źródłowa, archiwizacja lub druk | Zwykle zbyt duże i niepraktyczne do publikacji w serwisie |
Kompresja stratna i bezstratna
Kompresja stratna usuwa część danych, których odbiorca może nie zauważyć. Zmniejsza plik skutecznie, ale przy zbyt mocnych ustawieniach pojawiają się artefakty, rozmycie i kolorowe obwódki. Kompresja bezstratna zachowuje oryginalną informację, lecz nie zawsze daje wystarczająco mały plik.
Dla fotografii używam zwykle umiarkowanej kompresji stratnej i sprawdzam obraz w rozmiarze, w którym pojawi się na stronie. Dla zrzutu ekranu z tekstem lub wykresu wybieram ustawienia bezstratne albo prawie bezstratne, ponieważ nawet drobne rozmycie liter obniża czytelność.
Jak przygotować obrazy, żeby strona działała szybciej
Największy błąd polega na przesłaniu pliku prosto z telefonu lub aparatu. Zdjęcie o szerokości 5000 pikseli może wyglądać imponująco, ale jeśli w artykule wyświetla się w miejscu szerokim na 900 pikseli, użytkownik pobiera dane, których nie potrzebuje.
Dopasuj wymiary do miejsca publikacji
Najpierw sprawdzam, jak duży będzie obraz w układzie strony. Jeśli główna kolumna ma maksymalnie 1200 pikseli, przygotowanie pliku o szerokości 3000 pikseli zwykle nie ma sensu. Wyjątkiem są ekrany o wysokiej gęstości pikseli, dla których można przygotować wariant około 1,5-2 razy większy i dostarczać go przez responsywne źródła obrazu.
Atrybuty width i height pomagają przeglądarce zarezerwować miejsce jeszcze przed pobraniem pliku. To ogranicza przesuwanie treści podczas ładowania, czyli problem znany jako CLS. Obraz powinien mieć też proporcje zgodne z projektem, bo automatyczne rozciąganie często kończy się nienaturalnym wyglądem.
Ustaw ładowanie zależnie od położenia
Obrazy znajdujące się daleko pod pierwszym ekranem mogą korzystać z lazy loadingu, czyli ładowania dopiero wtedy, gdy użytkownik zbliży się do nich podczas przewijania. Głównego zdjęcia otwierającego stronę nie opóźniałbym jednak automatycznie, ponieważ może ono wpływać na wynik LCP i pierwsze wrażenie szybkości.
Na stronie z wieloma wariantami grafiki przydaje się mechanizm srcset oraz sizes. Pozwala przeglądarce wybrać mniejszy plik na telefonie i większy na monitorze. To lepsze rozwiązanie niż wysyłanie wszystkim użytkownikom jednej, największej wersji.
Przeczytaj również: Projektowanie UX strony - jak stworzyć wygodną witrynę?
Kontroluj wagę pliku
Nie traktuję konkretnego limitu jako prawa natury, ale orientacyjnie staram się, aby zwykła ilustracja w treści ważyła około 50-200 kB, a większy obraz otwierający artykuł mieścił się często w przedziale 150-400 kB. Fotografii produktowej nie warto niszczyć agresywną kompresją tylko po to, by osiągnąć bardzo małą liczbę. Trzeba znaleźć punkt, w którym oszczędność transferu nie psuje odbioru.
W praktyce dobrze działa kolejność: przycięcie obrazu, zmiana wymiarów, eksport do odpowiedniego formatu i dopiero na końcu kompresja. Samo zmniejszenie jakości w ogromnym pliku nie rozwiązuje problemu tak skutecznie, jak usunięcie niepotrzebnych pikseli.
Jak wykorzystać bitmapy w SEO i dostępności
Obraz nie poprawi widoczności strony tylko dlatego, że został zapisany jako WebP. Format pomaga w szybkości, ale wyszukiwarka i użytkownik potrzebują również kontekstu. Znaczenie mają nazwa pliku, tekst alternatywny, otaczająca treść i dobre parametry techniczne.
Nazwa IMG_4832.webp niewiele mówi. Lepszy będzie opis w rodzaju buty-biegowe-meskie.webp, o ile rzeczywiście przedstawia ten produkt. Tekst alternatywny powinien krótko opisywać istotę obrazu, a nie upychać słowa kluczowe. Dla dekoracyjnego tła właściwy może być pusty atrybut alt, ponieważ nie wnosi ono informacji dla osoby korzystającej z czytnika ekranu.
Nie wpisuję do altu zdań typu „grafika pokazująca produkt i najlepszą ofertę w sklepie”, jeśli obraz przedstawia po prostu czarne buty. Naturalny opis, na przykład „czarne buty do biegania na mokrej nawierzchni”, jest czytelniejszy i bardziej użyteczny.
Ważne są także podpisy pod ilustracjami, dane strukturalne tam, gdzie mają zastosowanie, oraz logiczne umiejscowienie obrazu. Zdjęcie powinno wspierać temat strony, a nie być przypadkowym dodatkiem. W SEO obrazów najczęściej wygrywa konsekwencja i porządek, nie pojedynczy trik.
Błędy, które najczęściej obniżają jakość strony
Pierwszym błędem jest używanie PNG do każdej fotografii. PNG dobrze zachowuje ostre krawędzie i przezroczystość, ale przy zdjęciach potrafi stworzyć plik wielokrotnie cięższy niż JPEG, WebP lub AVIF. Drugim jest zapisanie logo w małej bitmapie, mimo że dostępny jest oryginał wektorowy.
Problematyczne bywa również wielokrotne zapisywanie tego samego JPEG-a. Każdy kolejny eksport może pogłębić utratę jakości, zwłaszcza przy tekście, cienkich liniach i mocnych kontrastach. Lepiej przechowywać plik źródłowy, a wersję webową wygenerować na końcu procesu.
- Nie wysyłaj obrazu większego niż wymaga układ strony.
- Nie używaj JPEG-a, gdy potrzebujesz przezroczystego tła.
- Nie zamieniaj logo na bitmapę, jeśli możesz użyć SVG.
- Nie stosuj agresywnej kompresji bez sprawdzenia obrazu na telefonie.
- Nie pomijaj wymiarów, tekstu alternatywnego i sensownej nazwy pliku.
Przed publikacją otwieram stronę na telefonie, laptopie i większym monitorze. Sprawdzam, czy tekst na grafikach jest czytelny, czy obraz nie rozciąga się podczas ładowania i czy jego pojawienie się nie opóźnia głównej treści. Taka krótka kontrola daje zwykle więcej niż wielogodzinne dyskusje o tym, który format jest teoretycznie najlepszy.
Praktyczny wybór dla typowej strony
W przypadku zdjęcia produktu lub fotografii do artykułu zacząłbym od WebP, ewentualnie AVIF, jeśli system publikacji poprawnie obsługuje format awaryjny. Dla zrzutu ekranu, wykresu albo grafiki z dużą ilością tekstu wybrałbym PNG lub bezstratny WebP. Logo i proste ikony przygotowałbym jako SVG.
Jeśli strona korzysta z systemu CMS, warto sprawdzić, czy automatycznie tworzy mniejsze wersje obrazów, dodaje responsywne źródła i kompresuje pliki przy wysyłaniu. Gdy robi to niedokładnie, lepiej zoptymalizować najważniejsze materiały przed publikacją niż bez kontroli instalować kolejne wtyczki.
Najbezpieczniejszy schemat wygląda tak: wybierz właściwy typ grafiki, dopasuj wymiary, skompresuj plik, dodaj opis i sprawdź efekt na stronie. Dopiero po tej kolejności warto analizować szczegółowe wyniki szybkości, ponieważ sam format nie naprawi obrazu o złych proporcjach ani pliku o niepotrzebnie dużej rozdzielczości.
Najlepszy obraz to ten dopasowany do zadania
Bitmapa pozostaje niezastąpiona przy zdjęciach, realistycznych ilustracjach i teksturach, ale wymaga rozsądnego zarządzania pikselami. Na stronie internetowej liczy się nie tylko ostrość, lecz także waga pliku, szybkość ładowania, dostępność i właściwe miejsce użycia.
Gdybym miał ograniczyć cały temat do jednej decyzji, brzmiałaby ona tak: zdjęcia eksportuj do nowoczesnego formatu rastrowego, proste znaki zostaw w wektorze, a każdy plik przygotuj w rozmiarze odpowiadającym jego rzeczywistej roli. To podejście jest proste, skalowalne i zwykle przynosi lepszy efekt niż bezrefleksyjne trzymanie się jednego rozszerzenia.
