Jak Optymalizować Obrazy na Stronę Internetową za Pomocą Squoosh.app

Prawdopodobnie wiesz już o optymalizacji obrazów.

Jest przeznaczony do kompresji zdjęć na twojej stronie, aby strony nie ładowały się w tempie glacjalnym.

Do tej pory trochę ignorowałeś całą ideę. Nic dziwnego — to nie robi wielkiej różnicy, dopóki twoja strona nie jest w pełni ukształtowana.

Ale teraz nadszedł czas, aby coś zrobić. Twój arcywróg… eee, mamy na myśli… Twój najbliższy konkurent, absolutnie miażdży Twoją stronę pod względem wydajności. Nadszedł czas, aby się odegrać.

Squoosh to jedno z najlepszych narzędzi, jakie masz do dyspozycji. Jest darmowy, open source i łatwy w użyciu.

W tym przewodniku przyjrzymy się, jak używać Squoosh do kompresji obrazów i skracania czasu ładowania. Zacznijmy!

Jak zoptymalizować obrazy za pomocą Squoosh w 30 sekund

Przejdźmy od razu do rzeczy.

Możesz zacząć optymalizować obrazy dla swojej strony bardzo szybko.

Przejdź na stronę https://squoosh.app.

Kliknij na duży różowy obiekt na górze strony i wybierz obraz, który chcesz skompresować.

Następnie przejdziesz do ekranu podglądu, z panelem ustawień w prawym dolnym rogu.

Tutaj możesz zmienić rozmiar swojego obrazu, zmniejszyć paletę kolorów, zmienić jakość i wybrać preferowany typ pliku wyjściowego.

Poniżej znajduje się licznik, który pokaże, jak bardzo zmniejszy się rozmiar Twojego nowego pliku.

Kiedy wybierasz różne opcje, możesz przesuwać suwak na środku ekranu, aby zobaczyć efekt na jakości obrazu. Po lewej znajduje się powiększony widok twojego oryginalnego obrazu; po prawej podgląd twojej skompresowanej wersji.

Wygląda dobrze? Pobierz swoje skompresowane zdjęcie, klikając niebieską kropkę w prawym dolnym rogu. Możesz je teraz dodać do swojej strony internetowej.

Gotowe.

Wskazówka: Chcesz przyspieszyć pracę przy następnym obrazie? Dotknij małej ikonki „koła zębatego” w panelu sterowania. To zapisze Twoje aktualne ustawienia jako preset, który możesz wczytać później, dotykając drugiej ikonki koła zębatego.

Lepiej Poznaj Squoosh

To jest krótka wersja, ale Squoosh oferuje o wiele więcej.

To narzędzie do kompresji obrazów typu open-source zostało rzeczywiście opracowane przez ludzi z Google. Jest dostępne zarówno jako aplikacja internetowa, jak i dodatek do przeglądarki Chrome.

Jeśli czujesz się technicznie, możesz również pobrać Squoosh z GitHuba i uruchomić go offline za pomocą linii poleceń.

Squoosh obsługuje formaty PNG, JPG, TIFF, GIF i wiele innych. Każda wersja jest darmowa do użytku, a aplikacja obsługuje kompresję lokalnie. To dobra wiadomość dla prywatności, ponieważ obrazy nigdy nie opuszczają twojego komputera.

Nauka Używania Squoosh Jak Profesjonalista

Inną świetną rzeczą w Squoosh jest to, że oferuje mnóstwo opcji sterowania. Musisz po prostu wiedzieć, jak obsługiwać panel sterowania.

Zróbmy szybką wycieczkę.

Kiedy po raz pierwszy załadujesz obraz do Squoosh, zobaczysz tylko cztery opcje na panelu sterowania:

Zmień Rozmiar

Jeśli planujesz użyć obrazu jako miniatury, nie potrzebujesz pełnej rozdzielczości. Możesz przesunąć ten przełącznik, aby zmienić rozmiar obrazu.

Wpisz liczbę pikseli, którą chcesz, ale pozostaw zaznaczone domyślne opcje, o ile nie masz ku temu ważnego powodu. Upewnij się, że zaznaczona jest opcja „Zachowaj proporcje”, aby uniknąć zniekształceń!

