Jak zoptymalizować obrazy dla WordPress

Twoje obrazy powinny być pozytywne, a nie szkodliwe dla konfiguracji Twojej witryny. Powinny one pomóc Ci osiągnąć cele, które wyznaczyłeś swojej witrynie.

Powolna strona internetowa to koszmar każdego. Jako właściciel witryny powinieneś wiedzieć, że obrazy w ich surowych formatach to zła wiadomość dla szybkości Twojej witryny. Niska prędkość witryny obniża rankingi SEO i kosztuje odbiorców. Oprócz szybkości Twoje obrazy powinny być również dobrze rozmieszczone, aby pomóc Ci zdobyć i utrzymać jak największą liczbę użytkowników.

W tym artykule omówimy różne sposoby optymalizacji obrazów dla WordPressa. Optymalizacja obrazów nie jest możliwa do osiągnięcia jednym działaniem. Jest to połączenie kilku środków, które sprawiają, że Twoja witryna jest tak imponująca, jak chcesz. Pozwól nam przeprowadzić Cię przez te proste czynności.

Wybierz odpowiedni format obrazu

Jeśli twoje obrazy są wielokolorowe i mają wysoki kontrast, JPEG jest najlepszym formatem, aby zobaczyć różnicę. Możesz skompresować zdjęcia w tym formacie, aby zmniejszyć rozmiar pliku, ale w pewnym stopniu pogarsza to jakość. Z drugiej strony, jeśli Twoje obrazy są mniej wyrafinowane pod względem koloru, PNG jest najlepszą opcją. PNG ma przewagę nad JPEG z obsługą przezroczystości w obrazach. Jednak kompresja zdjęć PNG zapewnia lepszą jakość zdjęć, ale większe rozmiary plików.

Podczas edycji obrazów na komputerze będziesz musiał wybrać typ pliku, w którym chcesz zapisać obrazy. Najpopularniejszymi formatami obrazów są JPEG i PNG.

Na wynos: w przypadku wielu kolorowych zdjęć wybierz i skompresuj JPEG. Aby uzyskać wyraźniejsze i przezroczyste zdjęcia, wybierz PNG.

Zmień rozmiar swoich obrazów

Zmniejszenie wymiarów obrazów — niezależnie od ich formatu — zmniejsza rozmiary ich plików. Im mniejszy obrazek, tym bardziej się zmniejsza. Nie daj się jednak ponieść emocjom i przesadzaj: weź pod uwagę szerokość swojej witryny i upewnij się, że szerokość obrazu jest mniejsza. Jeśli zmniejszysz nowe zdjęcia, ich zawartość może być mniej widoczna.

Możliwe jest przesyłanie obrazów, które przekraczają rozmiar Twojej witryny w szerokości, które Twoja witryna będzie wyświetlać w miniaturach. Ale to nie usunie faktu, że masz w witrynie duży obraz, który spowalnia Twoją witrynę. Możesz zmniejszyć rozmiar pliku o ponad połowę, zmieniając rozmiar.

Jeśli nie zmieniłeś rozmiaru obrazu przed przesłaniem, możesz wybrać określone zdjęcia w bibliotece multimediów WordPress, wybrać edycję i zmienić ich rozmiar.

Przycinanie obrazów

Różnica między zmianą rozmiaru a kadrowaniem polega na tym, że zmiana rozmiaru zachowuje wszystkie elementy oryginalnego obrazu. Z drugiej strony przycinanie wycina niektóre krawędzie oryginalnego obrazu.

Zmiana rozmiaru obrazów oznacza, że ​​niektóre ich elementy staną się drobne i ledwo widoczne na dowolnym rozmiarze ekranu. Przycinanie pomaga ci, zwłaszcza gdy masz centralny punkt dla swojego obrazu. Możesz wyciąć niepotrzebne części obrazu, zmniejszyć plik, jednocześnie uwydatniając interesujące elementy.

Kompresowanie obrazów

Po zmianie rozmiaru i przycięciu obrazów możesz zrobić dodatkowy krok, kompresując obrazy. Obrazy JPEG można kompresować w procesie zwanym kompresją stratną. W tym procesie tracisz część danych oryginalnego obrazu, aby utworzyć mniejszy plik obrazu.

Tutaj będziesz musiał wybrać między rozmiarem obrazu a jakością. Zmniejszenie rozmiaru jest ostatecznym celem, ale odbywa się to kosztem jakości. Dlatego należy maksymalnie zmniejszyć rozmiar, nie naruszając funkcjonalności obrazu. Jednak jakość obrazu nie spada zbytnio przy kompresji. Musisz tylko sprawdzić wynik jakości i zdecydować, czy Ci się podoba.

Proces kompresji jest możliwy dzięki narzędziom do kompresji obrazu dostępnym online. TinyPNG to jedyne narzędzie do kompresji obrazu, które oferuje ponad 1 miliard obrazów zoptymalizowanych w formacie PNG i JPEG. Przedstawia idealny sposób na optymalizację obrazów przed przesłaniem ich do Twojej witryny.

Jak TinyPNG działa z PNG?

W przypadku plików PNG TinyPNG wykorzystuje inteligentną kompresję stratną, aby zmniejszyć rozmiar pliku. Mimo, że oznacza to selektywną redukcję kolorów obrazu, jest to zupełnie niezauważalne gołym okiem, a rozmiar pliku drastycznie się zmniejsza.

