Rozmiary obrazów na stronie: hero, blog, produkt, logo, OG | We.Inc
Jedna tabela rozmiarów w pikselach, proporcji i budżetów wagi pliku dla każdego miejsca na obraz na stronie, plus kalkulator, który zamienia szerokość układu na rozmiary srcset.
Dopasuj każdy obraz do najszerszego miejsca, jakie wypełnia, a potem podwój tę szerokość dla ekranów o wysokiej gęstości. Hero na pełną szerokość dobrze działa w 2560 na 1440, obraz w treści bloga w szerokości 1600, kwadratowe zdjęcie produktu w 2048 na 2048 w Shopify, a obraz do udostępniania w 1200 na 630. Zdjęcia trzymaj poniżej mniej więcej 200 KB.
Szybkie rozmiary dla najczęstszych miejsc
Miejsce
Piksele do eksportu
Proporcje
Hero na pełną szerokość
Obraz w treści bloga
Zdjęcie produktu (Shopify)
Obraz do udostępniania (og:image)
Logo
SVG lub PNG w 2x rozmiaru wyświetlania
Zgodne z logo
Nie ma oficjalnego standardu dla obrazu hero czy obrazu na blogu. Istnieje za to prosta arytmetyka: ile pikseli CSS ma szerokość danego miejsca, razy gęstość ekranu, na którym obraz ma wyglądać ostro. Tabela poniżej stosuje tę zasadę do każdego typowego miejsca, a tam, gdzie platforma publikuje własną liczbę, jak Shopify dla produktów czy Facebook dla obrazów do udostępniania, używamy opublikowanej wartości.
Znajdź miejsce w tabeli albo zmierz w inspektorze przeglądarki, jak szeroko renderuje się w Twoim układzie.
Wpisz tę szerokość CSS do kalkulatora i wybierz gęstości, które chcesz obsłużyć.
Wyeksportuj podane szerokości, skompresuj każdą z nich i wklej wygenerowany srcset do znacznika img.
Przed wgraniem sprawdź wagę pliku z kolumną budżetu.
Eksportuj w 2x szerokości renderowanej; 3x dodaje wagi, której na zdjęciu mało kto zauważy.
Przytnij obraz do proporcji przed wgraniem, aby układ nigdy nie musiał go rozciągać ani dodawać pasów.
Dodaj atrybuty width i height do każdego img, aby przeglądarka mogła zarezerwować miejsce, zanim plik dotrze.
Do logo i ikon wybieraj SVG, bo plik wektorowy pozostaje ostry w każdym rozmiarze przy jednym małym pobraniu.
Zostaw obraz do udostępniania w 1200 na 630 nawet na wąskich stronach, bo aplikacje społecznościowe pobierają go niezależnie od Twojego układu.
Najczęściej zadawane pytania
Jaki rozmiar powinien mieć obraz hero?
Dla hero na całą szerokość przeglądarki wyeksportuj 2560 na 1440 dla dużych ekranów i dodaj w srcset wersje o szerokości 1280 i 1920, aby telefony i laptopy pobierały mniej. Jeśli hero jest w kontenerze o szerokości 1200 pikseli, wystarczy szerokość 2400.
Jakie rozmiary mają zdjęcia produktów w Shopify?
Centrum pomocy Shopify podaje, że kwadratowe zdjęcia produktów zwykle wyglądają najlepiej w rozmiarze 2048 na 2048 pikseli. Wgrywane pliki mogą mieć do 5000 na 5000 pikseli i muszą ważyć poniżej 20 MB. Trzymaj wszystkie zdjęcia produktów w tych samych proporcjach, aby siatki kolekcji były równe.
Jaki rozmiar ma obraz Open Graph do udostępniania?
Dokumentacja udostępniania Facebooka zaleca co najmniej 1200 na 630 pikseli, proporcje 1,91 do 1 i plik poniżej 8 MB. Mniejsze obrazy, do 600 na 315, też działają, ale wyświetlają się w mniejszym rozmiarze.
Jak duży powinien być plik, a nie tylko liczba pikseli?
Rozmiar w pikselach i waga pliku to dwie różne rzeczy. Zdjęcie o szerokości 1600 zapisane jako WebP lub dobrze skompresowany JPEG zwykle waży od 80 do 200 KB. Jeśli obraz waży znacznie więcej, obniż ustawienie jakości lub zmień format, zanim zmniejszysz jego wymiary.
Czy potrzebuję innych obrazów na telefony?
Zwykle nie innych kadrów, tylko mniejszych kopii tego samego pliku wymienionych w srcset. Elementu picture używaj tylko wtedy, gdy telefon potrzebuje innego kadru, np. wysokiej wersji szerokiego banera.
Jedna zasada za każdą liczbą
Przeglądarki układają strony w pikselach CSS. Telefon lub laptop z ekranem retina mieści w każdym z nich dwa lub trzy piksele urządzenia, więc obraz wyeksportowany dokładnie w swojej szerokości CSS wygląda na nich nieostro. Podwojenie szerokości rozwiązuje to niemal dla wszystkich.
Wyjście ponad 2x rzadko się opłaca przy zdjęciach. Plik znów mniej więcej podwaja wagę, a dodatkowe szczegóły trudno zauważyć z normalnej odległości.
Proporcje są ważniejsze niż dokładne piksele
Większość układów skaluje obrazy do szerokości kolumny, więc to proporcje decydują, jak obraz leży na stronie. Wybierz jedne proporcje na miejsce, przytnij do nich każdy obraz, a siatka pozostanie uporządkowana przy każdej szerokości.
Typowe wybory to 16:9 dla hero i obrazów w artykułach, 1:1 dla produktów i awatarów, 4:5 dla pionowych kart i 1.91:1 dla obrazów do udostępniania.
Budżety utrzymują szybkość stron
Największy obraz nad linią zgięcia często jest elementem, który decyduje o Largest Contentful Paint. Ciężkie hero spowalnia stronę bardziej niż jakikolwiek inny pojedynczy plik, więc wymaga największej uwagi.
Ustal budżet dla każdego miejsca i się go trzymaj. Gdy zdjęcie nie mieści się w budżecie przy dobrej jakości, spróbuj WebP lub AVIF, zanim zmniejszysz rozdzielczość.
Rozmiary obrazów dla każdego miejsca
Szerokości miejsc odpowiadają typowym układom desktopowym. Zmierz własny motyw i zastosuj zasadę 2x, jeśli Twoje są inne.
Rozmiary eksportu, proporcje i budżety wagi dla każdego miejsca
Miejsce
Szerokość CSS
Piksele eksportu
Proporcje
Budżet
Uwaga
Hero na pełną szerokość
100vw (do 1280+)
250 KB
Dodaj w srcset kopie o szerokości 1280 i 1920
Hero w kontenerze
200 KB
Dwukrotność szerokości kontenera
Pasek banera
150 KB
Trzymaj tekst z dala od zewnętrznych krawędzi; boki są przycinane na telefonach
Obraz wyróżniający na blogu
od 800 do 1200
od 1600 x 900 do 2400 x 1350
150 KB
Dopasuj do szerokości treści w swoim motywie
Obraz w treści bloga
od 720 do 800
16:9 lub 3:2
150 KB
Kolumny treści są węższe niż hero
Zdjęcie produktu
Karta w siatce
200 KB
Zalecany przez Shopify rozmiar kwadratu
Karta kolekcji lub kategorii
800 x 800 lub 800 x 1000
1:1 lub 4:5
80 KB
Używaj jednych proporcji w całej siatce
Zdjęcie zespołu lub awatar
40 KB
Często pokazywane w kółku; wyśrodkuj twarz
Logo w nagłówku
około 160
SVG lub PNG o szerokości 320
Własne proporcje logo
20 KB
SVG pozostaje ostre w każdym rozmiarze
Tekstura tła
150 KB
Niższa jakość pod tekstem jest w porządku
Obraz do udostępniania (og:image)
Niewidoczny na stronie
Poniżej 8 MB (celuj znacznie niżej)
Rozmiar zalecany przez Facebooka
Favicona
od 16 do 32
SVG plus ICO lub PNG 32 x 32
5 KB
Wszystkie rozmiary znajdziesz w przewodniku o faviconach
Kod responsywnego hero
Hero na pełną szerokość w trzech szerokościach
Przeglądarka wybiera najmniejszy plik, który przy gęstości ekranu nadal pokrywa viewport. width i height ustalają proporcje, więc nic nie skacze podczas ładowania.
Kalkulator rozmiaru obrazów
Wpisz szerokość, jaką obraz wypełnia w Twoim układzie, w pikselach CSS, i wybierz gęstości ekranu do obsłużenia. Kalkulator poda szerokości w pikselach do eksportu i napisze pasujący srcset.