Jak zoptymalizować obrazy do użytku w Internecie: przewodnik krok po kroku w celu uzyskania lepszej wydajności witryny

Nie ma wątpliwości, że obrazy są nieocenionym atutem sieci WWW. Od wizualizacji danych, przez dzielenie akapitów tekstu, aż po prezentację prac w portfolio, zdjęcia i grafika są ważną częścią większości projektów witryn internetowych i pomagają użytkownikom w korzystaniu z Internetu.

Jednak świetna grafika może odbić się na Twojej witrynie. Wyższa rozdzielczość wiąże 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 witryny internetowej polega na zapewnieniu użytkownikom lepszych wrażeń (a może nawet zwiększeniu sprzedaży i konwersji!), co jest trudne do osiągnięcia w przypadku powolnej witryny.

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

Poprzez optymalizację obrazów.

Istnieje wiele drobnych rzeczy, które możesz zrobić w całym procesie tworzenia obrazu, aby zoptymalizować rozmiary plików, szczególnie z myślą o swojej witrynie.

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

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

Czym jest optymalizacja obrazu?

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

Dlaczego optymalizacja obrazu jest ważna?

Ludzie mają krótkie okresy skupienia uwagi, jeśli chodzi o sieć, dlatego ważne jest, aby Twoja witryna ładowała się w dwie sekundy lub krócej. A jednym z najczęstszych czynników spowalniających Twoją witrynę są Twoje obrazy. (Nawet jeśli Twoja witryna internetowa działa na najlepszych serwerach, takich jak zarządzany host WordPress, obrazy mogą obniżać wydajność).

Korzystając z najlepszych praktyk w zakresie optymalizacji obrazu, zachowasz mały rozmiar pliku i szybki czas ładowania, zapewniając lepsze wrażenia użytkownikom witryny.

Jest jeszcze jeden powód, dla którego optymalizacja obrazu jest ważna, ale bezpośrednio powiązany z wynikami firmy. Oprócz spowolnienia Twojej witryny, obrazy zajmują miejsce na dysku na serwerze zasilającym Twoją witrynę. Większość dostawców usług hostingowych narzuca limit 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, co gorsza, zamknąć swoją witrynę.

Optymalizując obrazy, będziesz w stanie w pełni wykorzystać miejsce w witrynie i uniknąć tego 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 programu Photoshop, a kończąc na swojej witrynie.

Wykonaj następujące kroki, aby zoptymalizować obrazy w celu uzyskania lepszej wydajności witryny:

1. Porównaj swoją aktualną prędkość witryny.
2. Dowiedz się, jak wybrać najlepszy typ pliku obrazu.
3. Zmień rozmiar obrazów przed eksportem.
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ź swoją aktualną prędkość witryny

Zanim wykonasz całą tę pracę, aby zoptymalizować swoje obrazy, zacznij od uruchomienia testu szybkości na swojej stronie! Pod koniec będziesz mógł zobaczyć, jaki wywarłeś wpływ (możesz też podzielić się tym ze swoim zespołem lub szefem, aby uzyskać dodatkowe uznanie). Niektóre popularne narzędzia do testowania prędkości to:

• Google PageSpeed ​​Insights
• Narzędzia Pingdoma
• GTMetrix
• Test strony internetowej

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

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

Kiedy skończysz tworzyć obrazy (zapisując je z aparatu lub eksportując z narzędzia takiego jak Photoshop), będziesz mieć możliwość określenia typu pliku. Najpopularniejszymi typami plików używanych w Internecie są JPEG, PNG i GIF. I jak jestem pewien, że możesz się domyślić, wszystkie mają swoje zalety, wady i najlepsze praktyki podczas umieszczania ich w Twojej witrynie.

JPEG

Obrazy JPEG najlepiej nadają się do prezentowania 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ł z większością obrazów, które chcesz wykorzystać w swojej witrynie, z jednym głównym wyjątkiem: obrazami z przezroczystym tłem. (W tym celu zobacz następną sekcję o plikach PNG!)

Używając obrazu JPEG w swojej witrynie, 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 na stronę.

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

PNG

Jeśli nie masz zbyt wielu kolorów na swoim obrazie (takich jak płaskie ilustracje lub ikony) lub chcesz, aby miał on przezroczyste tło, polecam wyeksportować go jako plik 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 obrazu w Internecie są pliki GIF. Obsługują tylko 256 kolorów, więc musisz być selektywny w przypadku tego typu plików!

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

3. Zmień rozmiar zdjęć przed przesłaniem

Jednym z najłatwiejszych sposobów optymalizacji obrazów na potrzeby Internetu jest zmiana ich rozmiaru przed przesłaniem ich do witryny. Zwłaszcza jeśli pracujesz z nieprzetworzonymi obrazami z aparatu DSLR, 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ą prędkość witryny, nie zapewniając rzeczywistych korzyści.

Przycinając obrazy lub zmieniając ich rozmiar przed przesłaniem, zmniejszysz rozmiar pliku, co przyspieszy ładowanie witryny 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 Preview (dla komputerów Mac), Paint (dla Windows) lub Canva (narzędzie przeglądarki).

4. Kompresuj obrazy, aby zmniejszyć rozmiar pliku

Gdy masz już gotowy obraz, zapisany we właściwym formacie i przycięty do odpowiedniego rozmiaru, jest jeszcze jeden krok, który możesz wykonać, aby zoptymalizować go przed przesłaniem na swoją stronę: skompresuj go.

