Jak zoptymalizować obrazy w Internecie: przewodnik krok po kroku dla lepszej wydajności witryny

Nie ma wątpliwości, że obrazy są nieocenionym atutem w sieci WWW. Od wizualizacji danych, przez dzielenie akapitów tekstu, po prezentację prac z portfolio, zdjęcia i grafika są ważną częścią większości projektów witryn internetowych i pomagają użytkownikom cieszyć się wspaniałymi doświadczeniami online.

Jednak posiadanie świetnych efektów wizualnych może odbić się na Twojej witrynie. Wyższe rozdzielczości wiążą się z większymi rozmiarami plików, co oznacza również wolniejsze ładowanie. AKA, obrazy są często przyczyną słabej wydajności witryny. I pamiętaj, cały sens dodawania obrazów do Twojej witryny polega na zapewnieniu lepszych wrażeń użytkownikom (a może nawet na zwiększeniu sprzedaży i konwersji!), co jest trudne do zrobienia w przypadku powolnej witryny.

Jak więc zrównoważyć wydajność witryny z projektowaniem wizualnym?

Optymalizując obrazy.

Jest wiele drobiazgów, które możesz zrobić w trakcie procesu tworzenia obrazu, aby zoptymalizować rozmiary plików, szczególnie z myślą o Twojej witrynie.

W tym przewodniku krok po kroku dotyczącym optymalizacji obrazu omówię:

• Co to jest optymalizacja obrazu?
• Dlaczego optymalizacja obrazu jest ważna?
• 7 sposobów na optymalizację obrazów w sieci

Co to jest optymalizacja obrazu?

Ogólnie rzecz biorąc, optymalizacja obrazu polega na zmniejszaniu rozmiaru pliku bez utraty jakości. Możesz zoptymalizować swoje obrazy w fazie tworzenia (np. używając odpowiednich opcji „Eksportuj” w Photoshopie) lub bezpośrednio na swojej stronie (np. używając leniwego ładowania do wyświetlania multimediów w swojej witrynie). Celem jest zmniejszenie ilości danych, które użytkownik musi pobrać, aby szybciej uzyskiwać treści, których szuka.

Dlaczego optymalizacja obrazu jest ważna?

Ludzie mają krótki czas skupienia uwagi, jeśli chodzi o sieć, dlatego tak ważne jest, aby Twoja strona ładowała się w dwie sekundy lub mniej. Jednym z najczęstszych czynników spowalniających działanie witryny są obrazy. (Nawet jeśli Twoja witryna działa na najlepszych serwerach, tak jak w przypadku zarządzanego hosta WordPress, obrazy mogą powodować spadek wydajności).

Jest jeszcze jeden powód, dla którego optymalizacja obrazu jest ważna, ale bezpośrednio związany z wynikami Twojej firmy. Obrazy nie tylko spowalniają witrynę, ale także zajmują miejsce na dysku serwera, który napędza witrynę. Większość dostawców usług hostingowych wymusza ograniczenie przepustowości na plan, co oznacza, że ​​nie masz nieograniczonych zasobów – a Twoje obrazy szybko zajmą to miejsce.

Chociaż to nie koniec świata, jeśli przekroczysz ten limit, możesz zostać obciążony opłatą za nadwyżkę lub gorzej – zamknij swoją witrynę.

Optymalizując obrazy, będziesz w stanie maksymalnie wykorzystać przestrzeń dyskową witryny i uniknąć ograniczenia przepustowości.

Teraz, gdy wiesz, jak ważna jest optymalizacja obrazu, porozmawiajmy o tym, jak to zrobić! Ten przewodnik krok po kroku obejmuje wszystko, od wskazówek dotyczących programu Photoshop po praktyki programistyczne.

Jak zoptymalizować obrazy do internetu

Ten przewodnik krok po kroku obejmuje wszystko, co możesz zrobić, aby zoptymalizować obrazy, zaczynając od Photoshopa, a kończąc na Twojej witrynie.