Zmniejsz Paletę

Wiele obrazów nie zawiera tak wielu kolorów. Ta opcja pozwala ci odrzucić odcienie, aby zmniejszyć rozmiar pliku.

Ten suwak „Dithering”? Zasadniczo tworzy wzorzec szumu, aby zamaskować zredukowaną paletę kolorów.

Uwaga: Ta technika najlepiej sprawdza się w projektach graficznych, a nie w zdjęciach, ponieważ zdjęcia mogą wyglądać jak złe kopie.

Format

Pod etykietą „Kompresuj” możesz wybrać format wyjściowy dla swojego obrazu. Opcje dzielą się na dwie główne kategorie.

• Straty (np. JPG, GIF): Te formaty odrzucają drobne fragmenty obrazu, aby zaoszczędzić miejsce. Zazwyczaj nie zauważysz różnicy, chyba że zależy ci na bardzo wysokiej rozdzielczości.
• Bezstratne (np. PNG, AVIF): W przeciwieństwie do stratnych, formaty bezstratne znajdują sposoby na zmniejszenie rozmiaru pliku, nie wpływając na jakość obrazu.

Jako ogólna zasada, lossy jest odpowiednie dla prostych grafik, natomiast lossless jest lepsze dla wyraźnych ikon i szczegółowych zdjęć.

Jakość

Jeśli wybierzesz format ze stratami, zobaczysz również ten suwak. Przesuwa się od 0 (spłaszczenie twojego obrazu) do 100 (bez zmian).

Zanim zapiszesz swój obraz, zalecamy przesunięcie tego suwaka i zobaczenie efektu w obszarze podglądu. Aby uzyskać ładny, mały plik, przesuń suwak jak najbardziej w lewo, bez tworzenia brzydkich artefaktów.

Jeśli konwertujesz do formatu WebP, zobaczysz również suwak „Wysiłek”. Kontroluje on, jak dokładnie Squoosh przeanalizuje Twój obraz przed podjęciem decyzji o sposobie zastosowania kompresji. Wybierz wyższą wartość, jeśli masz szczegóły, które chcesz zachować.

Zaawansowane Ustawienia

W zależności od wybranego formatu wyjściowego, możesz mieć dostęp do większej liczby opcji w zakładce „Zaawansowane ustawienia”.

Jeśli nie masz doktoratu z edycji obrazów, lepiej unikać tych ustawień.

Szybkie Porady, Jak Wycisnąć Więcej z Squoosh

Podsumowując, Squoosh jest bardzo łatwy w użyciu. I szczerze mówiąc, powyższy fragment zawiera wszystko, co naprawdę musisz wiedzieć o aplikacji.

Ale widzimy cię, czytelniku. Chcesz stać się bogiem kompresji obrazów, prawda?

Cóż, oto kilka profesjonalnych wskazówek, które pomogą Ci osiągnąć ten nieśmiertelny status.

• Przeciągnij i upuść: Nie martw się o menu plików. Po prostu przeciągnij swój obraz bezpośrednio do Squoosh.
• Znaj swoje formaty: Użyj WebP dla nowoczesnych przeglądarek, MozJPEG dla zdjęć i OptiPNG dla grafik. Pamiętaj, AVIF to nowość; sprawdź, które przeglądarki mogą go obsługiwać.
• Wielkość ma znaczenie: Kompresuj pod kątem jakości, a nie tylko rozmiaru pliku. Jeśli twoje zdjęcie z dzieła sztuki zamienia się w projekt przedszkolaka, zrób krok do tyłu i dostosuj ustawienia.
• Wysiłek się liczy: Zwiększ suwak wysiłku dla PNG i WebP, aby wycisnąć każdy ostatni bit z rozmiaru pliku, nie wpływając znacząco na jakość. 
• “Reduce Palette” to twój przyjaciel: Ile różnych kolorów zawiera twój obraz? Jeśli jest dość prosty, możesz zaoszczędzić dużo miejsca, przesuwając suwak „Reduce Palette” w lewo.

