Jak zoptymalizować obrazy dla WordPress

Istnieje wiele powodów, dla których warto (i należy) umieszczać obrazy w treści WordPress. Obrazy pomagają utrzymać zaangażowanie czytelników. Są także sposobem na dzielenie długich fragmentów treści i ulepszanie optymalizacji pod kątem wyszukiwarek (SEO). Mogą jednak również spowolnić Twoją witrynę.

Na szczęście dostępnych jest sporo zasobów, które mogą pomóc w optymalizacji obrazów. Oznacza to, że łatwiej będzie przezwyciężyć wolne prędkości strony, które mogą być szkodliwe dla ogólnego sukcesu Twojej witryny.

W tym artykule przyjrzymy się, dlaczego duże obrazy mogą obniżać Twoją witrynę. Następnie przyjrzymy się, jak skutecznie skompresować pliki multimedialne, wraz z kilkoma podstawowymi wskazówkami dotyczącymi optymalizacji obrazu, które mogą poprawić SEO Twojej witryny.

Dlaczego powinieneś optymalizować swoje obrazy dla WordPress

Obrazy są cennym i ważnym elementem każdej strategii dotyczącej treści. Mogą jednak być również jedną z głównych przyczyn wolnego czasu ładowania strony.

Wolna strona internetowa jest problemem, ponieważ może odstraszyć użytkowników. W rzeczywistości strony, które ładują się co najmniej pięć sekund, odnotowują średnio 90-procentowy wzrost prawdopodobieństwa, że ​​użytkownik odrzuci stronę (opuści ją po obejrzeniu tylko jednej strony).

Chociaż istnieje wiele czynników, które mogą spowolnić Twoją witrynę, obrazy i pliki multimedialne zajmują aż 63 procent przepustowości nowoczesnych witryn internetowych. W związku z tym ważne jest, aby optymalizować obrazy przesyłane do witryny.

Warto również zauważyć, że szybkość witryny jest czynnikiem rankingowym Google. Oznacza to, że to, jak szybko lub wolno ładuje się Twoja strona, w pewnym stopniu zadecyduje o jej pozycji w wynikach wyszukiwania. Na PageRank wpływa wiele czynników, a obrazy należą do kategorii „Użyteczność stron internetowych”.

Optymalizacja obrazu polega tak naprawdę na poprawie dwóch rzeczy:

• Liczba bajtów używanych do kodowania każdego piksela obrazu
• Całkowita liczba użytych pikseli.

Innymi słowy, optymalizacja oznacza uzyskanie najlepszej możliwej jakości z najmniejszej liczby pikseli i bajtów. Zmniejsza to rozmiary plików multimedialnych i może mieć znaczący wpływ na ogólną szybkość witryny.

Zoptymalizuj swoje obrazy przed przesłaniem do WordPress

Ostatecznie najlepszym scenariuszem dla Twojej witryny jest optymalizacja obrazów przed ich przesłaniem. Ma to na celu uniknięcie duplikatów lub wielu wersji jednego obrazu. To zniweczyłoby cel zmniejszenia obciążenia witryny poprzez optymalizację obrazu.

Mając to na uwadze, przyjrzyjmy się niektórym czynnikom, które należy wziąć pod uwagę przy podejmowaniu decyzji o optymalizacji multimediów w witrynie.

Formaty plików graficznych

Na początek przyjrzyjmy się różnym rodzajom formatów obrazów, które istnieją. Zrozumienie, czym różni się każdy z nich i kiedy najlepiej z nich korzystać, może pomóc w budowaniu bardziej usprawnionego wykorzystania obrazów.

Dwa najpopularniejsze formaty obrazów używane online to JPEG i PNG. Oba te formaty składają się z pikseli. Piksele rozciągają się, gdy zmieniasz rozmiar obrazu, co czasami może powodować jego rozmycie. Jednak te typy obrazów mają różne mocne i słabe strony.

Kiedy używać plików JPEG

Pliki JPEG są dobrym wyborem zarówno do druku, jak i treści internetowych. Ten rodzaj pliku obrazu wykorzystuje tak zwany format „stratny”. Gdy większy obraz jest konwertowany do formatu JPEG, niektóre informacje zawarte w tym pliku są tracone.

