Kalkulator proporcji obrazu

Czym są proporcje obrazu?

Proporcje obrazu to stosunek szerokości do wysokości obrazu lub wideo, zapisany jako dwie liczby oddzielone dwukropkiem. 16:9 oznacza, że na każde 16 pikseli szerokości przypadają 9 pikseli wysokości. Proporcje są bezwymiarowe — 1920×1080 i 1280×720 to obydwa formaty 16:9, bo mają tę samą proporcję.

Popularne proporcje i ich zastosowania

• 16:9 (1,78:1) — Uniwersalny standard wideo szerokoekranowego: YouTube, Netflix, Vimeo, Twitch, emisje telewizyjne, monitory komputerowe i ekrany laptopów.
• 4:3 (1,33:1) — Stary standard telewizyjny i monitorowy. Nadal używany w prezentacjach, niektórych aplikacjach iPad i wideo w standardowej rozdzielczości.
• 1:1 — Format kwadratowy. Feed Instagrama, zdjęcia profilowe, okładki albumów. Silny efekt wizualny, taka sama szerokość jak wysokość.
• 9:16 (0,56:1) — Pionowe wideo dla TikTok, Instagram Reels i Stories, YouTube Shorts. Format pełnoekranowy na urządzeniach mobilnych.
• 4:5 (0,8:1) — Pionowe posty w feedzie Instagrama. Wyższy niż kwadratowy, pokazuje więcej treści bez przechodzenia w pełen pion.
• 21:9 (2,33:1) — Kinowe ultraszerokie. Używane w kinematografii (format scope 2,39:1) i ultraszerokich monitorach.
• 3:2 (1,5:1) — Tradycyjna fotografia na kliszy 35 mm i wiele aparatów cyfrowych. Standardowe proporcje odbitek fotograficznych.

Jak zachować proporcje przy zmianie rozmiaru?

Aby skalować obraz z zachowaniem proporcji, pomnóż obydwa wymiary przez ten sam współczynnik skali. Proporcjonalna wysokość dla nowej szerokości: nowa wysokość = (nowa szerokość / oryginalna szerokość) × oryginalna wysokość.

Przykład: skaluj 1920×1080 do szerokości 1280 pikseli: 1080 × (1280 / 1920) = 1080 × 0,667 = 720 pikseli. Wynik, 1280×720, zachowuje proporcje 16:9.

Właściwość CSS aspect-ratio

Właściwość CSS aspect-ratio (obsługiwana we wszystkich nowoczesnych przeglądarkach od 2021 roku) pozwala zadeklarować zamierzone proporcje elementu bez znajomości obu wymiarów. Ustawienie aspect-ratio: 16 / 9 na kontenerze z podaną tylko szerokością powoduje, że przeglądarka automatycznie oblicza poprawną wysokość. Zastępuje to starsze techniki oparte na procentowych wypełnieniach.

Najczęściej zadawane pytania

• Czym są proporcje obrazu?
  Proporcje obrazu opisują stosunek szerokości do wysokości obrazu lub wideo, wyrażony jako dwie liczby (np. 16:9). Proporcje 16:9 oznaczają, że szerokość wynosi 16 jednostek na każde 9 jednostek wysokości.
• Jakie są standardowe proporcje wideo na YouTube?
  Standardowe proporcje YouTube to 16:9. Zalecana rozdzielczość: 1920×1080 (Full HD). Miniatury powinny mieć co najmniej 1280×720, zalecane 1920×1080.
• Jakich proporcji używa Instagram?
  Instagram obsługuje 1:1 (kwadrat, 1080×1080), 4:5 (pionowy feed, 1080×1350) i 9:16 (Stories/Reels, 1080×1920).
• Jak zachować proporcje przy zmianie rozmiaru?
  Nowa wysokość = (nowa szerokość / oryginalna szerokość) × oryginalna wysokość. Dla CSS: użyj aspect-ratio: 16 / 9 i podaj tylko jeden wymiar — przeglądarka obliczy drugi automatycznie.
• Ile pikseli ma 16:9?
  Popularne rozdzielczości 16:9: 1280×720 (HD), 1920×1080 (Full HD), 2560×1440 (QHD), 3840×2160 (4K UHD), 7680×4320 (8K UHD). Każde wymiary, w których szerokość ÷ wysokość = 1,778, są w formacie 16:9.
• Do czego służy CSS aspect-ratio?
  Właściwość CSS aspect-ratio deklaruje preferowane proporcje elementu. Ustawienie aspect-ratio: 16 / 9 i tylko szerokości powoduje, że przeglądarka automatycznie oblicza wysokość. Obsługiwane we wszystkich nowoczesnych przeglądarkach od 2021 roku.