Wykonaj poniższe czynności, aby zoptymalizować obrazy pod kątem lepszej wydajności witryny:

1. Porównaj obecną szybkość witryny.
2. Dowiedz się, jak wybrać najlepszy typ pliku obrazu.
3. Zmień rozmiar obrazów przed wyeksportowaniem.
4. Kompresuj obrazy, aby zmniejszyć rozmiar pliku.
5. Zautomatyzuj optymalizację obrazu za pomocą wtyczki WordPress.
6. Użyj techniki „rozmycia”, aby najpierw załadować obraz o niższej jakości.
7. Użyj leniwego ładowania.

1. Sprawdź obecną prędkość swojej witryny

Zanim wykonasz wszystkie te prace, aby zoptymalizować swoje obrazy, zacznij od przeprowadzenia testu szybkości na swojej stronie! Pod koniec będziesz mógł zobaczyć swój wpływ (plus możesz podzielić się tym ze swoim zespołem lub szefem, za dodatkową chwałę).

Jako część zespołu wsparcia Flywheel znam sporo testów prędkości, ale te pięć to moje ulubione:

• Statystyki Google PageSpeed
• Narzędzia Pingdom
• GTMetrix
• Test strony internetowej
• Dodatek Performance Insights firmy Flywheel

Pierwsze cztery, narzędzia oparte na przeglądarce, działają bardzo podobnie: otwórz link, a następnie wprowadź adres URL, aby uzyskać szybki raport o szybkości i wydajności witryny.

Performance Insights, dodatek do platformy hostingowej Flywheel, wykracza poza podstawy, zapewniając praktyczne rekomendacje dotyczące Twojej witryny, w tym informacje, które może dostarczyć tylko Twój host.

Dodatkowo będziesz w stanie śledzić metryki w czasie na pulpicie nawigacyjnym, co ułatwia obserwowanie wpływu wprowadzonych zmian podczas takich czynności, jak optymalizacja obrazów. Dowiedz się więcej tutaj.

Narzędzia te zalecą kilka kroków, które możesz wykonać, aby poprawić szybkość i wydajność witryny, ale na potrzeby tego samouczka skup się na razie na wyniku. Daje to świetny punkt odniesienia, dzięki czemu wiesz, od czego zaczynasz.

2. Dowiedz się, jak wybrać najlepszy typ pliku obrazu

Po zakończeniu tworzenia obrazów (zapisywania z aparatu lub eksportowania z narzędzia takiego jak Photoshop) będziesz mieć możliwość określenia typu pliku. Najpopularniejsze typy plików do użytku w Internecie to JPEG, PNG i GIF. I jak jestem pewien, że możesz się domyślić, wszystkie mają swoje zalety, wady i najlepsze praktyki umieszczania na Twojej stronie internetowej.

JPEGi

Obrazy JPEG najlepiej sprawdzają się w prezentacji złożonych kolorowych fotografii w witrynie, ponieważ umożliwiają uzyskanie obrazu o wyższej jakości przy mniejszym rozmiarze pliku. Ten typ pliku prawdopodobnie będzie działał w przypadku większości obrazów, których chcesz użyć w witrynie, z jednym głównym wyjątkiem: obrazami z przezroczystym tłem. (Dla tych, zobacz następną sekcję o PNG!)

Używając obrazu JPEG na swojej stronie internetowej, rozważ wyeksportowanie go jako „Progresywne”. Dzięki temu przeglądarka może natychmiast załadować prostą wersję obrazu przed pełnym załadowaniem pełnej rozdzielczości do witryny.

Oto pomysł na to, jak ładowałby się obraz nieprogresywny:

Oto jak ładowałby się obraz progresywny:

Jeśli pracujesz w Photoshopie, znajdziesz to ustawienie podczas eksportowania jako „Zapisz dla Internetu”.

PNG