Zwykłe nieskompresowane obrazy PNG zawierają kombinacje 24-bitowych kolorów. Po kompresji za pomocą TinyPNG konwertujesz je na mniej i mniejsze obrazy w 8-bitowych kolorach. Proces ten, znany również jako kwantyzacja, wiąże się również z usuwaniem wszelkich niepotrzebnych metadanych. Dzięki TinyPNG zmniejszasz rozmiar pliku o ponad 70% i sprawiasz, że Twoje obrazy są w pełni kompatybilne z przezroczystością.

Jak dobrze działa z nowoczesnymi przeglądarkami?

Innym aspektem, który sprawia, że ​​TinyPNG jest wyjątkowy, jest obsługa wszystkich nowoczesnych przeglądarek. Pomimo odmowy przez Internet Explorer 6 uznania przezroczystości PNG, TinyPNG zapewnia przezroczyste tło w przeglądarce. Jeśli Twoja przeglądarka obsługuje animowane pliki PNG (Chrome, Firefox i Safari), wypróbuj je.

Kompresja JPEG

Jeśli chcesz kompresować JPEG, nie szukaj dalej. TinyPNG został początkowo zbudowany do obsługi inteligentnej kompresji obrazu JPEG i świetnie sobie z tym radzi.

Jeśli jesteś sfrustrowany powolnym ładowaniem swojej witryny, użyj TinyPNG przed przesłaniem obrazów do swojej witryny i poczuj przytłaczającą różnicę. Oszczędzi to przepustowość i przyspieszy ładowanie witryny dzięki kompresji wszystkich obrazów JPEG i PNG.

Wyświetlaj obrazy z CDN

Użytkownicy, którzy są daleko od serwera od Twojej witryny, mogą odczuwać wolniejsze ładowanie. Aby się tym zająć, możesz zainstalować CDN. CDN umożliwia odwiedzającym łączenie się przez najbliższy serwer. Po uzyskaniu adresu URL CDN skopiuj go do używanej wtyczki pamięci podręcznej. Zastąp adresy URL obrazów, tak aby zawierały adres URL Twojej sieci CDN. W ten sposób Twoje obrazy będą również wyświetlane odwiedzającym za pośrednictwem tego samego kryterium CDN.

Użyj leniwego ładowania

Naturą WordPressa jest ładowanie wszystkiego na stronie w tym samym czasie – w momencie, gdy zażądasz strony. Ponieważ obrazy ładują się wolniej niż tekst, spowalniają ładowanie stron.

Lazy loading zapewnia, że ​​obrazy znajdujące się pod interfejsem przeglądarki nie zostaną załadowane, gdy tylko zacznie się wczytywać strona. Zamiast tego najpierw załadują się zdjęcia u góry; następnie reszta zostanie załadowana, gdy odwiedzający przewinie do nich. W ten sposób Twoje strony ładują się szybko, pomimo zawartych na nich obrazów. Niektóre wtyczki, które ułatwiają leniwe ładowanie, wyświetlają wersję obrazu o niskiej jakości, dopóki właściwa nie zostanie załadowana.

Buforuj swoje obrazy

Jeśli chcesz mieć szybką stronę internetową, musisz wypróbować wtyczki pamięci podręcznej, jeśli jeszcze ich nie wypróbowałeś. Buforowanie treści na Twojej witrynie i stronach oznacza tworzenie ich wersji, aby były dostępne natychmiast na żądanie. Wtyczka gwiezdnej pamięci podręcznej umożliwia buforowanie obrazów za pomocą „buforowania przeglądarki” – łatwo dostępnej alternatywy.

Nazwij swoje pliki graficzne odpowiednio

Podczas przesyłania zdjęć upewnij się, że je nazwałeś. Gdy to zrobisz, może się okazać, że Twoja wtyczka automatycznie dodaje do nich tekst alternatywny. Ta sytuacja jest idealna, ponieważ najlepszym sposobem na nazwanie obrazów jest prosty opis. Dodanie zbyt wielu słów kluczowych nie jest dla Ciebie odpowiednie. Słowa kluczowe dają przewagę, jeśli chodzi o SEO. Jeśli jednak masz ich zbyt wiele na swoich zdjęciach, ryzykujesz kary za wypychanie!

Zoptymalizuj swoje obrazy pod kątem prezentowania w Google Snippets

Uzyskiwanie fragmentów rozszerzonych w wynikach wyszukiwania nie jest łatwe. Musisz mieć kilka słów kluczowych, które dadzą użytkownikom precyzyjne i zwięzłe odpowiedzi. Utwórz obraz opisujący słowa kluczowe, na które kierujesz reklamy. Referencje dotyczące jakości użytkownika dla treści faktycznych, które mają inspirować kliknięcia. Jeśli okaże się, że nie pojawia się na pierwszej stronie dla słowa kluczowego, edytuj, aby ulepszyć treść.

Używaj też wtyczek danych strukturalnych (schematu), aby zwiększyć szanse na posiadanie fragmentów rozszerzonych.

Użyj oryginalnych obrazów

Unikaj używania obrazów z innych stron internetowych. Spowalniają Cię, ponieważ wiążą się z dodatkowymi prośbami o zadowolenie serwera strony, z której pożyczyłeś zdjęcie.

Dolna linia

Oto nasze instrukcje, jak zoptymalizować obrazy pod WordPress. Jak wspomnieliśmy, nie można wybrać jednego i biegać z nim, oczekując dobrych wyników. Optymalizacja obrazu wymaga zunifikowanego wysiłku kilku strategii. Upewnij się, że rozumiesz pomysły, stosujesz je i przygotuj się na zadziwienie nie tylko odwiedzających, ale także siebie.