Odpowiednie rozmiary obrazów na strony internetowe

Zmierz miejsce we własnym układzie

Ustal szerokość obszaru obrazu na stronie, zamiast przyjmować szerokość całego okna przeglądarki. Zacznij od wymiarów zalecanych przez motyw lub blok obrazu. Jeśli ich nie podano, użyj inspektora przeglądarki albo poproś opiekuna witryny o sprawdzenie wyświetlanej szerokości na telefonie i komputerze. Uwzględnij także większy widok galerii lub powiększenie, jeśli są potrzebne.

Dla obrazu wyświetlanego na szerokości 720 pikseli porównaj wersje o szerokości 720 i 1440 pikseli. Większa może wyglądać ostrzej na ekranie o dużej gęstości pikseli, ale sprawdź, czy dodatkowe szczegóły uzasadniają większy plik. Użyj odpowiednio dużego oryginału: powiększenie z 900 do 1440 pikseli nie przywróci brakujących szczegółów.

Punkty wyjścia według miejsca

Okładka 2400 pikseli nie pasuje automatycznie każdemu. Telefon może potrzebować mniejszej wersji lub innego kadru. Zoom produktu może wymagać oddzielnego pliku większego niż zwykła karta.

Odróżnij wymiary w pikselach od rozmiaru pliku

Wymiary opisują siatkę, na przykład 1200 × 800. Wielkość pliku opisuje dane przechowywane lub przesyłane w KB albo MB. Identyczne wymiary mogą dawać różną wielkość przez szczegóły, format i kompresję.

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ść.

Zacznij od układu. Zdjęcie wyświetlane na 600 pikselach CSS zwykle nie potrzebuje tego samego źródła co obraz wypełniający pulpit. Ekran o dużej gęstości pikseli może wykorzystać więcej pikseli niż szerokość CSS; opłacalność zależy od zdjęcia i wzrostu rozmiaru pliku.

Dobierz proporcje do zastosowania

W narzędziu zmiany wymiarów zablokuj proporcje i wpisz szerokość 1200 pikseli dla oryginału 3000 × 2000. Wysokość automatycznie zmieni się na 800. Nie trzeba obliczać i wpisywać obu wymiarów. Sprawdź, czy twarze i okręgi zachowały kształt.

Dla kwadratowej miniatury kadruj szerokie zdjęcie zamiast je ściskać. Użyj kadrowania, utrzymując temat widoczny na małym ekranie. Powiększanie nie odtwarza nigdy niezarejestrowanych szczegółów.

Dostarczaj potrzebne warianty

Responsywny kod pozwala przeglądarce wybrać plik. srcset oparty na szerokości i sizes opisują dostępne rozmiary oraz miejsce; nie tworzą plików. Zobacz poradnik MDN o responsywnych obrazach.

Sprawdź, czy CMS już generuje warianty i kod. Na stronach statycznych wyeksportuj pliki i odwołaj się do nich. Trzy niepowiązane w kodzie pliki nie tworzą responsywnej obsługi.

Ustal docelowy rozmiar plików obrazów

Testuj typowe obrazy i całą stronę. Dwanaście kart produktów ma inny budżet niż portfolio z jednym szczegółowym zdjęciem. Żaden pojedynczy limit kilobajtów nie gwarantuje szybkości lub jakości.

1. Sprawdź w rzeczywistym rozmiarze wyświetlania.
2. Porównaj mniejsze wymiary i wydajniejszy format.
3. Sprawdź rozmiar pobranego pliku i widoczne szczegóły.
4. Przetestuj mobilnie przed ponownym użyciem ustawienia.

Rozróżniaj zdjęcia nagłówkowe, produktowe i miniatury

Jeśli obiekt szerokiej okładki znika na telefonie, przygotuj osobny kadr zamiast deformować obraz. Powiększenie produktu może wymagać dużego oddzielnego pliku, którego nie musi pobierać każda mała karta. Kwadratową miniaturę uzyskuj przez kadrowanie, nie ściskanie poziomego zdjęcia.

Zapisz proporcje, maksymalną szerokość wyświetlania, warianty rozmiaru i ważne szczegóły dla każdego miejsca. Sprawdź je po zmianie motywu. Jeśli telefon nadal pobiera największy plik, zbadaj wybór responsywny. Nowa mała kopia nie pomoże, gdy strona jej nie używa.