Obrazy responsywne: właściwe wymiary dla telefonu i komputera

Zacznij w edytorze witryny

W WordPressie lub kreatorze stron najpierw sprawdź działanie istniejącego bloku obrazu. Witryna może już tworzyć mniejsze wersje z jednego przesłanego pliku.

1. Prześlij wyraźny oryginał z wystarczającą ilością szczegółów dla największego potrzebnego widoku.
2. Wybierz odpowiednią rozdzielczość w bloku, jeśli takie ustawienie jest dostępne. Zwężenie bloku nie musi zmieniać pobieranego pliku.
3. Sprawdź podgląd strony na telefonie i komputerze. Zwróć uwagę na kadr, drobny tekst i ostrość.

Opiekun witryny może sprawdzić, czy strona dostarcza odpowiednie rozmiary. Jeśli samodzielnie edytujesz HTML, poniższe przykłady pokazują, jak połączyć wyeksportowane pliki ze stroną.

Czym są obrazy responsywne?

Responsywny układ dopasowuje stronę do ekranu. Responsywne dostarczanie obrazów zmienia plik, o który prosi przeglądarka. Te zadania są powiązane, ale różne: zmniejszenie wyglądu obrazu za pomocą CSS nie musi zmniejszać ilości pobieranych danych.

Jeśli zdjęcie o szerokości 3000 pikseli wyświetla się w małej karcie, użytkownik może nadal pobierać cały plik, o ile nie udostępnisz alternatyw. Obrazy responsywne dają przeglądarce wersje dopasowane do dostępnego miejsca. Pozwalają ograniczyć transfer i zachować wyraźny wygląd ważnych zdjęć.

Trzeba rozróżnić dwie decyzje. Wybór rozdzielczości zachowuje kompozycję i udostępnia różne wymiary w pikselach. Dobór kadru zmienia przycięcie lub kompozycję, gdy szeroki obraz nie sprawdza się w wąskim układzie. Poradnik MDN o obrazach responsywnych wyjaśnia tę różnicę.

Szerokość ekranu, rozmiar wyświetlania i piksele obrazu

Najpierw liczy się rzeczywiste miejsce na obraz w układzie strony, mierzone w pikselach CSS. Obszar strony na telefonie może mieć szerokość 390 pikseli, ale marginesy po 16 pikseli zostawiają pełnoszerokościowemu obrazowi 358 pikseli CSS. Na komputerze obraz w siatce trzech kolumn może zajmować tylko 320 pikseli CSS.

Piksel CSS mierzy widoczny rozmiar w układzie strony. Na ekranie o wysokiej gęstości może zajmować kilka fizycznych pikseli. Ostry obraz może więc potrzebować więcej pikseli niż wynosi jego widoczna szerokość.

Drugim czynnikiem jest gęstość pikseli. Przy planowaniu pomnóż szerokość wyświetlania przez współczynnik gęstości pikseli urządzenia. Miejsce o szerokości 358 pikseli CSS na ekranie 2× sugeruje obraz o szerokości około 716 pikseli. To punkt wyjścia do przygotowania wersji, a nie gwarancja konkretnego pliku wybranego przez każdą przeglądarkę.

Ekran komputera nie jest więc automatycznie powodem, by wysyłać największy plik. Z drugiej strony bardzo mały obraz na każdym telefonie może wyglądać nieostro na ekranach o dużej gęstości pikseli. Sprawdź faktyczne miejsce wyświetlania i wygląd.

Jak przygotować przydatne rozmiary obrazów

1. Ustal największą docelową szerokość wyświetlania. Sprawdź kolumnę treści lub kartę, zamiast mierzyć cały ekran.
2. Wybierz rozsądny zestaw szerokości. Dla ilustracji artykułu o maksymalnej szerokości 800 pikseli CSS dobrym pierwszym testem są wersje 400, 800, 1200 i 1600 pikseli. To przykład, a nie obowiązkowy zestaw dla każdej strony.
3. Twórz każdą wersję z tego samego oryginału. Użyj narzędzia do zmiany rozmiaru w Pixilo i zachowaj proporcje przy wyborze rozdzielczości. Oryginał przechowuj osobno.
4. Porównaj format i jakość. Przetestuj WebP lub JPG → AVIF / PNG → AVIF / WebP → AVIF, jeśli obsługuje je system publikacji. Upewnij się, że oszczędność nie wynika z nieczytelnego tekstu lub utraty szczegółów.
5. Prześlij pliki i połącz je ze stroną. Zmiana rozmiaru w Pixilo tworzy pliki obrazów; nie konfiguruje kodu HTML, systemu CMS ani CDN Twojej strony.
6. Sprawdź opublikowaną stronę. Zweryfikuj wybrany plik, jego wymiary i wygląd przy kilku szerokościach okna przeglądarki.

