Przycinanie zdjęć online: hero, obraz do udostępniania i kwadrat | We.Inc
Przytnij zdjęcia do rozmiarów używanych na stronach, w przeglądarce: obrazy do udostępniania 1200×630, hero 16:9, kwadraty i portrety. Eksport do WebP, JPG lub PNG z widocznym rozmiarem pliku. Bez wysyłania.
Kadrowanie zdjęć dla stron internetowych
Wybierz kształt, na przykład obraz do udostępniania 1200×630, hero 16:9 albo kwadratowe zdjęcie produktu, upuść swoje zdjęcie, przeciągnij ramkę na wybrany fragment i pobierz wynik. Kadrowanie odbywa się w Twojej przeglądarce, więc zdjęcie nigdy nie opuszcza Twojego urządzenia, a zapisać je możesz jako WebP, JPG lub PNG.
Najczęściej używane kadry na stronach
Gdzie się pojawia
Kształt
Rozmiar
Podglądy linków (Open Graph)
1200 × 630px
Hero na pełną szerokość
1920 × 1080px
Zdjęcie produktu lub zespołu
1080 × 1080px
Karta bloga lub ogłoszenia
1200 × 800px
Narzędzie do kadrowania zbudowane wokół rozmiarów, których używają strony. Wybierz preset, przeciągaj i zmieniaj rozmiar ramki, ustaw format i jakość, zobacz dokładny rozmiar wyniku i wagę pliku oraz przytnij całą serię do tego samego kształtu za jednym razem.
Wybierz kształt kadru. Każdy preset ustawia proporcje i rozmiar wyniku; Dowolny pozwala przeciągnąć dowolny prostokąt.
Upuść jedno lub więcej zdjęć na pole albo kliknij, aby je wybrać. Jednocześnie można mieć otwartych do 20 i żadne nie jest wysyłane.
Przeciągnij ramkę kadru, aby skadrować zdjęcie, i przeciągnij niebieską kropkę, aby ją powiększyć lub zmniejszyć. Gdy ramka ma fokus, klawisze strzałek ją przesuwają, a z Shift przesuwa się szybciej.
Wybierz WebP, JPG lub PNG (oraz AVIF, jeśli Twoja przeglądarka potrafi go utworzyć), ustaw jakość i opcjonalnie maksymalną szerokość.
Kliknij Przytnij i pobierz. Przy kilku otwartych zdjęciach Przytnij wszystkie stosuje ten sam kształt wokół tego samego punktu na każdym zdjęciu.
Trzymaj twarze i tekst z dala od krawędzi obrazów do udostępniania. Niektóre aplikacje przycinają podglądy linków do kwadratu lub zaokrąglają rogi.
WebP w jakości około 80% jest zwykle znacznie mniejszy niż JPG przy tej samej jakości wizualnej i działa w każdej obecnej przeglądarce.
PNG używaj tylko do zrzutów ekranu, logo i grafik z jednolitymi kolorami lub przezroczystością. Zdjęcia zapisane jako PNG są często kilka razy większe.
W obrazach hero kadruj szerzej, niż potrzebujesz na telefonie, i ustaw object-position w CSS, aby obiekt pozostał widoczny na wąskich ekranach.
Jeśli narzędzie ostrzega, że obraz zostanie powiększony, kadr ma mniej pikseli niż rozmiar docelowy. Zacznij od większego oryginału, zamiast godzić się na nieostry wynik.
Najczęściej zadawane pytania
Czy moje zdjęcia są wysyłane?
Nie. Zdjęcia są otwierane, przycinane i zapisywane przez Twoją przeglądarkę na Twoim własnym urządzeniu. Nie ma etapu wysyłania i nic nie jest przechowywane na naszych serwerach.
Jaki rozmiar powinien mieć obraz do udostępniania?
1200 × 630 pikseli, czyli proporcje około 1.91 do 1, to rozmiar, wokół którego projektowana jest większość podglądów linków. Wybierz preset Obraz do udostępniania, aby przyciąć dokładnie do tego rozmiaru.
Jaki format jest najlepszy dla obrazów na stronie?
WebP to bezpieczny domyślny wybór dla zdjęć: małe pliki i obsługa we wszystkich obecnych przeglądarkach. AVIF może być jeszcze mniejszy, ale koduje się dłużej i nie każda przeglądarka oferuje go w canvasie. PNG używaj do grafik, które wymagają ostrych krawędzi lub przezroczystości.
Czy mogę przyciąć kilka zdjęć do tego samego rozmiaru?
Tak. Otwórz kilka zdjęć, skadruj pierwsze, a potem użyj Przytnij wszystkie. Każde zdjęcie zostanie przycięte do tego samego kształtu i rozmiaru wyniku, wyśrodkowane na tym samym względnym punkcie co Twój pierwszy kadr.
Dlaczego przycięty plik wygląda na rozmazany?
Obszar kadru miał mniej pikseli niż rozmiar wyniku, więc został powiększony. Narzędzie pokazuje ostrzeżenie, gdy tak się stanie. Użyj większego oryginału, większego obszaru kadru lub mniejszej maksymalnej szerokości.
Najpierw przytnij, potem kompresuj
Większość zbyt ciężkich obrazów na stronach nie jest źle skompresowana; są po prostu za duże. Zdjęcie z telefonu ma często 4000 pikseli szerokości, a baner hero rzadko potrzebuje więcej niż 1920, obraz w karcie zaś około 1200. Przycięcie do kształtu i rozmiaru używanego przez stronę usuwa większość wagi, zanim nastąpi jakakolwiek kompresja.
Po przycięciu kompresor obrazów może wycisnąć z pliku jeszcze trochę, a konwerter WebP obsługuje całe foldery naraz.
Wybór właściwego kształtu
Dopasuj kadr do pola, które obraz wypełnia na stronie. Jeśli motyw pokazuje zdjęcia produktów w kwadratowych kafelkach, przytnij je do kwadratu sam, zamiast pozwalać, by CSS nieprzewidywalnie obcinał krawędzie. Jeśli motyw używa hero 16:9, pionowe zdjęcie 4:5 zostanie mocno przycięte, więc wybierz ujęcie poziome albo skadruj je tutaj na nowo.
Przy obrazach do udostępniania myśl o karcie podglądu jak o małym plakacie: wyraźny obiekt, co najwyżej kilka dużych słów i nic ważnego blisko krawędzi.
Kształty kadru wbudowane w narzędzie
Kształt
Rozmiar wyniku
Dobre do
Dowolny
Własny rozmiar Twojego kadru
Dowolny kształt, który przeciągniesz
Obraz do udostępniania 1200×630
1200 × 630px
Podglądy linków Open Graph
Hero 16:9
1920 × 1080px
Banery na pełną szerokość i okładki wideo
Szerokie hero 21:9
2560 × 1097px
Niskie, filmowe nagłówki stron
Kwadrat 1:1
1080 × 1080px
Zdjęcia produktów, awatary, posty w siatce
Portret 4:5
1080 × 1350px
Wysokie posty w feedzie i zdjęcia produktów
Relacja 9:16
1080 × 1920px
Pełnoekranowe relacje na telefon
Karta 3:2
1200 × 800px
Obrazy kart bloga i ogłoszeń
Favicon 512
512 × 512px
Źródło ikon strony
Dowolny
Dowolny kształt, który przeciągniesz
Obraz do udostępniania 1200×630
Podglądy linków Open Graph
Hero 16:9
Banery na pełną szerokość i okładki wideo
Szerokie hero 21:9
Niskie, filmowe nagłówki stron
Kwadrat 1:1
Zdjęcia produktów, awatary, posty w siatce
Portret 4:5
Wysokie posty w feedzie i zdjęcia produktów
Relacja 9:16
Pełnoekranowe relacje na telefon
Karta 3:2
Obrazy kart bloga i ogłoszeń
Favicon 512
Źródło ikon strony
Nie udało się odczytać {name} jako obrazu.
Wczytano obrazy: {n}. Nic nie zostało wysłane.
Wczytano obrazy: {n}. Nic nie zostało wysłane.
Ta przeglądarka nie potrafi zapisać tego formatu. Wybierz WebP, JPG lub PNG.
Zapisano {w} × {h} {ext}, {size}.
Zapisano obrazy: {n}, łącznie {size}. Każdy został przycięty wokół tego samego punktu co ten.
Kadrowanie
Kształt kadru
Upuść zdjęcia tutaj lub kliknij, aby wybrać
JPG, PNG, WebP, GIF lub AVIF. Do 20 naraz. Zostają na Twoim urządzeniu.
Kadrowany obraz: {name}
Obszar kadru. Przeciągnij, aby przesunąć, lub użyj klawiszy strzałek.
Kadr w punkcie {x}, {y}, {w} na {h} pikseli
{name}: {iw} × {ih}px. Kadr {size} od ({pos}). Przeciągnij ramkę, aby ją przesunąć, niebieską kropkę, aby zmienić rozmiar, albo ustaw na niej fokus i użyj klawiszy strzałek.
Eksport
Format
Jakość {value}
(PNG jest bezstratny)
Maksymalna szerokość (px, opcjonalnie)
Zachowaj rozmiar kadru
Wynik:
· Kadr jest mniejszy, więc zostanie powiększony i może wyglądać nieostro. Użyj większego zdjęcia lub mniejszego rozmiaru.