Pamiętaj, że każdy zaoszczędzony MB oznacza krótszy czas oczekiwania dla twoich użytkowników!

Jak Zarządzać Obrazami Na Stronie Dla Lepszej Wydajności

Chociaż Squoosh może zmniejszyć rozmiar Twoich obrazów do bardziej zarządzalnego poziomu, nie jest to rozwiązanie na wszystko.

Przestrzegaj tych wytycznych, aby upewnić się, że skompresowane obrazy zapewnią ci wzrost wydajności, na który liczyłeś!

• Korzystaj z CDN: Sieci dostarczania treści (CDN) są zoptymalizowane pod kątem multimediów i zmniejszają obciążenie serwerów twojego hosta.
• Zastanów się dokładnie nad typami plików: Łatwo jest zrobić wszystkie obrazy takie same. Ale twój wybór pliku powinien odpowiadać wymaganiom każdego obrazu na twojej stronie.
• Usuń niepotrzebne metadane: Czy twój obraz musi przewozić informacje o lokalizacji i aparacie? Prawdopodobnie nie.
• Spróbuj używać sprajtów: Zamiast używać jednego dużego obrazu z powtarzającym się wzorem, możesz być w stanie użyć wielokrotnie małego sprajta. To może naprawdę przyspieszyć sprawy!

Jeśli jesteś ciekawy wszystkich sposobów optymalizacji obrazów, nasz blog jest pełen pomocnych poradników. Oto niektóre z najważniejszych:

• Żegnaj, JPG: Jak Optymalizować Obrazy Dla Nowoczesnego Internetu (WebP, SVG i Więcej)
• Jak Naprawić 16 Najczęstszych Problemów z Obrazami w WordPressie
• Najczęstsze Problemy z Przesyłaniem Obrazów w WordPressie i Jak Je Rozwiązać (5 Metod)

Alternatywy dla Squoosh: Najlepsze narzędzia do kompresji obrazów

Squoosh to świetny punkt wyjścia do kompresowania i optymalizacji obrazów na twojej stronie internetowej. Jednak istnieją również inne opcje:

• TinyPNG: Ta aplikacja internetowa natychmiastowo kompresuje obrazy, zachowując imponującą jakość. Jest darmowa dla partii do 20 obrazów; możesz odblokować więcej za 39 dolarów miesięcznie.
• ShortPixel: Jeśli posiadasz stronę na WordPressie, ten plugin pozwala kompresować obrazy bezpośrednio z panelu administracyjnego. Jest darmowy dla do 100 obrazów miesięcznie. 
• ImageOptim: Dla posiadaczy Maca. Ta otwartoźródłowa aplikacja pozwala kompresować partie obrazów na twoim komputerze. I jest całkowicie darmowa!
• Kraken.io: To potężne narzędzie do kompresji obrazów działa podobnie do Squoosh, chociaż bez ładnej prezentacji podglądu. Ach, i jest darmowe tylko dla plików do 1MB.
• JPEGmini: Pracujesz z wieloma zdjęciami wysokiej jakości? Dzięki szybkiemu przeciąganiu i upuszczaniu, ta aplikacja na komputer pozwala zmniejszyć rozmiar plików JPG nawet o 80%.

Spraw, aby Twoja Strona Działała Płynniej Już Dziś

Optymalizacja obrazów to kłopot. Ale warto włożyć wysiłek, gdy twoje strony ładują się z prędkością błyskawicy. Poza tym, to nie jest zbyt dużo pracy, kiedy masz narzędzie takie jak Squoosh.

Oczywiście, obrazy to nie jedyna przyczyna wolnego ładowania strony. Twoja oferta hostingowa może być tego powodem.

Chcesz coś, co oferuje bardziej niezawodną wydajność? W DreamHost wszystkie nasze plany zapewniają 100% gwarancji dostępności i nieograniczoną przepustowość. Oznacza to, że Twoja strona nigdy nie będzie miała problemów z obciążeniem.

Chcesz spróbować? Zarejestruj się dzisiaj, aby poczuć różnicę!