Nie powiększaj małego oryginału tylko po to, by osiągnąć określoną liczbę pikseli. Powiększanie nie odzyskuje rzeczywistych szczegółów. Jeśli źródło jest za małe do dużego wyświetlania, pokaż je w mniejszym rozmiarze lub znajdź lepszy oryginał. Poradnik zmiany rozmiaru bez rozciągania wyjaśnia zachowywanie proporcji.

Co sprawdzić w WordPressie lub innym CMS

System publikacji może już generować kilka rozmiarów i dodawać odpowiedni kod responsywny. Sprawdź gotową stronę, zanim przygotujesz równoległe rozwiązanie ręczne. Upewnij się, że wygenerowane wymiary pasują do miejsc na obrazy w motywie, a wybrany format jest obsługiwany na każdym etapie przetwarzania.

Wtyczka obrazów lub CDN może przekształcać pliki na żądanie. Wtedy sprawdź, co otrzymuje przeglądarka, zamiast polegać na nazwie oryginalnie przesłanego pliku. Po zastąpieniu źródła starsze wersje mogą też pozostać w pamięci podręcznej. Zanim ocenisz wynik, potwierdź, że udostępniany jest nowy obraz.

Szczegółowe kroki dla WordPressa znajdziesz w poradniku optymalizacji obrazów w WordPressie. Celem jest przewidywalne dostarczanie plików, w którym każdy element ma jasno określone zadanie.

Opcjonalnie: użyj srcset i sizes w HTML

Poniższy przykład opisuje ilustrację artykułu zajmującą szerokość okna pomniejszoną o łącznie 32 piksele marginesów, aż do maksymalnej szerokości 800 pikseli CSS. Nazwy plików są przykładowe: prześlij własne wersje i podaj ich rzeczywiste ścieżki oraz wymiary.

<img
  src="/images/coast-800.webp"
  srcset="/images/coast-400.webp 400w,
          /images/coast-800.webp 800w,
          /images/coast-1200.webp 1200w,
          /images/coast-1600.webp 1600w"
  sizes="(max-width: 832px) calc(100vw - 32px), 800px"
  width="1600" height="1067"
  alt="Skaliste wybrzeże nad spokojnym błękitnym morzem">

Oznaczenia w muszą odpowiadać rzeczywistej szerokości każdego pliku w pikselach. Atrybut sizes opisuje przewidywaną szerokość wyświetlania i pomaga przeglądarce wybrać wersję. Nie ustawia wizualnej szerokości obrazu; CSS nadal musi odpowiadać opisanemu układowi.

W tym przykładzie kontener o maksymalnej szerokości 800 pikseli i styl obrazu display: block; width: 100%; height: auto; zapewniają zamierzone skalowanie. Nie kopiuj wartości sizes do siatki kart o innym układzie. Opisanie małej karty na komputerze jako 100vw może spowodować niepotrzebne pobieranie dużego pliku.

Przeglądarka może uwzględniać gęstość pikseli i inne warunki, więc oczekuj odpowiedniej wersji, a nie jednej gwarantowanej nazwy pliku. Nie mieszaj oznaczeń szerokości z oznaczeniami gęstości, takimi jak 2x, na tej samej liście. Dokumentacja srcset w MDN opisuje te zasady.

Kiedy telefon potrzebuje innego kadru

Szeroki baner może stać się bardzo niski na telefonie, przez co główny obiekt wygląda na maleńki, nawet jeśli obraz jest ostry. Więcej pikseli nie naprawi kompozycji. Przygotuj ciaśniejszy kadr z dobrze widocznym obiektem i wybieraj go za pomocą picture oraz warunku dotyczącego ekranu.

Użyj przycinania obrazu, aby świadomie przygotować alternatywę. Zachowaj wystarczająco dużo kontekstu, by zdjęcie było zrozumiałe. Sprawdź położenie nakładanego tekstu: atrakcyjny sam w sobie kadr może umieścić obiekt pod przyciskiem lub nagłówkiem.

Różne kadry wymagają dodatkowej pracy, ponieważ każdą kompozycję trzeba sprawdzić osobno. Stosuj je, gdy potrzebuje ich wąski układ, zamiast przygotowywać wersję telefoniczną każdego zdjęcia. Jeśli kadry mają różne proporcje, uwzględnij to w układzie, aby przy każdej szerokości zarezerwować odpowiednie miejsce. Dokumentacja elementu picture wyjaśnia wybór źródła.

