Jak działa zmiana rozmiaru obrazów w przeglądarce
Każda zmiana rozmiaru to krótki pipeline działający w całości w JavaScript. Żadna biblioteka kodeków nie jest pobierana i żaden serwer nie jest zaangażowany. Canvas API przeglądarki dekoduje plik, przerysowuje go w docelowym rozmiarze i ponownie koduje w pamięci, a następnie przekazuje Blob, który strona może podglądać lub spakować. Ponieważ każdy krok pozostaje w piaskownicy karty, oryginalne pliki nigdy nie trafiają do sieci.
- Odczytuje każdy przesłany plik jako Blob i tworzy URL obiektu, aby przeglądarka mogła go zdekodować lokalnie, bez kopiowania bajtów na serwer ani zapisywania ich na dysku.
- Wyznacza docelowe wymiary z wybranego trybu — ograniczenie najdłuższego boku, dokładna szerokość i wysokość lub skalowanie procentowe. Blokada proporcji zapewnia zachowanie stosunku boków przy edycji jednego pola.
- Tworzy pozaekranowy Canvas o docelowym rozmiarze i wywołuje
ctx.drawImage(source, 0, 0, width, height), aby przerysować zdekodowane piksele. Przeglądarka obsługuje interpolację wygładzającą przeskalowany wynik. - Wywołuje
canvas.toBlob, aby ponownie zakodować w formacie źródłowym. PNG pozostaje bezstratny, JPEG i WebP są ponownie kodowane przy wysokiej jakości. Następnie strona pokazuje kartę przed/po i oferuje pobieranie pojedynczego obrazu lub ZIP zbudowanego w pamięci za pomocą fflate.
Dlaczego warto zmieniać rozmiar obrazów?
- Zbyt duże obrazy to najczęstsza przyczyna wolnych stron. Zdjęcie telefoniczne 4000×3000 wpuszczone prosto do layoutu o szerokości 600 pikseli zawiera około 40 razy więcej pikseli niż ekran może wyświetlić. Ograniczenie najdłuższego boku do 1600 px przed przesłaniem znacznie redukuje wagę strony i poprawia LCP Core Web Vitals.
- Formularze wymuszają ścisłe wymiary. Sloty awatarów, portale zdjęć do dokumentów, oferty na marketplace i karty Open Graph wymagają konkretnych rozmiarów: 1200×630 dla podglądu Open Graph, 512×512 dla ikony aplikacji, 150×150 dla miniatury. Podaj właściwą liczbę i pomiń pętle odrzuconych przesyłek.
- Narzędzia e-mail i czaty po cichu rekomprymują wszystko, co duże, co może zniszczyć czysty zrzut ekranu. Samodzielna zmiana rozmiaru do rozsądnej szerokości daje przewidywalny wynik zamiast pozostawiania go czyjemuś stratniejszemu pipeline'owi.
- Spójność wsadowa jest ważna dla galerii i katalogów. Przetworzenie folderu zdjęć różnych rozmiarów przez jeden cel 800×800 sprawia, że każda karta równo leży na siatce, bez żadnego dużego obrazu psującego layout.
Typowe zastosowania
Zmiana rozmiaru pojawia się zawsze, gdy wymiary źródłowe i oczekiwania miejsca docelowego się nie zgadzają. Trzy schematy powtarzają się ciągle.
- Przygotowanie zdjęć produktów dla sklepu Shopify lub WooCommerce. Folder oryginałów z aparatu po 4000 px jest ograniczany do najdłuższego boku 1600 px, aby sklep ładował się szybko, a proporcje zostają niezmienione, więc nic nie wygląda rozciągniętym.
- Generowanie zasobów społecznościowych i aplikacji z jednego pliku wzorcowego. Ustawienie dokładnego 1200×630 dla karty Open Graph, potem 512×512 dla ikony aplikacji i eksport każdego w kilku kliknięciach bez otwierania ciężkiego edytora.
- Zmniejszenie wsadu zrzutów ekranu z testów QA lub supportu przed dołączeniem do zgłoszenia. Skalowanie folderu 50 zrzutów do 50% zazwyczaj zmniejsza archiwum o ok. trzy czwarte przed wrzuceniem do trackera błędów.
Przykład praktyczny: zdjęcie 4000 px do obrazu webowego 1600 px
Zdjęcie 4000×3000 prosto z telefonu to częsty ładunek, znacznie większy niż potrzebuje jakikolwiek layout webowy. To uczciwy wzorzec dla tego, co zmiana rozmiaru oszczędza.
Upuść zdjęcie do strefy przesyłania, pozostaw tryb na Ogranicz najdłuższy bok i ustaw wartość na 1600. Pipeline Canvas przerysowuje obraz w 1600×1200 z zachowanymi proporcjami, a następnie ponownie koduje go w oryginalnym formacie. Karta wyjściowa pokazuje nowe wymiary i rozmiar pliku, który dla typowego JPEG spada z kilku megabajtów do kilkuset kilobajtów. Kliknij Pobierz na karcie, aby pobrać pojedynczy plik, lub kliknij Pobierz .zip, jeśli zmieniłeś rozmiar kilku obrazów jednocześnie. Cały cykl, od upuszczenia do pobrania, działa w ułamku sekundy i nie zużywa żadnej przepustowości po załadowaniu samej strony.
Jakie tryby zmiany rozmiaru są dostępne?
Trzy. Ogranicz najdłuższy bok ogranicza dłuższy z wymiarów (szerokość lub wysokość) do wartości w pikselach i skaluje drugi bok do dopasowania — to bezpieczna opcja domyślna, ponieważ nigdy nie zniekształca. Dokładna szerokość × wysokość pozwala podać obie liczby, z blokadą proporcji przeliczającą drugie pole na podstawie stosunku boków oryginału podczas edycji pierwszego — wyłącz blokadę, gdy formularz wymaga dokładnego nieproporcjonalnego rozmiaru. Skaluj procentowo mnoży oba wymiary przez jeden czynnik, przydatne do zmniejszenia lub podwojenia całego wsadu naraz. Sześć presetów jednym kliknięciem (od 1920×1080 do miniatury 150×150) obsługuje najczęstsze cele.
Czy to odbywa się na moim urządzeniu?
Tak, w całości. Strona używa natywnego Canvas API przeglądarki i Web File API do dekodowania, przerysowywania i ponownego kodowania każdego obrazu w pamięci. Żadne dane obrazów nie są wysyłane na serwer, nie ma tymczasowego przesyłania ani żadnego obiegu przez chmurę. Możesz to sprawdzić: otwórz DevTools, przejdź do panelu Sieć i uruchom zmianę rozmiaru. Jedyne żądania wychodzące, które zobaczysz, to wstępne załadowanie strony i wywołania reklamowe. Nic w kształcie obrazu nie opuszcza karty, co sprawia, że jest to bezpieczne dla skanowanych dokumentów, obrazów medycznych i innych materiałów, których nigdy nie chciałbyś przesyłać.
Czy zmiana rozmiaru obniży jakość?
Zmniejszanie obrazu (skalowanie w dół) wygląda doskonale — przeglądarka uśrednia piksele źródłowe w mniejszą liczbę pikseli, więc szczegóły pozostają ostre, a plik staje się znacznie mniejszy. Powiększanie powyżej rozdzielczości źródłowej (skalowanie w górę) nie może wynaleźć szczegółów, których nigdy nie uchwycono, więc mały obraz powiększony będzie wyglądał miękko — to ograniczenie każdego narzędzia do zmiany rozmiaru, nie tylko tego. Wyjście zachowuje format źródłowy: PNG pozostaje bezstratny, JPEG i WebP są kodowane przy wysokiej jakości, więc widoczna różnica od oryginału jest trudna do zauważenia.
Jakie formaty plików są obsługiwane?
Na wejściu akceptowany jest każdy format, który przeglądarka może zdekodować: PNG, JPEG, WebP, GIF i BMP pokrywają prawie każdy plik produkowany przez telefon, aparat lub narzędzie do zrzutów ekranu. Wyjście zachowuje format źródłowy, gdzie koder Canvas go obsługuje — PNG, JPEG i WebP są obsługiwane bezpośrednio. GIF i BMP, które Canvas API może dekodować, ale nie kodować, są zapisywane jako bezstratny PNG. Nazwa pliku po zmianie rozmiaru zawiera nowe wymiary (na przykład photo-1600x1200.jpg), więc wsad łatwo posortować.
Upuść obrazy, wybierz rozmiar, zmień. Wszystko działa w Twojej karcie. Bez przesyłania, bez konta, bez czekania na serwer.