Jak zoptymalizować obrazy pod kątem wydajności internetowej bez utraty jakości

Czy wiesz, że optymalizacja zdjęć przed przesłaniem do WordPress może mieć ogromny wpływ na szybkość Twojej witryny?

Rozpoczynając nowy blog, wielu początkujących po prostu przesyła obrazy bez optymalizacji ich pod kątem sieci. Te duże pliki graficzne sprawiają, że Twoja strona jest wolniejsza.

Możesz to naprawić, korzystając z najlepszych praktyk optymalizacji obrazu w ramach regularnej procedury blogowania.

W tym artykule pokażemy, jak zoptymalizować obrazy pod kątem szybszej wydajności internetowej bez utraty jakości. Będziemy również udostępniać automatyczne wtyczki do optymalizacji obrazu dla WordPress, które mogą ułatwić Ci życie.

Ponieważ jest to kompleksowy przewodnik po optymalizacji obrazów w Internecie, stworzyliśmy łatwą do naśladowania tabelę treści:

• Co to jest optymalizacja obrazu? (zoptymalizowane vs unoptimized obrazy)
• Dlaczego Optymalizacja obrazu jest ważna? Jakie są korzyści?
• Jak zapisywać i optymalizować obrazy pod kątem wydajności sieci?
• Najlepsze narzędzia i programy do optymalizacji obrazu
• Najlepsze wtyczki do optymalizacji obrazu dla WordPress

Co To jest optymalizacja obrazu? (Zoptymalizowane vs Unoptimized obrazy)

Optymalizacja obrazu to proces zapisywania i dostarczania obrazów w jak najmniejszym rozmiarze pliku bez obniżania ogólnej jakości obrazu.

Choć proces ten wydaje się skomplikowany, w dzisiejszych czasach jest dość łatwy. Możesz użyć jednej z wielu wtyczek i narzędzi do optymalizacji obrazu, aby automatycznie kompresować obrazy nawet o 80% bez widocznej utraty jakości obrazu.

Oto przykład zoptymalizowanego obrazu vs unoptimized:

Jak widać, po prawidłowej optymalizacji ten sam obraz może być o 75% mniejszy niż oryginał bez utraty jakości.

Jak działa Optymalizacja obrazu?

Mówiąc prościej, Optymalizacja obrazu działa przy użyciu technologii kompresji, takich jak „stratny” i „bezstratny”, co pomaga zmniejszyć ogólny rozmiar pliku bez zauważalnej utraty jakości.

Co to znaczy zoptymalizować obrazy?

Jeśli kiedykolwiek otrzymałeś zalecenie optymalizacji obrazów przez wsparcie hostingowe WordPress lub narzędzie do testowania prędkości, oznacza to, że musisz zmniejszyć rozmiar plików obrazów, optymalizując je pod kątem Internetu.

Dlaczego Optymalizacja obrazu jest ważna? Jakie są korzyści z optymalizacji obrazu?

Chociaż istnieje wiele korzyści z optymalizacji zdjęć, poniżej znajdują się najlepsze z nich, które powinieneś wiedzieć:

• Szybsza prędkość witryny
• Ulepszone rankingi SEO
• Wyższy ogólny współczynnik konwersji dla sprzedaży i leadów
• Mniej pamięci i przepustowości (co może zmniejszyć koszty hostingu i CDN)
• Szybsze tworzenie kopii zapasowych witryny (zmniejsza również koszty przechowywania kopii zapasowych)

Poza wideo, obrazy są kolejnym najcięższym elementem na stronie internetowej. Według archiwum HTTP, obrazy stanowią średnio 21% całkowitej wagi strony internetowej.

Ponieważ wiemy, że szybkie strony internetowe zajmują wyższą pozycję w wyszukiwarkach (SEO) i mają lepsze konwersje, Optymalizacja obrazu jest czymś, co musi zrobić każda witryna biznesowa, jeśli chce odnieść sukces w Internecie.

Teraz możesz się zastanawiać, jak duża różnica może naprawdę zrobić Optymalizacja obrazu?

Według badania Strangeloop, jednosekundowe opóźnienie w czasie ładowania strony może kosztować 7% sprzedaży, 11% mniej odsłon i 16% spadek satysfakcji klienta.

Jeśli nie są to wystarczające powody, aby przyspieszyć swoją stronę, powinieneś wiedzieć, że wyszukiwarki takie jak Google również preferencyjne traktowanie SEO w celu szybszego ładowania stron internetowych.

Oznacza to, że optymalizując swoje obrazy pod kątem Internetu, możesz zarówno poprawić szybkość witryny, jak i zwiększyć rankingi SEO WordPress.

Video Tutorial

Jeśli wolisz pisemne instrukcje, po prostu czytaj dalej.

Jak zapisywać i optymalizować obrazy pod kątem wydajności sieci?

Kluczem do skutecznej optymalizacji obrazu pod kątem wydajności internetowej jest znalezienie idealnej równowagi między NAJNIŻSZYM rozmiarem pliku a akceptowalną jakością obrazu.

Trzy rzeczy, które odgrywają ogromną rolę w optymalizacji obrazu to:

• Format pliku obrazu (JPEG vs PNG vs GIF)
• Kompresja (wyższa kompresja = mniejszy rozmiar pliku)
• Wymiary obrazu (wysokość i szerokość)

Wybierając odpowiednią kombinację tych trzech, możesz zmniejszyć rozmiar obrazu nawet o 80%.

Przyjrzyjmy się każdemu z nich bardziej szczegółowo.

1. Format Pliku Obrazu

Dla większości właścicieli witryn tylko trzy ważne formaty plików graficznych to JPEG, PNG i GIF. Wybór odpowiedniego typu pliku odgrywa ważną rolę w optymalizacji obrazu.

Aby zachować prostotę, chcesz używać JPEG do zdjęć lub obrazów z dużą ilością kolorów, PNG do prostych obrazów lub gdy potrzebujesz przezroczystych obrazów, a GIF Tylko do animowanych obrazów.

Dla tych, którzy nie znają różnicy między każdym typem pliku, format Obrazu PNG jest nieskompresowany, co oznacza, że jest to obraz o wyższej jakości. Minusem jest to, że rozmiary plików są znacznie większe.

Z drugiej strony, JPEG jest skompresowanym formatem pliku, który nieznacznie obniża jakość obrazu, aby zapewnić znacznie mniejszy rozmiar pliku.

Podczas gdy GIF używa tylko 256 kolorów wraz z bezstratną kompresją, co czyni go najlepszym wyborem dla animowanych obrazów.

Na WPBeginner używamy wszystkich trzech formatów obrazu w zależności od typu obrazu.

2. Kompresja

Następną rzeczą jest kompresja obrazu, która odgrywa ogromną rolę w optymalizacji obrazu.

Dostępne są różne typy i poziomy kompresji obrazu. Ustawienia dla każdego z nich będą się różnić w zależności od używanego narzędzia do kompresji obrazu.

Większość narzędzi do edycji obrazu, takich jak Adobe Photoshop, on1 Photo, GIMP, Affinity Photo i inne, ma wbudowane funkcje kompresji obrazu.

Możesz również normalnie zapisywać obrazy, a następnie użyć narzędzia internetowego, takiego jak TinyPNG lub JPEG Mini, aby ułatwić kompresję obrazu.

Chociaż jest to trochę ręczne, te dwie metody pozwalają na kompresję obrazów przed przesłaniem ich do WordPress, i to właśnie robimy na WPBeginner.

Istnieje również kilka popularnych wtyczek WordPress, takich jak Optimole, EWWW Image Optimizer i inne, które mogą automatycznie kompresować obrazy po pierwszym przesłaniu. Wielu początkujących, a nawet duże korporacje wolą korzystać z tych wtyczek do optymalizacji obrazu, ponieważ jest to łatwe i wygodne.

Będziemy dzielić się więcej o tych wtyczek WordPress w dalszej części artykułu.

3. Wymiary Obrazu

Zwykle, gdy importujesz zdjęcie z telefonu lub aparatu cyfrowego, ma ono bardzo wysoką rozdzielczość i duże wymiary pliku (wysokość i szerokość).

Zazwyczaj zdjęcia te mają rozdzielczość 300 DPI i wymiary zaczynające się od 2000 pikseli i więcej. Te wysokiej jakości zdjęcia doskonale nadają się do druku lub publikacji na pulpicie. Nie są odpowiednie dla stron internetowych.

Zmniejszenie rozmiaru pliku do czegoś bardziej rozsądnego może znacznie zmniejszyć rozmiar pliku obrazu. Możesz po prostu zmienić rozmiar obrazów za pomocą oprogramowania do edycji obrazów na komputerze.

Na przykład zoptymalizowaliśmy zdjęcie o oryginalnym rozmiarze 1,8 MB, rozdzielczości 300 DPI i wymiarach obrazu 4900×3200 pikseli.

Wybraliśmy format jpeg dla wyższej kompresji i zmieniliśmy wymiary na 1200×795 pikseli, a to zmniejszyło Rozmiar pliku obrazu do 103 KB. To o 94% mniej niż oryginalny Rozmiar pliku.

Teraz, gdy znasz trzy ważne czynniki optymalizacji obrazu, przyjrzyjmy się różnym narzędziom do optymalizacji obrazu dla właścicieli witryn.

Najlepsze narzędzia i programy do optymalizacji obrazu

Jak już wspomnieliśmy wcześniej, większość programów do edycji obrazów zawiera ustawienia optymalizacji i kompresji obrazu.

Poza oprogramowaniem do edycji obrazów istnieje również kilka potężnych bezpłatnych narzędzi do optymalizacji obrazów, których można użyć do optymalizacji obrazów w Internecie (za pomocą kilku kliknięć).

Zalecamy korzystanie z tych narzędzi do optymalizacji obrazów przed przesłaniem ich do WordPress, szczególnie jeśli jesteś perfekcjonistą.

Ta metoda pomaga zaoszczędzić miejsce na dysku na koncie hostingowym WordPress i gwarantuje Najszybszy obraz o najlepszej jakości, ponieważ ręcznie przeglądasz każdy obraz.