Jeśli obraz nie zawiera wielu kolorów (np. płaskie ilustracje lub ikony) lub chcesz, aby był przezroczysty, zalecam eksportowanie jako PNG. Upewnij się, że masz odpowiednie wymiary obrazu i poszukaj opcji zapisania jako PNG-24 (lub 8, jeśli nie ma utraty jakości).

Gify

Trzecim najpopularniejszym formatem obrazów w Internecie są GIF-y. Obsługują tylko 256 kolorów, więc musisz być selektywny z tym typem pliku!

Aby zoptymalizować GIF-y dla swojej witryny, zastanów się krytycznie, jak długo trwają, czy muszą się zapętlać i ile naprawdę potrzebujesz na danej stronie lub witrynie.

3. Zmień rozmiar obrazów przed przesłaniem

Jednym z najłatwiejszych sposobów optymalizacji obrazów w Internecie jest zmiana ich rozmiaru przed przesłaniem ich do witryny. Zwłaszcza jeśli pracujesz z nieprzetworzonymi obrazami z lustrzanki cyfrowej, wymiary są często znacznie większe niż faktycznie potrzebujesz.

Załóżmy na przykład, że dodajesz obrazy do artykułu na blogu w swojej witrynie. Jeśli Twój motyw WordPress wyświetla obrazy w rozdzielczości 500 x 500, ale przesyłasz obrazy w rozdzielczości 1024 x 1024, wszystkie te dodatkowe piksele po prostu zwiększają rozmiar pliku i zmniejszają szybkość witryny, nie zapewniając realnych korzyści.

Przycinając obrazy przed przesłaniem, zmniejszysz rozmiar pliku, co pomoże w ładowaniu witryny nieco szybciej i zaoszczędzi miejsce na dysku na jeszcze więcej obrazów.

Aby zmienić rozmiar obrazu, po prostu otwórz wybrane oprogramowanie do edycji obrazu. Photoshop działa dobrze, ale możesz też użyć prostszych narzędzi, takich jak Podgląd (dla komputerów Mac), Paint (dla Windows) lub Canva (narzędzie przeglądarki).

4. Kompresuj obrazy, aby zmniejszyć rozmiar pliku

Po utworzeniu końcowego obrazu, zapisaniu we właściwym formacie i przycięciu do odpowiedniego rozmiaru, możesz wykonać jeszcze jeden krok, aby zoptymalizować go przed przesłaniem do witryny: skompresować.

Ten proces pomoże Ci zmniejszyć rozmiar pliku bez zauważalnej utraty jakości obrazu. Istnieją dwa główne rodzaje kompresji: stratna i bezstratna.

Kompresja bezstratna zachowa ten sam poziom jakości przed i po kompresji. Kompresja stratna spowoduje odrzucenie niektórych elementów zdjęcia, ale zazwyczaj w sposób, którego ludzkie oko nie zauważy. Aby dowiedzieć się więcej o tych typach kompresji, polecam ten przewodnik firmy Imagify.

Jeśli zobaczysz określony obraz na swojej stronie, który się ładuje i powoli pojawia się, może to oznaczać, że wymaga kompresji, zmiany rozmiaru lub obu.

Aby skompresować obrazy, potrzebujesz tylko narzędzia do kompresji obrazu. Moje ulubione to:

• TinyPNG: bezpłatne narzędzie oparte na przeglądarce do kompresji obrazów PNG i JPEG.
• ImageOptim: bezpłatna aplikacja typu open source do kompresji obrazów.
• JPEGmini: aplikacja do rekompresji zdjęć dla komputerów Mac i Windows.
• RIOT: Bezpłatna aplikacja Windows do optymalizacji obrazów.
• Optymalizator obrazu: bezpłatny dodatek do usługi lokalnej.

MałePNG

To oparte na przeglądarce narzędzie optymalizuje obrazy za pomocą inteligentnej kompresji stratnej, zmniejszając rozmiar pliku poprzez zmniejszenie liczby używanych kolorów. (Ale nie martw się, nawet nie zauważysz!) Jest darmowy i szybki w użyciu dla plików PNG i JPEG.