Te informacje nie są potrzebne do zwykłego wyświetlenia obrazu. Jednak oznacza to, że konwersja do formatu JPEG skutkuje mniejszym rozmiarem pliku, ale może to wymagać pewnego poświęcenia ogólnej jakości obrazu. Na szczęście spadek jakości nie jest zbyt zauważalny, zwłaszcza w przypadku mniejszych zdjęć.

Kiedy używać PNG

Pliki PNG są również przydatne w przypadku treści internetowych, podobnie jak pliki JPEG, ale w inny sposób. Ponieważ pliki PNG mogą mieć na przykład przezroczyste tła, są bardziej wszechstronne i przydatne do projektowania grafiki internetowej.

Pliki PNG używają „bezstratnego” formatu pliku. Oznacza to, że wszystkie informacje o obrazie są zachowywane podczas kompresji pliku. W rezultacie są one zwykle wyższej jakości, ale oferują mniejszą poprawę rozmiaru pliku i szybkości strony. Są dobrą opcją dla grafiki i ikon oraz obrazów o bardzo wysokiej jakości.

Rozmiar obrazu

Czas ściąć wzdęcia. Dostarczanie przeskalowanych obrazów to jeden z najprostszych i najskuteczniejszych sposobów optymalizacji obrazów. Dlaczego tak skuteczny? Skalowanie obrazu zagwarantuje, że nie dostarczysz więcej pikseli niż potrzeba do wyświetlenia zasobu w zamierzonym rozmiarze w przeglądarce.

Wiele witryn próbuje dostarczać duże, nieskalowane obrazy i polega na zmianie ich rozmiaru przez przeglądarkę, co skutkuje wykorzystaniem dodatkowych zasobów i wolniejszą szybkością witryny. Jeśli naturalny rozmiar obrazu to 820×820 pikseli, a przeglądarka wyświetla go jako 400×400 pikseli… to 32 400 zbędnych pikseli!

Przejrzystość i szybkość ładowania strony ma wiele wspólnego z urządzeniem, na którym wyświetlany jest obraz (telefon komórkowy, komputer stacjonarny itp.). Na przykład obraz 4K może dobrze wyglądać na 27-calowym monitorze.

Jednak gdy odwiedzający załaduje stronę z tym obrazem, przeglądarka najpierw wyrenderuje plik w pełnej rozdzielczości, a następnie przeskaluje go w dół, aby zmieścił się na ekranie. Jeśli używają urządzenia mobilnego, które nie jest w stanie obsłużyć niczego większego niż 400 pikseli, prawdopodobnie przegapią Twoje treści.

Mając to na uwadze, niektóre najlepsze praktyki podczas eksportowania obrazów obejmują:

• Zachowaj rozmiary plików obrazów poniżej kilkuset kilobajtów, zapisując je jako „zoptymalizowane pod kątem Internetu” pliki JPEG lub PNG.
• Standardem internetowym dla obrazów jest rozdzielczość 72 punktów na cal (dpi), którą można osiągnąć, zapisując obrazy w formacie opisanym powyżej.

Możesz użyć programu Photoshop, Lightroom lub podobnego edytora, aby zmniejszyć rozmiar obrazu do około 1500 pikseli lub mniej szerokości. W programie Photoshop wystarczy przejść do opcji Obraz > Rozmiar obrazu , aby ręcznie dostosować wymiary i rozdzielczość obrazu. Możesz także przejść do Plik > Eksportuj > Zapisz do Internetu, aby zoptymalizować obrazy do przesłania do Internetu:

Jeśli nie zamierzasz wyświetlać ostrych i żywych zdjęć na większym monitorze, możesz jeszcze bardziej zmniejszyć rozmiar obrazu.

Jeśli pracujesz z Lightroom, przejdź do Plik > Eksportuj , aby ręcznie dostosować rozmiar obrazu podczas eksportowania:

Rozmiar i rozdzielczość obrazu to tylko część układanki. Jeśli chodzi o optymalizację obrazów, będziesz również chciał zrozumieć kompresję i efektywnie z niej korzystać.

Kompresja obrazu

W skrócie, kompresja obrazu to sposób na zminimalizowanie rozmiaru (w bajtach) pliku graficznego, bez obniżania jakości obrazu do niedopuszczalnego poziomu. Jak omówiliśmy, obrazy o wysokiej rozdzielczości, które są niepotrzebnie duże w rozmiarze pliku, mogą dramatycznie wpłynąć na szybkość strony.