Adobe Photoshop

Adobe Photoshop to oprogramowanie premium, które zawiera funkcję zapisywania obrazów zoptymalizowanych pod kątem Internetu. Po prostu otwórz swój obraz i kliknij opcję „Plik” Zapisz dla sieci”.

Spowoduje to otwarcie nowego okna dialogowego. Po prawej stronie możesz ustawić różne formaty obrazów. W przypadku formatu JPEG zobaczysz różne opcje jakości. Po wybraniu opcji wyświetli się również Rozmiar pliku w lewym dolnym rogu.

GIMP

GIMP jest darmową i otwartą alternatywą dla popularnego Adobe Photoshop. Może być używany do optymalizacji obrazów dla sieci. Minusem jest to, że nie jest tak łatwy w użyciu, jak niektóre inne rozwiązania na tej liście.

Najpierw musisz otworzyć swój obraz w programie GIMP, a następnie wybrać Plik ” Eksportuj Jako opcja. Spowoduje to wyświetlenie okna dialogowego Zapisz plik. Nadaj plikowi nową nazwę, a następnie kliknij przycisk Eksportuj.

Spowoduje to wyświetlenie opcji eksportu obrazu. W przypadku plików jpeg można wybrać poziom kompresji, aby zmniejszyć rozmiar pliku. Na koniec kliknij przycisk Eksportuj, aby zapisać zoptymalizowany plik obrazu.

TinyPNG

TinyPNG to darmowa aplikacja internetowa, która wykorzystuje inteligentną technikę kompresji stratnej, aby zmniejszyć rozmiar plików PNG. Wszystko, co musisz zrobić, to wejść na ich stronę internetową i przesłać swoje zdjęcia (proste przeciąganie i upuszczanie).

Skompresują obraz i podadzą link do pobrania. Możesz użyć ich siostrzanej strony internetowej, TinyJPG, do kompresji obrazu JPEG.

Mają również rozszerzenie dla programu Adobe Photoshop, którego używamy w ramach naszego procesu edycji obrazu, ponieważ łączy w sobie najlepsze cechy TinyPNG i TinyJPG w Photoshopie.

Dla programistów mają API do automatycznej konwersji obrazów, a dla początkujących mają wtyczkę WordPress, która może automatycznie zrobić to za Ciebie (więcej na ten temat później).

JPEG Mini

JPEGmini wykorzystuje bezstratną technologię kompresji, która znacznie zmniejsza rozmiar obrazów bez wpływu na ich jakość percepcyjną. Możesz również porównać jakość oryginalnego obrazu i skompresowanego obrazu.

Możesz użyć ich wersji internetowej za darmo lub kupić program na swój komputer. Mają również płatny interfejs API do automatyzacji procesu dla Twojego serwera.

ImageOptim

ImageOptim to narzędzie Mac, które pozwala kompresować obrazy bez utraty jakości, znajdując najlepsze parametry kompresji i usuwając niepotrzebne profile kolorów.

Alternatywą dla tego systemu Windows jest Trimage.

Najlepsze wtyczki do optymalizacji obrazu dla WordPress

Wierzymy, że najlepszym sposobem na optymalizację zdjęć jest zrobienie tego przed przesłaniem ich do WordPress. Jeśli jednak prowadzisz witrynę z wieloma autorami lub potrzebujesz zautomatyzowanego rozwiązania, możesz wypróbować wtyczkę do kompresji obrazu WordPress.

Poniżej znajduje się nasza lista najlepszych wtyczek do kompresji obrazu WordPress:

1. Optimole-popularny plugin zespołu ThemeIsle.
2. EWWW Image Optimizer
3. Kompresuj obrazy JPEG i PNG-wtyczka zespołu tinypng wspomniana powyżej w artykule.
4. Imagify-plugin przez popularny zespół wtyczek wp Rocket.
5. ShortPixel Image Optimizer
6. WP Smush
7. reSmush.it

Korzystanie z dowolnej z tych wtyczek do optymalizacji obrazu WordPress pomoże Ci przyspieszyć witrynę.

Końcowe przemyślenia i najlepsze praktyki optymalizacji obrazu

Jeśli nie zapisujesz obrazów zoptymalizowanych pod kątem Internetu, musisz zacząć to robić już teraz. To zrobi ogromną różnicę w szybkości witryny, a twoi użytkownicy będą ci za to wdzięczni.

Nie wspominając o tym, że szybsze strony internetowe są świetne do SEO,a prawdopodobnie zobaczysz wzrost w rankingach wyszukiwarek.

Poza optymalizacją obrazu dwie rzeczy, które znacznie pomogą Ci przyspieszyć witrynę, to Korzystanie z wtyczki buforującej WordPress i korzystanie z CDN WordPress.

Alternatywnie możesz użyć zarządzanej firmy hostingowej WordPress, ponieważ często oferują zarówno buforowanie, jak i CDN jako część platformy.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak zoptymalizować swoje obrazy w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat poprawy bezpieczeństwa WordPress i najlepszych wtyczek WordPress dla stron biznesowych.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.