Wymiary, opóźnione ładowanie i główny obraz strony

Podaj prawidłowe atrybuty width i height, aby przeglądarka znała proporcje przed pobraniem pliku. Przy proporcjonalnym skalowaniu w CSS pomaga to zarezerwować miejsce. Jeśli CSS ustawia oba wymiary na sztywno lub stosuje inny kadr, sprawdź, czy zarezerwowany obszar odpowiada końcowemu wyglądowi.

Obrazy daleko poniżej początkowo widocznej części strony nadają się do loading="lazy". Ważny obraz widoczny zaraz po otwarciu strony powinien zwykle ładować się bez tego opóźnienia. Zwlekanie z głównym obrazem może pogorszyć odbiór strony, nawet gdy plik jest mały. Zobacz wskazówki web.dev dotyczące ładowania obrazów w przeglądarce.

Jeśli pomiary wskazują konkretny obraz jako element Largest Contentful Paint, rozważ dla niego fetchpriority="high". Nie ustawiaj wysokiego priorytetu dla wszystkich obrazów. Responsywne wymiary są częścią strategii ładowania; nie naprawią powolnej odpowiedzi serwera ani zbyt późnego wykrywania głównego obrazu.

Jak sprawdzić działanie obrazów responsywnych

1. Otwórz opublikowaną stronę przy szerokości telefonu, tabletu i komputera.
2. Sprawdź szerokość wyświetlania obrazu oraz adres wybrany przez przeglądarkę. Właściwość currentSrc elementu obrazu wskazuje wybrany zasób.
3. Sprawdź żądanie sieciowe i faktyczny rozmiar transferu. W razie potrzeby wyłącz pamięć podręczną, aby wykonać świeży test.
4. Oceń obraz w zwykłym rozmiarze wyświetlania, uwzględniając tekst, krawędzie i kadr.
5. Załaduj stronę od nowa przy każdej szerokości. Zmiana rozmiaru już otwartej strony nie odtwarza wiarygodnie wyboru obrazu podczas nowej wizyty.
6. Zmierz ładowanie strony przed zmianą i po niej w porównywalnych warunkach.

Jeśli telefon nadal pobiera ogromny plik, sprawdź obecność srcset w gotowym kodzie strony, zgodność oznaczeń z rzeczywistymi szerokościami i dopasowanie sizes do miejsca wyświetlania. Jeśli obraz jest nieostry, sprawdź rozdzielczość źródła przed podnoszeniem jakości kompresji. Jeśli jest rozciągnięty, popraw proporcje, zamiast dodawać kolejny większy plik.

Obrazy responsywne a SEO

Responsywne dostarczanie pomaga uniknąć pobierania niepotrzebnych danych. Nie gwarantuje jednak lepszych pozycji w wyszukiwarce. Dobierz obraz do treści strony, dodaj przydatny tekst alternatywny i zachowaj element img z poprawnym src przy użyciu picture. Dokumentacja SEO obrazów od Google opisuje wykrywanie obrazów i kod responsywny.

O związku między ładowaniem obrazów, przesunięciami układu i odbiorem strony przeczytasz w poradniku obrazy a Core Web Vitals. Mierz rzeczywistą stronę, zamiast traktować mniejszy eksport jako dowód poprawy każdego wskaźnika.

Najczęściej zadawane pytania

Czy width: 100% wystarczy, aby obraz był responsywny?

Może dopasować wygląd obrazu do kontenera. Nie tworzy jednak mniejszych plików do pobrania. Do tego osobnego zadania potrzebujesz odpowiednich plików źródłowych i kodu responsywnego.

Czy potrzebuję innego obrazu dla każdego telefonu?

Nie. Udostępnij rozsądny zestaw rozmiarów dopasowanych do układu. Przeglądarka wybierze spośród nich; nie trzeba rozpoznawać każdego modelu urządzenia.

Czy każdy obraz powinien mieć dwa razy większą szerokość niż przy wyświetlaniu?

Nie. Wersja 2× przydaje się dla niektórych ekranów, ale nie jest obowiązkowa dla każdego obrazu. Wyważ ostrość i rozmiar pliku, pozostawiając również mniejsze wersje.

Czy Pixilo doda srcset do mojej strony?

Pixilo pomaga przygotować pliki o różnych wymiarach. Twoja strona, szablon, CMS lub usługa obrazów musi je opublikować i skonfigurować kod responsywny.

Podsumuj za pomocąChatGPT (otwiera się w nowej karcie)Grok (otwiera się w nowej karcie)Google (otwiera się w nowej karcie)Perplexity (otwiera się w nowej karcie)Claude (otwiera się w nowej karcie)