Z drugiej strony zoptymalizowane obrazy są średnio o 40 procent jaśniejsze niż obrazy niezoptymalizowane. Zasadniczo należy zoptymalizować wszystkie obrazy i inne multimedia przesyłane do witryny przed procesem przesyłania lub w jego trakcie.

Kompresja stratna vs bezstratna

Jak wspomnieliśmy wcześniej, pliki JPEG i PNG używają dwóch różnych typów kompresji obrazu. Kompresja bezstratna zachowuje wszystkie dane z oryginalnego pliku bez utraty jakości.

W przypadku kompresji bezstratnej zwykle dzielisz plik na „mniejszą” formę w celu przesłania lub przechowywania. Następnie informacje są ponownie składane na drugim końcu, dzięki czemu można ich ponownie użyć.

Z drugiej strony kompresja stratna usuwa część danych zawartych w pliku obrazu. Może to skutkować większym spadkiem jakości, ale także bardziej znaczącą poprawą szybkości strony. Możesz nawet dostosować stopień kompresji, aby osiągnąć równowagę między jakością a wydajnością.

Wtyczki do kompresji obrazu

Szybko ładowane obrazy oznaczają szybszą witrynę i lepsze SEO. Oto kilka różnych wtyczek do optymalizacji obrazu, które pomogą Ci w kompresji obrazu.

Kompresja i optymalizacja obrazu Smush

Wtyczka do kompresji obrazu Smush działa w celu zmiany rozmiaru, optymalizacji i kompresji wszystkich twoich obrazów w Internecie, dzięki czemu ładują się szybciej niż wcześniej. Jeśli Twoja witryna jest bogata w zdjęcia, ta wtyczka jest niezbędna.

Optymalizator obrazu ShortPixel

Wtyczka Image Optimizer firmy ShortPixel kompresuje wszystkie przeszłe i przyszłe obrazy oraz pliki PDF przesłane do Twojej biblioteki multimediów. Wtyczka zapewnia kompresję stratną i bezstratną dla większości typów plików. Jeśli jesteś fotografem, możesz wybrać błyszczącą kompresję JPEG, która wykorzystuje wysokiej jakości stratny algorytm optymalizacji.

Kompresuj obrazy JPEG i PNG

Chcesz po prostu zoptymalizować pliki JPEG i PNG? Ta wtyczka korzysta z usług kompresji obrazu TinyJPG i TinyPNG, aby pomóc Ci w kompresji obrazu. Obrazy JPEG są kompresowane średnio o 40-60 procent, a obrazy PNG o 50-80 procent, bez widocznej utraty jakości.

Optymalizator obrazu EWWW

Optymalizator obrazu EWWW działa podwójnie. Optymalizuje zarówno istniejące obrazy w Twojej witrynie, jak i dba o nowe, które przesyłasz. Ponadto zapewnia dużą kontrolę nad tym, jak (i ​​ile) obrazy są kompresowane.

Optymalizator obrazu Kraken.io

Wreszcie, Kraken.io Image Optimizer jest również przydatny do optymalizacji zarówno nowych, jak i istniejących multimediów. Obsługuje bezstratną i „inteligentną” kompresję stratną, ułatwiając uzyskiwanie wysokiej jakości obrazów przy mniejszych rozmiarach plików.

Przedstawiony obraz

Wyróżniony obraz nie jest wstawiany do treści posta WordPress, ale jest używany strukturalnie w całym motywie. Może pojawić się na przykład jako miniatura obok tytułu posta lub w nagłówku podczas przeglądania określonego posta.

Większość motywów i widżetów opiera się na polecanych obrazach, więc nie jest to coś, co chcesz pominąć. Wyróżnione obrazy pozwalają na większą personalizację; będziesz mieć możliwość wyświetlania unikalnych niestandardowych obrazów nagłówków dla określonych postów i stron lub ustawiania miniatur dla specjalnych funkcji Twojego motywu.

Gdy już zdecydujesz, jaki rozmiar ma mieć wyróżniony obraz, ten rozmiar pozostanie ustawiony dla wszystkich przyszłych wyróżnionych obrazów. Rozmiar, który powinieneś wybrać, zależy od motywu Twojej witryny WordPress i układu Twoich postów.

Polecane obrazy są zwykle szersze niż wtedy, gdy są wysokie, i mają szerokość od 500 do 900 pikseli. Najlepiej też wybrać obraz o wysokiej rozdzielczości, a nie pikselowany.