ImageOptim

Jest to bezpłatna aplikacja na komputery Mac, która kompresuje obrazy, usuwając niepotrzebne wzdęcia, zachowując jednocześnie możliwie najwyższą jakość obrazu.

JPEGmini

JPEGmini to potężna płatna opcja, która pomaga zmniejszyć rozmiar pliku, zachowując jednocześnie jakość i format. Ma bezpłatną wersję próbną, więc możesz przetestować ją przed zakupem.

ZAMIESZKI

Radical Image Optimization Tool (RIOT) to bezpłatna aplikacja systemu Windows do zmniejszania rozmiaru pliku obrazu. Posiada widok side-by-side, dzięki czemu można porównać jakość obrazu przed i po kompresji.

Image Optimizer, darmowy dodatek do lokalnego

Jeśli używasz Local jako lokalnego środowiska programistycznego, możesz użyć dodatku Image Optimizer, aby automatycznie kompresować obrazy w trybie offline. Skanuje Twoją witrynę pod kątem wszystkich plików graficznych, oszczędzając czas na ich indywidualne kompresowanie i przyspieszając proces witryny.

5. Zautomatyzuj optymalizację obrazu za pomocą wtyczki WordPress

W tym momencie możesz zacząć myśleć, że optymalizacja obrazu to dużo pracy – i może być! Ale jest też prosty sposób na usprawnienie kilku z tych kroków, a jest to zainstalowanie wtyczki do optymalizacji obrazu w witrynie WordPress.

Mam kilka rekomendacji, a każda z nich ma unikalne cechy. Ogólnie rzecz biorąc, wtyczka optymalizacji obrazu kompresuje i zmienia rozmiar obrazów podczas przesyłania do witryny WordPress. Oznacza to, że możesz pominąć te kroki zamiast wykonywać je ręcznie, co jest dużą oszczędnością czasu.

Aby zoptymalizować obrazy w witrynie WordPress, polecam te wtyczki:

• EWWW Optymalizator obrazu w chmurze
• Kompresuj obrazy JPEG i PNG
• Kracken.io
• Wyobraź sobie

EWWW Optymalizator obrazu w chmurze

Ta wtyczka WordPress automatycznie zoptymalizuje Twoje obrazy, gdy prześlesz je do swojej witryny, lub może również zoptymalizować obrazy przesłane w przeszłości. To sprawia, że ​​jest to niezwykle korzystne, jeśli pracujesz z istniejącą witryną z niezoptymalizowanymi obrazami.

Kompresuj obrazy JPEG i PNG

Ta wtyczka WordPress autorstwa zespołu TinyPNG może optymalizować obrazy JPEG i PNG podczas przesyłania. Jeśli jesteś fanem narzędzia opartego na przeglądarce, usprawnij proces dzięki bezpłatnej wtyczce!

Kracken.io

Wtyczka Kracken.io może zoptymalizować zarówno nowe, jak i istniejące obrazy w Twojej witrynie WordPress. Obsługuje również tryby kompresji bezstratnej i stratnej, zapewniając dużą kontrolę nad efektem końcowym.

Wyobraź sobie

Ta wtyczka WordPress pomoże zoptymalizować Twoje obrazy bez utraty jakości. Jest również kompatybilny z WooCommerce i NextGen Gallery, jeśli używasz tych wtyczek.

Uwaga: przed wybraniem wtyczki sprawdź, jak działają. Niektóre stosują operacje opodatkowania serwera, które mogą powodować problemy w Twojej witrynie, podczas gdy inne korzystają z opcji FTP, aby lekceważyć obciążenie serwera WWW.

6. Użyj techniki „rozmycia”, aby najpierw załadować obraz o niższej jakości

