New Dimensions
--
File Size
--
Scale
--
Zmieniaj rozmiar obrazów do dokładnych wymiarów z blokadą proporcji i popularnymi presetami. Całe przetwarzanie odbywa się w Twojej przeglądarce – nic nie jest przesyłane na żaden serwer.
Odpowiednio dobrane rozmiary obrazów są kluczowe dla szybkości strony i wskaźników Core Web Vitals. OneStepToRank monitoruje Twoje pozycje, śledzi konkurencję i automatycznie optymalizuje Twoją lokalną strategię SEO.
RozpocznijKażda platforma ma określone wymagania dotyczące wymiarów obrazów. Użycie niewłaściwego rozmiaru powoduje, że starannie zaprojektowane grafiki są przycinane, rozciągane lub zmniejszane w sposób, który osłabia Twoją markę. Facebook zaleca 1200x630 dla podglądów linków i 1080x1080 dla postów w kanale. Instagram używa 1080x1080 dla postów kwadratowych, 1080x1350 dla portretowych i 1080x608 dla krajobrazowych. Obrazy na Twitterze/X wyglądają najlepiej przy 1200x675 pikseli. Uzyskanie prawidłowych wymiarów nie jest opcjonalne – to różnica między profesjonalną a amatorską obecnością.
Dla stron internetowych kluczową zasadą jest dostarczanie obrazów dokładnie w rozmiarze, w jakim będą wyświetlane. Obraz wyświetlany w CSS o szerokości 600 px nie powinien pochodzić z oryginału o szerokości 3000 px – przeglądarka i tak pobiera cały plik przed jego skalowaniem, marnując przepustowość i spowalniając ładowanie strony. Wyjątkiem są wyświetlacze Retina, gdzie należy podawać obrazy w 2‑krotności rozmiaru CSS (czyli 1200 px dla miejsca wyświetlania 600 px), aby zachować ostrość na ekranach o wysokiej gęstości pikseli.
Nowoczesny rozwój stron wymaga dostarczania różnych rozmiarów obrazów do różnych urządzeń. Użytkownik komputera stacjonarnego z monitorem o szerokości 1920 px potrzebuje innego obrazu niż użytkownik mobilny z ekranem 375 px. Atrybut srcset oraz atrybut sizes w HTML pozwalają zdefiniować wiele wersji obrazu, z których przeglądarka wybiera odpowiednią w zależności od szerokości okna i współczynnika pikseli urządzenia. Oznacza to tworzenie kilku wersji każdego obrazu – zazwyczaj o szerokościach 400 px, 800 px, 1200 px i 1600 px.
Wyświetlacze Retina (gęstość 2x i 3x) zawierają dwa lub trzy razy więcej fizycznych pikseli na tej samej powierzchni ekranu. Bez obrazów przystosowanych do Retina zdjęcia wyglądają miękko i rozmyte na iPhone’ach, iPadach, MacBookach i większości nowoczesnych urządzeń z Androidem. Rozwiązanie jest proste: zmień rozmiar obrazów do 2‑krotności rozmiaru wyświetlania i pozwól CSS je ograniczyć. Miejsce na obraz 600 x 400 wymaga źródłowego obrazu 1200 x 800. Skorzystaj z tego narzędzia, aby stworzyć każdą wariację rozmiaru, a następnie skompresuj je przy pomocy naszego Kompresora Obrazów, aby utrzymać rozmiary plików w ryzach.
Najszybszy obraz to najmniejszy obraz, który nadal wygląda dobrze. Dla sekcji hero dąż do obrazów skompresowanych poniżej 200 KB. Dla obrazów w treści inline utrzymuj je poniżej 100 KB. Miniaturki powinny mieć mniej niż 30 KB. Te cele zakładają użycie nowoczesnych formatów, takich jak WebP – jeśli jesteś ograniczony do JPEG, rozmiary będą o 25‑35 % większe przy równoważnej jakości. Zawsze zmieniaj rozmiar obrazów do ich wyświetlanego rozmiaru przed kompresją. Fotografia 4000 x 3000 skompresowana do 150 KB będzie wyglądać gorzej niż prawidłowo zmieniona wersja 1200 x 900 skompresowana do tego samego rozmiaru, ponieważ kompresja musi ciężej pracować, aby zmieścić więcej pikseli w tym samym budżecie rozmiaru pliku.
Zmniejszanie zachowuje jakość, ponieważ konsolidujesz piksele. Powiększanie (skalowanie w górę) obniża jakość, ponieważ przeglądarka musi interpolować nowe piksele, które nie istniały w oryginale, co powoduje rozmycie. Aby uzyskać najlepsze wyniki, zawsze zaczynaj od obrazu o najwyższej rozdzielczości i zmniejszaj go. Nigdy nie powiększaj małego obrazu i nie oczekuj ostrych rezultatów.
Proporcja obrazu to stosunek między szerokością a wysokością. Popularne proporcje to 16:9 (szerokokątny), 4:3 (standardowy) i 1:1 (kwadratowy). Zablokowanie proporcji zapewnia, że zmiana jednego wymiaru automatycznie dostosowuje drugi, zachowując proporcje i zapobiegając rozciąganiu lub ściśnięciu. Odblokuj ją tylko wtedy, gdy celowo chcesz skalowanie nieproporcjonalne.
Posty na Facebooku: 1200x630. Feed na Instagramie: 1080x1080 (kwadrat) lub 1080x1350 (portret). Twitter/X: 1200x675. LinkedIn: 1200x627. Pinterest: 1000x1500. Zdjęcia profilowe na platformach zazwyczaj mają 400x400 lub większe. Użycie prawidłowych wymiarów zapewnia wyświetlanie obrazów bez nieoczekiwanego przycinania czy utraty jakości.
Wyświetlacze Retina i HiDPI mają 2‑3‑krotną gęstość pikseli w porównaniu ze standardowymi ekranami. Obraz wyświetlany w 300x200 pikseli CSS na wyświetlaczu Retina 2x faktycznie wykorzystuje 600x400 fizycznych pikseli. Jeśli Twój obraz ma tylko 300x200, na tych ekranach będzie rozmyty. Rozwiązanie polega na dostarczaniu obrazów w 2‑krotności zamierzonego rozmiaru wyświetlania i używaniu atrybutów CSS width/height do ich ograniczenia.