Porada od specjalistów: aby kontrolować media wyświetlane za każdym razem, gdy post lub strona jest udostępniana na Facebooku lub Twitterze, zainstaluj wtyczkę Yoast SEO. Będziesz mógł nie tylko dostosować tytuł i opis, ale także przesłać odpowiednie rozmiary obrazu dla każdego kanału społecznościowego.

Zoptymalizuj swoje obrazy po przesłaniu do WordPress

Zalecamy optymalizację zdjęć przed ich przesłaniem. Jeśli jednak nie jest to możliwe lub chcesz zoptymalizować obrazy, które już znajdują się w Twojej witrynie, nadal możesz to zrobić. Istnieje kilka metod, które mogą pomóc w optymalizacji treści na żywo.

Leniwe ładowanie obrazów

Zwykle, gdy ktoś odwiedza stronę internetową, zaczyna się ładować cała jej zawartość. Oznacza to, że w przypadku strony zawierającej dużo treści może minąć trochę czasu, zanim wszystko się pojawi.

„Ładowanie z opóźnieniem” polega na dostosowaniu sposobu ładowania treści w witrynie. Instruuje Twoją witrynę, aby skupiła się na pierwszym załadowaniu tekstu, obrazów i innych elementów, które są natychmiast widoczne. Dopiero potem zacznie ładować zawartość, która jest dostępna tylko przez przewinięcie strony w dół. To świetny sposób na przyspieszenie działania witryny i poprawę wrażeń odwiedzających.

Najłatwiejszym sposobem na dodanie leniwego ładowania do witryny jest użycie wtyczki, takiej jak Lazy Load.

Jest to narzędzie od WP Rocket, które pomaga zmniejszyć liczbę żądań wysyłanych jednocześnie do serwera WWW Twojej witryny. Zastępuje nawet obrazy zastępcze dla filmów z YouTube, dzięki czemu rzeczywisty film będzie ładowany tylko w razie potrzeby.

Obrazy w pamięci podręcznej

Innym sposobem na zwiększenie szybkości witryny jest „buforowanie”. Wiąże się to z zapisywaniem niektórych danych Twojej witryny w miejscu, do którego odwiedzający ma łatwiejszy i szybszy dostęp, często na serwerze firmy zewnętrznej bliżej miejsca, w którym się znajduje, lub w przeglądarce.

Istnieje wiele sposobów na osiągnięcie buforowania za pomocą kodowania, wtyczek i innych narzędzi. Tutaj w WP Engine domyślnie wdrażamy solidne buforowanie we wszystkich naszych witrynach. Jest to korzystne dla zmniejszenia wpływu wszystkich treści na szybkość strony, a nie tylko obrazów.

Usuń dane EXIF

Dane EXIF ​​są przechowywane jako część pliku obrazu i zawierają informacje o miejscu i sposobie wykonania zdjęcia. Jest automatycznie dodawany do obrazów przez aparaty i generalnie nie jest potrzebny do plików internetowych.

Dlatego usunięcie tych danych z obrazów może przyspieszyć działanie stron, chociaż wpływ prawdopodobnie nie będzie duży. Niestety obecnie nie ma zaktualizowanych wtyczek, które mogłyby Ci w tym pomóc. Jeśli więc używasz w swojej witrynie wielu zdjęć i martwisz się o dane EXIF, skontaktuj się z programistą w celu uzyskania pomocy.

Unikaj przekierowań adresów URL obrazów

Wreszcie innym elementem, który może spowolnić Twoje strony, jest to, że Twoje obrazy powodują przekierowania. Dzieje się tak najczęściej, gdy linkują gdzieś indziej.

Z tego powodu należy unikać umieszczania w witrynie obrazów z zewnętrznych źródeł. Zamiast tego, jeśli to możliwe, zapisz i prześlij każdy obraz lub fragment multimediów bezpośrednio do swojej witryny. Możesz także upewnić się, że Twoje obrazy nie prowadzą do niczego, na przykład do oddzielnej strony multimedialnej.

Optymalizacja obrazów dla wyszukiwarek

Formatowanie tytułów obrazów to kolejny ważny krok w optymalizacji obrazów. Oznacza to, że nazwa pliku obrazu jest odpowiednia do jego zawartości. Gdy to zrobisz, jest bardziej prawdopodobne, że pojawią się one w powiązanych wynikach wyszukiwania grafiki za pośrednictwem wyszukiwarek.