Nawet po wykonaniu wszystkich poprzednich kroków optymalizacji zdarzają się przypadki, w których nadal możesz pracować z dużymi rozmiarami plików lub dużą ilością obrazów na stronie, co spowalnia szybkość witryny. W takich przypadkach czasami warto nie tylko zoptymalizować obrazy, ale także zoptymalizować ładowanie, aby odwiedzający witrynę myśleli, że pliki multimedialne ładują się szybciej niż w rzeczywistości.

O to właśnie chodzi w tych dwóch kolejnych krokach – aby zapewnić wrażenie szybszego ładowania obrazów, dzięki czemu użytkownicy nie będą tylko wpatrywać się w pustą stronę podczas ładowania plików.

Jednym ze sposobów, aby to zrobić, jest najpierw załadowanie obrazu niższej jakości (LQI). Ładując mniejszą wersję obrazu przed załadowaniem pełnego rozmiaru, daje to użytkownikowi coś, na co może patrzeć, czekając na wszystkie szczegóły. Daje to wrażenie szybszego czasu ładowania, nawet jeśli technicznie wszystko ładuje się w tym samym tempie.

Popularnym sposobem na to jest technika „rozmycia”, której możesz się nauczyć, korzystając z tego samouczka na temat sztuczek CSS.

7. Lazy załaduj obrazy swojej witryny

Podobnie jak w przypadku techniki „rozmycia”, jest jeszcze jedna sztuczka, która pomoże Ci sprawić wrażenie szybszego ładowania obrazów: Lazy loading.

Kiedy ktoś trafia na Twoją stronę, zaczyna od góry strony. Przewinięcie całej strony prawdopodobnie zajmie im chwilę, zwłaszcza jeśli są zaręczeni. Zamiast próbować załadować wszystkie obrazy naraz, leniwe ładowanie działa przy założeniu, że użytkownikom najbardziej zależy na treści, którą widzą. Tak więc obrazy w widoku przeglądarki w pełni ładują się jako pierwsze, podczas gdy inne obrazy najpierw ładują symbol zastępczy, dopóki użytkownik nie przewinie do tej sekcji strony.

Lazy loading to świetna technika sama w sobie, a jeszcze skuteczniejsza w połączeniu z pozostałymi wskazówkami dotyczącymi optymalizacji obrazu! I jest to bardzo łatwe do zrobienia w witrynie WordPress, dzięki wtyczce BJ Lazy Load.

To kończy mój przewodnik krok po kroku dotyczący lepszej wydajności witryny dzięki optymalizacji obrazów! Aby zobaczyć, jaki wpływ wywarło to na Twoją witrynę, przeprowadź kolejny test szybkości. Jak ci poszło?

Pomiędzy zoptymalizowanym przepływem pracy a odpowiednimi narzędziami do optymalizacji obrazu, będziesz w stanie zobaczyć lepszą wydajność witryny ze zoptymalizowanych obrazów w mgnieniu oka!

Wyjdź poza obrazy: dowiedz się, jak zwiększyć szybkość witryny, aby uzyskać niesamowitą wydajność

Platforma hostingowa WordPress zarządzana przez Flywheel jest zoptymalizowana pod kątem szybkości witryn WordPress, ale Twój serwer to tylko element układanki. Dzięki naszemu dodatkowi Performance Insights uzyskasz dogłębny wgląd w wydajność swojej witryny (dzięki czemu będziesz dokładnie wiedzieć, gdzie wprowadzić ulepszenia!), a jednocześnie będziesz w stanie śledzić wskaźniki w czasie, aby zobaczyć, kiedy, czy i jak rzeczy się zmieniają.

UCZ SIĘ WIĘCEJ

Ten przewodnik został napisany przez Tylera Stokesa, inżyniera szczęścia w firmie Flywheel. Każdego dnia pomagamy twórcom optymalizować ich strony internetowe pod kątem błyskawicznej wydajności.

Kliknij tutaj, aby dowiedzieć się więcej o zarządzanej platformie hostingowej WordPress przez Flywheel !