Rozmiary obrazów na strony internetowe, do e-maila i mediów społecznościowych
Tabela referencyjna wymiarów w pikselach i proporcji dla stron internetowych, podglądów linków, e-maila i każdej większej platformy społecznościowej.
Przesłanie obrazu w złym rozmiarze oznacza albo rozmyty wynik, albo przycięty obiekt, albo stronę, która ładuje się wolno. Ta ściąga zbiera wymiary, które działają w 2026 roku, wraz z wyjaśnieniem, dlaczego tak jest, abyś mógł podejmować rozsądne decyzje, gdy platforma zmieni zasady.
Dwie zasady
Dopasuj do rozmiaru wyświetlania, uwzględniając ekrany o wysokiej gęstości. Większość telefonów i laptopów ma dziś ekrany z dwoma lub trzema fizycznymi pikselami na piksel CSS. Obraz wyświetlany na szerokości 600 pikseli CSS powinien mieć 1200 pikseli szerokości, aby wyglądał ostro. Wykraczanie poza 2× zwiększa rozmiar pliku bez widocznej korzyści.
Najpierw ustal proporcje, potem liczbę pikseli. Platformy automatycznie przycinają do preferowanych proporcji, a automatyczne przycięcia ucinają głowy i logo. Przytnij do proporcji samodzielnie narzędziem do przycinania, a potem zmień rozmiar narzędziem do zmiany rozmiaru.
Obrazy na stronie internetowej
| Zastosowanie | Szerokość | Proporcje | Docelowy rozmiar pliku |
|---|---|---|---|
| Baner na pełną szerokość | 1920 px (2560 na bardzo duże ekrany) | 16:9 lub 21:9 | Poniżej 300 KB jako WebP |
| Obraz w treści / blogu | 1200 do 1600 px | 3:2 lub 16:9 | Poniżej 150 KB |
| Miniatura w karcie lub siatce | 600 do 800 px | Spójne w całej siatce | Poniżej 60 KB |
| Zdjęcie produktu | 1200 do 2000 px | 1:1 lub 4:5 | Poniżej 200 KB; większe do powiększania |
| Logo (rastrowe) | 2× rozmiaru wyświetlania | Jak zaprojektowano | PNG lub SVG |
| Open Graph / podgląd linku | 1200 × 630 px | 1,91:1 | Poniżej 300 KB, JPG lub PNG |
| Favicon | 16, 32, 48, 64 px w jednym .ico | 1:1 | Malutki |
| Ikona Apple touch | 180 × 180 px | 1:1 | PNG |
Programy pocztowe renderują treść w stałej szerokości, zwykle 600 do 640 pikseli dla treści wiadomości. Dostarczaj obrazy o szerokości 1200 px (2× dla ekranów retina) i utrzymuj całą wiadomość poniżej około 1 MB; cięższe e-maile są przycinane przez Gmaila i wolno otwierają się na telefonie. Używaj JPG lub PNG; obsługa WebP w programach pocztowych wciąż jest niespójna. GIF jest w porządku do prostej animacji.
Media społecznościowe
| Platforma | Miejsce | Rozmiar | Proporcje |
|---|---|---|---|
| Feed, pionowo (najlepszy zasięg) | 1080 × 1350 | 4:5 | |
| Feed, kwadrat | 1080 × 1080 | 1:1 | |
| Stories / okładka Reels | 1080 × 1920 | 9:16 | |
| Zdjęcie profilowe | 320 × 320 (wyświetlane w kółku) | 1:1 | |
| Obraz w feedzie | 1200 × 630 lub 1080 × 1350 | 1,91:1 lub 4:5 | |
| Okładka strony | 1640 × 856 | Wyświetla 820 × 312 na komputerze | |
| Obraz w poście | 1200 × 627 | 1,91:1 | |
| Baner firmowy | 1128 × 191 | ~5,9:1 | |
| X (Twitter) | Obraz w poście | 1600 × 900 | 16:9 |
| X (Twitter) | Nagłówek | 1500 × 500 | 3:1 |
| YouTube | Miniatura | 1280 × 720 | 16:9, poniżej 2 MB |
| YouTube | Baner kanału | 2560 × 1440 (bezpieczny obszar 1546 × 423) | 16:9 |
| TikTok | Okładka wideo | 1080 × 1920 | 9:16 |
| Pin | 1000 × 1500 | 2:3 | |
| WhatsApp / Telegram | Zdjęcie profilowe | 640 × 640 | 1:1 |
Każda platforma społecznościowa rekompresuje przesyłane pliki, zwykle do JPG o jakości około 75 do 80. Przesyłaj w wysokiej jakości (JPG 90 lub PNG) w dokładnie powyższych wymiarach i pozwól platformie wykonać końcową kompresję raz, zamiast nakładać swoją kompresję na ich.
Druk, dla kompletności
Druk mierzy się w pikselach na cal, nie w łącznej liczbie pikseli. Standardem jest 300 ppi: zdjęcie 15 × 10 cm (6 × 4 cale) potrzebuje 1800 × 1200 px, strona A4 potrzebuje 2480 × 3508 px, a plakat A3 3508 × 4961 px. Wszystko poniżej 150 ppi będzie w druku wyraźnie miękkie. Dostarczaj JPG przy jakości 95 lub format bezstratny.
Szybki przepływ pracy
- Przytnij do proporcji, których wymaga miejsce docelowe.
- Zmień rozmiar do szerokości z tabeli, nigdy większej niż 2× rozmiaru wyświetlania.
- Eksportuj jako WebP na strony internetowe, JPG do e-maila i mediów społecznościowych, PNG do grafik z przezroczystością.
- Sprawdź rozmiar pliku; jeśli przekracza cel, obniż jakość o kilka punktów zamiast zmniejszać wymiary.
Wszystkie cztery kroki można wykonać na tej stronie bez przesyłania obrazu gdziekolwiek.