Zwiększy to widoczność i dostępność Twojej marki, a także ruch w Twojej witrynie dzięki częstszemu wyświetlaniu obrazów Twojej witryny w wynikach wyszukiwania grafiki Google. Optymalizacja obrazu zajmuje bardzo mało czasu i może mieć ogromny wpływ na ruch w Twojej witrynie.

Oto kilka dodatkowych wskazówek, które pomogą Twoim obrazom uzyskać wyższą pozycję.

Tekst alternatywny

Tekst alternatywny, znany również jako „tekst alternatywny” lub „znacznik alternatywny”, to atrybut dodawany do obrazu w formacie HTML. Tekst alternatywny pomaga wyszukiwarkom zrozumieć, o czym jest Twój obraz, opisując, co zawiera i jaki jest jego cel.

Google polega na tekście alternatywnym, aby określić, czym jest obraz, ponieważ wszystko, co „widzi”, to to, co jest w tagu HTML. Używając mocnego, opisowego tekstu alternatywnego do obrazów, istnieje większe prawdopodobieństwo, że Twoja witryna zostanie odpowiednio wymieniona w wynikach wyszukiwania.

W WordPress możesz dodać tekst alternatywny do swoich obrazów na dwa sposoby. Po pierwsze, możesz dodać go do obrazów, które zostały umieszczone w postach, klikając obraz i korzystając z opcji Ustawienia obrazu po prawej stronie ekranu.

Alternatywnie możesz również dodać tekst alternatywny do obrazu, odwiedzając Media > Biblioteka i wybierając żądany obraz. Następnie po prostu dodaj tekst alternatywny do pola Tekst alternatywny dla tego obrazu.

Tagi tytułów

Tagi tytułowe są podobne do tagów alt, ale są przeznaczone dla czytelników, a nie dla robotów wyszukiwarek. Dobra optymalizacja tagów tytułu może pomóc niedowidzącym użytkownikom uzyskać dostęp do Twojej witryny.

Twórz mapy witryn z obrazami XML

Innym sposobem, aby Twoje obrazy zostały zauważone przez Google, jest utworzenie mapy witryny i przesłanie jej. Jest to dobra opcja w przypadku obrazów, których wyszukiwarki nie mogą indeksować.

Mówimy na przykład o obrazach ładowanych przez JavaScript. Mapy witryn dostarczają wyszukiwarkom więcej informacji o obrazach dostępnych w Twojej witrynie, dzięki czemu mogą dokładniej zrozumieć i zindeksować Twoją zawartość.

W WordPress następujące wtyczki mogą pomóc w utworzeniu mapy witryny:

• Mapy witryn Google XML
• Yoast SEO
• Kompleksowy pakiet SEO
• Udinra Mapa witryny z wszystkimi obrazami

W przypadku witryn innych niż WordPress istnieją również narzędzia, które mogą pomóc w tworzeniu mapy witryny, w tym Screaming Frog, Dynomapper i inne. Po utworzeniu mapy witryny warto przesłać ją za pomocą narzędzi Google dla webmasterów.

Umieszczanie obrazu i podpisy

Na koniec przyjrzyjmy się rozmieszczeniu elementów wizualnych w poście na blogu lub na stronie internetowej. Miejsce, w którym umieścisz swoje zdjęcia w poście, może mieć znaczący wpływ na jego pozycję w Google.

Na przykład, jeśli umieścisz obraz bliżej słów kluczowych, prawdopodobnie uzyska on lepszą pozycję w rankingu. Pamiętaj też, że dodanie bogatego w słowa kluczowe podpisu do obrazu liczy się jako wyszukiwany tekst i może pomóc w lepszym SEO obrazu.

Zoptymalizuj swoją witrynę WordPress za pomocą WP Engine

Optymalizacja obrazu obejmuje wiele dziedzin, jeśli chodzi o ulepszanie witryny. Optymalizacja może pomóc poprawić doświadczenia użytkowników i utrzymać czas ładowania poniżej pięciu sekund. Tutaj w WP Engine rozumiemy wartość, jaką optymalizacja obrazu wnosi do Twojej witryny. Dlatego oferujemy wyspecjalizowane, zarządzane środowiska hostingowe WordPress. Oznacza to, że będziesz mieć wsparcie ekspertów oraz wszechstronne narzędzia i zasoby optymalizacyjne na wyciągnięcie ręki!