Ten proces pomoże zmniejszyć rozmiar pliku bez utraty zauważalnej 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 powoduje odrzucenie niektórych elementów zdjęcia, ale zwykle w sposób niezauważalny dla ludzkiego oka. Aby dowiedzieć się więcej o tych typach kompresji, polecam ten przewodnik od Imagify.

Jeśli widzisz, że konkretny obraz w Twojej witrynie ładuje się i powoli pojawia, 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 przeglądarkowe 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.
• Image Optimizer: darmowy dodatek do Local.

TinyPNG

To oparte na przeglądarce narzędzie optymalizuje obrazy przy użyciu inteligentnej kompresji stratnej, zmniejszając rozmiar pliku poprzez zmniejszenie liczby używanych kolorów. (Ale nie martw się, nawet tego 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 rozdęcie, zachowując jednocześnie najwyższą możliwą jakość obrazu.

JPEGmini

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

ZAMIESZKI

Radical Image Optimization Tool (RIOT) to bezpłatna aplikacja 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 Local

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ę w poszukiwaniu wszystkich plików graficznych, oszczędzając czas potrzebny na ich indywidualne kompresowanie i przyspieszając działanie 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 tak może być! Istnieje jednak prosty sposób na usprawnienie kilku z tych kroków, a mianowicie zainstalowanie wtyczki do optymalizacji obrazu w witrynie WordPress.

Mam kilka rekomendacji, a każda z nich ma unikalne cechy. Ale generalnie wtyczka do optymalizacji obrazu kompresuje i zmienia rozmiar obrazów po przesłaniu ich do witryny WordPress. Oznacza to, że możesz pominąć te kroki zamiast wykonywać je ręcznie, co zapewnia dużą oszczędność czasu.

Ta metoda jest również dobra, jeśli budujesz witryny dla klientów. Użytkownik końcowy i twórcy treści wywierają dużą presję, aby spróbować zapamiętać każdy krok procesu optymalizacji obrazu. Instalując wtyczkę, która wykona za nich większość pracy, pomożesz zapewnić szybkość i wydajność utworzonej witryny po jej przekazaniu.

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

• Chmura optymalizatora obrazu EWWW
• TinyPNG
• Kracken.io
• Wyobraź sobie

Chmura optymalizatora obrazu EWWW

Ta wtyczka WordPress automatycznie zoptymalizuje Twoje obrazy po przesłaniu ich do Twojej 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.

TinyPNG

Ta wtyczka WordPress stworzona przez zespół TinyPNG może optymalizować przesyłane obrazy JPEG i PNG. Jeśli jesteś fanem narzędzia opartego na przeglądarce, usprawnij ten proces dzięki ich 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, co daje 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: Zanim wybierzesz wtyczkę, koniecznie sprawdź, jak działają. Niektóre używają operacji obciążających serwer, które mogą powodować problemy w Twojej witrynie, podczas gdy inne używają opcji FTP, aby zmniejszyć obciążenie serwera WWW.

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

Nawet po wszystkich poprzednich krokach optymalizacyjnych są przypadki, w których nadal możesz pracować z dużymi rozmiarami plików lub dużą ilością obrazów na stronie, spowalniając szybkość witryny. W takich przypadkach czasami warto nie tylko zoptymalizować obrazy, ale także zoptymalizować proces ładowania, 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 — o stworzenie wrażenia szybszego ładowania obrazów, tak aby użytkownicy nie tylko wpatrywali się w pustą stronę podczas ładowania plików.

Jednym ze sposobów na to jest załadowanie najpierw obrazu o niższej jakości (LQI). Załadowanie mniejszej wersji obrazu przed załadowaniem pełnego rozmiaru daje użytkownikowi coś do obejrzenia w oczekiwaniu na wszystkie szczegóły. Daje to wrażenie szybszego ładowania, nawet jeśli technicznie wszystko ładuje się w tym samym tempie.

Popularnym sposobem na to jest technika „rozmycia”, której możesz nauczyć się zaimplementować w tym samouczku na temat CSS-Tricks.

7. Leniwe ładowanie obrazów witryny

Podobnie jak w przypadku techniki „rozmycia”, istnieje jeszcze jedna sztuczka, która pomoże nadać obrazom szybsze ładowanie: Ładowanie z opóźnieniem.

Gdy ktoś trafia na Twoją witrynę, zaczyna od góry strony. Prawdopodobnie przewinięcie całej strony zajmie im chwilę, zwłaszcza jeśli są zajęci. Zamiast próbować ładować wszystkie obrazy na raz, 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 wczytują się najpierw w całości, podczas gdy inne obrazy najpierw ładują symbol zastępczy, dopóki użytkownik nie przewinie do tej sekcji strony.

Leniwe ładowanie to świetna technika sama w sobie, a jeszcze potężniejsza w połączeniu z resztą tych wskazówek dotyczących optymalizacji obrazu! I jest to bardzo łatwe do zrobienia na stronie WordPress, dzięki wtyczce Smush.

Na tym kończy się nasz przewodnik krok po kroku, jak poprawić wydajność witryny poprzez optymalizację obrazów! Aby zobaczyć wpływ, jaki wywarło to na Twoją witrynę, przeprowadź kolejny test szybkości. jak się masz?

Dzięki odpowiednim narzędziom do optymalizacji obrazu będziesz w stanie szybko zobaczyć lepszą szybkość i wydajność witryny!