Jak zoptymalizować obrazy dla WordPress [Najlepszy przewodnik]

Jeśli masz witrynę WordPress, zdajesz sobie sprawę z trudności związanych z jej utrzymaniem. Czasami możesz spędzić godziny na czymś, co powinno zająć tylko kilka minut. Może się tak zdarzyć, jeśli Twoja witryna działa wolno i jest rozdęta z powodu zbyt dużych lub źle zoptymalizowanych obrazów.

Ponadto, korzystanie z technik optymalizacji pod kątem wyszukiwarek pomoże odwiedzającym Cię znaleźć i zatrzymać na Twojej stronie. Jedną z takich praktyk jest optymalizacja obrazów pod kątem internetu.

Rozważ każdy piksel jako możliwy obszar do optymalizacji za każdym razem, gdy projektujesz lub edytujesz obraz. Rozważenie pikseli jako pojedynczych elementów wymaga czasu i wysiłku, ale jest to warte wysiłku.

Istnieje jednak kilka sposobów na optymalizację obrazów w WordPressie. Pamiętaj, że celem jest zmniejszenie rozmiaru pliku bez pogorszenia jakości obrazu.

Ten post nauczy Cię, jak zoptymalizować obrazy WordPress i zwolnić więcej czasu na inne czynności.

Co to jest optymalizacja obrazu?

Jest to proces zmniejszania rozmiaru pliku obrazu bez wpływu na jego jakość i stosowania odpowiednich technik SEO obrazu. Zoptymalizowane obrazy łatwiej jest przechowywać na dysku twardym lub przesyłać do Internetu. Dodatkowo ma mniej potencjalnych problemów ze względu na wolne prędkości pobierania.

Rozmiar Twoich obrazów ma znaczący wpływ na czas ładowania Twojej witryny. Ogólnie rzecz biorąc, im większy obraz, tym dłużej trwa ładowanie przeglądarki odwiedzającego. Może to być frustrujące dla odwiedzających i może prowadzić do opuszczenia Twojej witryny.

Należy przestrzegać kilku podstawowych wskazówek dotyczących optymalizacji, aby upewnić się, że obrazy są zoptymalizowane pod kątem wydajności.

Korzyści z optymalizacji obrazu

Aby zostać odnoszącym sukcesy webmasterem, musisz zrozumieć, jak działają obrazy w witrynie. Od czasu do czasu może być również wymagana optymalizacja niektórych obrazów.

Korzyści z optymalizacji obrazu to:

• Krótsze czasy wczytywania stron: zoptymalizowane obrazy ładują się szybko, co przekłada się na szybciej ładującą się witrynę. Jest to szczególnie ważne dla użytkowników mobilnych, którzy częściej opuszczają witrynę, której ładowanie trwa zbyt długo.
• Ulepszone rankingi SEO: zoptymalizowane obrazy pomagają również w rankingach SEO Twojej witryny. Google wykorzystuje szybkość wczytywania się Twojej strony jako czynnik rankingowy, więc optymalizacja obrazów może pomóc Ci uzyskać wyższą pozycję w wynikach wyszukiwania.
• Zmniejszone wykorzystanie przepustowości: zoptymalizowane obrazy zużywają mniej przepustowości, co pozwala zaoszczędzić pieniądze na rachunku za hosting.
• Lepsze wrażenia użytkownika: dobrze zoptymalizowana witryna zapewnia lepsze wrażenia użytkownika, szybsze ładowanie stron i lepszą wydajność wyszukiwarki.
• Skrócenie czasu pobierania na komórki: zoptymalizowane obrazy mogą również pomóc w dostosowaniu witryny do urządzeń mobilnych, co ma kluczowe znaczenie dla rankingów Google w wyszukiwaniach mobilnych.
• Satysfakcja klienta: lepsze wrażenia użytkownika zwiększają satysfakcję klienta, prowadząc do wyższej sprzedaży i większej liczby stałych klientów.

14 niezbędnych rzeczy do optymalizacji obrazów w Internecie

Najlepiej byłoby wziąć pod uwagę wiele czynników podczas optymalizacji obrazu do użytku w Internecie. Istnieje wiele różnych typów plików i kilka różnych sposobów ich optymalizacji. Oto kilka rzeczy, które należy wziąć pod uwagę podczas optymalizacji obrazów w Internecie.

Jakość a rozmiar:

Jakość obrazu jest zawsze ważna, ale powinieneś również wziąć pod uwagę rozmiar pliku, jeśli chodzi o optymalizację do użytku w Internecie. Najlepiej byłoby, aby rozmiar plików obrazów był jak najmniejszy, bez poświęcania jakości , aby przyspieszyć ładowanie na stronach internetowych.

Standardowa rozdzielczość obrazów w Internecie to 72 DPI (Dots Per Inch). Dlatego zaleca się zapisywanie obrazów w formacie JPG, a nie PNG, ponieważ ten typ pliku jest mniejszy.

Co więcej, najlepiej byłoby użyć najmniejszej możliwej głębi kolorów bez pogorszenia jakości obrazu. Standardowa głębia kolorów to 24-bitowa , którą można zmienić we właściwościach pliku.

Format pliku obrazu:

Aby określić, jaki format obrazu wybrać, konieczne jest zrozumienie różnych obrazów i ich przeznaczenia. Powinieneś zapisać swój plik jako JPG , ale optymalizując obrazy dla Internetu, wybierz PNG-8 lub PNG-24.

Ogólnie rzecz biorąc, pliki PNG są najlepsze do obrazów z dużą ilością kolorów i przezroczystym tłem, podczas gdy pliki JPEG są najlepsze do obrazów z dużą ilością szczegółów.

Dlatego powinieneś używać formatu PNG dla obrazów z przezroczystym tłem i JPEG dla obrazów z dużą ilością szczegółów, aby zoptymalizować pliki graficzne do Internetu.

Rozmiar i wymiary pliku:

Optymalizując obraz do Internetu, należy wziąć pod uwagę dwa podstawowe czynniki, takie jak rozmiar pliku i wymiary. Lepiej poeksperymentować z jednym z tych czynników przed zmianą drugiego, aby zobaczyć, co pomaga osiągnąć mniejszy rozmiar pliku lub większy obraz.

Duże pliki obrazów mogą spowolnić działanie witryny , dlatego przed przesłaniem należy zmienić rozmiar obrazów. Zalecane wymiary obrazów na stronie internetowej to 600-800 pikseli szerokości i 500-600 pikseli wysokości.

Każdy większy niż ten najprawdopodobniej spowoduje zmianę rozmiaru obrazu przez przeglądarkę, co spowoduje utratę jakości.

Matematyka rankingowa jest idealna do automatycznego dostosowywania rozdzielczości obrazów. Doda za Ciebie wymiary obrazu, abyś nie musiał się martwić o jego wymiary.

Popraw SEO obrazu:

Każdy obraz, który przesyłasz do swojej witryny, powinien służyć jako źródło informacji dla wyszukiwarek. Pliki graficzne z większą ilością szczegółów są lepsze do optymalizacji pod kątem wyszukiwarek.

Najbardziej przekonujące praktyki SEO obrazu to:

• Zoptymalizuj tekst tytułu obrazu: Zapisując obrazy, pamiętaj o nadaniu im tytułów informacyjnych. Pojawi się jako podpowiedź, gdy kursor znajdzie się nad obrazem. Co więcej, dla wyszukiwarek korzystne jest poznanie obrazu.
• Użyj tagów Alt: Wyszukiwarki również używają tagów Alt podczas indeksowania obrazów. Tekst tagu alt powinien być dostosowany do każdego obrazu i jak najdokładniej opisywać to, co znajduje się na obrazku.
• Użyj prawidłowych nazw plików graficznych: Jeśli to możliwe, nazwy plików graficznych również powinny być opisowe i zawierać słowa kluczowe. Podczas pracy z oprogramowaniem do edycji obrazów zapisz obrazy pod opisową nazwą pliku.

Uwaga : jeśli korzystasz z wtyczki Rank Math WordPress, Twoje obrazy zostaną zoptymalizowane pod kątem SEO, a nazwa pliku obrazu i tag alt będą automatycznie zawierały słowa kluczowe.

Właściwa kompresja:

Jest to kolejny kluczowy czynnik, który należy wziąć pod uwagę podczas optymalizacji obrazów. Powinieneś maksymalnie skompresować swoje obrazy przed przesłaniem ich na serwer.

Aby to zrobić, musisz użyć narzędzia do kompresji, takiego jak Photoshop lub GIMP. Alternatywnie możesz użyć bezpłatnych narzędzi, takich jak TinyJPG i ImageOptim . Zawsze zaleca się umieszczanie w witrynie skompresowanych obrazów, aby przyspieszyć ładowanie.

Alternatywnie możesz użyć wtyczki, takiej jak ShortPixel lub WP-Optimize, aby automatycznie skompresować obrazy, gdy są one przesyłane do Twojej witryny. Te wtyczki są zalecane dla każdego, kto chce zoptymalizować obrazy na swojej stronie internetowej.

Podczas kompresji obrazów należy pamiętać o następujących faktach:

• Stratna : kompresja stratna to rodzaj kompresji, który usuwa niektóre dane z obrazu, aby zmniejszyć rozmiar pliku. Ten rodzaj kompresji jest często używany w przypadku obrazów, które nie będą miały zauważalnej utraty jakości.
• Bezstratna : kompresja bezstratna to forma kompresji, która usuwa niektóre zbędne informacje bez obniżania jakości treści. Ten typ kompresji jest często używany w przypadku obrazów, które muszą zachować swoją jakość po kompresji, takich jak bezstratne obrazy JPEG.

Więcej szczegółów na temat stratnej bezstratnej kompresji reklam można znaleźć na blogu ShortPixel.

Wyświetlaj obrazy w formatach nowej generacji:

Domyślnie przeglądarki będą próbowały wczytać obrazy w tym samym formacie, w jakim zostały zapisane. Na przykład obraz JPEG jest ładowany, gdy adres URL zawiera .jpg. Możesz jednak zmusić przeglądarki do załadowania innego formatu obrazu przy użyciu prawidłowego rozszerzenia pliku.

Na przykład, jeśli masz obraz JPEG, możesz zmienić rozszerzenie na .png, a przeglądarka załaduje ten obraz.

Możesz to zrobić za pomocą wtyczki JPG do PNG WordPress. Dzięki tej wtyczce automatycznie przekonwertujesz wszystkie obrazy JPG na pliki PNG. Możesz postępować zgodnie z przewodnikiem, jak konwertować obrazy PNG na JPG w WordPress.

Możesz łatwo znaleźć obrazy wyświetlania w formacie nowej generacji za pomocą narzędzia GtMatrix lub narzędzia Google do analizy szybkości strony.

Uwaga — ogólnie rzecz biorąc, dobrze jest zapisywać obrazy jako oba typy plików, które mają być przeglądane przez przeglądarki rozpoznające różne rozszerzenia plików. W ten sposób, jeśli plik nie zostanie załadowany, możesz zastąpić uszkodzony plik JPEG plikiem PNG bez konieczności ponownego przesyłania obrazu.

Połącz obrazy za pomocą sprite'ów CSS:

Łączenie obrazów tradycyjnie odbywało się za pomocą oprogramowania do edycji obrazu. Jednak teraz odkryto, że metoda sprite'ów CSS może być również używana do łączenia obrazów.

Proces polega na stworzeniu pustego obrazu i załadowaniu obrazów, które chcesz połączyć w różnych pozycjach. Następnie, za pomocą CSS, każdy z tych pojedynczych obrazów może zostać umieszczony w tym samym obszarze nowego obrazu.

Dlatego przeglądarka może pobrać pojedynczy plik obrazu zamiast wielu obrazów. Jest to szczególnie ważne w przypadku urządzeń mobilnych, ponieważ zazwyczaj mają one wolniejsze połączenia internetowe. Możesz to zrobić za pomocą generatora sprite CSS.

Wyłącz Hotlink do obrazu:

Hotlinkowanie obrazu oznacza, że ​​każdy może zrobić Twoje obrazy i opublikować je na swojej stronie internetowej. W rezultacie będziesz odczuwać irytującą utratę przepustowości, ponieważ obrazy będą pobierane z twojego serwera na inny serwer. Możesz temu zapobiec, korzystając z ochrony hotlink dla swoich obrazów.

Możesz skonfigurować ochronę hotlink obrazu za pośrednictwem swojego konta cPanel. Proces jest bardzo prosty.

• Zobaczysz ikonę oznaczoną Hotlink Protection w zakładce Security.
• Kliknij tę ikonę, aby uzyskać dostęp do następującego okna.
• Kliknij przycisk Włącz , aby zapobiec łączeniu obrazów.

Uwaga : Jeśli jesteś użytkownikiem Cloudflare, możesz zapobiec łączeniu obrazów z hotlinkami, włączając opcję „Ochrona Hotlink ”.

Obrazy w pamięci podręcznej:

W przypadku każdej witryny jest to niezbędne. Powinieneś buforować swoje obrazy, aby ludzie mogli je szybciej przeglądać. W większości przypadków obecni odwiedzający witrynę przechowują to w pamięci podręcznej w swojej przeglądarce, ale jeśli wystąpi problem z hostingiem, możesz skonfigurować go osobno.

Za każdym razem, gdy instalujesz WordPress za pomocą usługi hostingowej, dostawca hostingu zajmuje się całą pamięcią podręczną. Możesz także zainstalować wtyczkę buforującą.

WP Rocket to idealna wtyczka do buforowania obrazów, ponieważ jest prosta w użyciu i instalacji. Po prostu instalujesz i aktywujesz, a potem możesz iść. Oczywiście istnieją inne wtyczki do buforowania, ale WP Rocket jest najlepszym wyborem do tego celu.

Gravatary w pamięci podręcznej:

Gravatar to mała ikona, która podąża za Twoim adresem e-mail w Internecie. Na przykład, gdy zostawisz komentarz na innym blogu WordPress, Twój Gravatar pojawi się obok niego.

Usługa Gravatar generuje Gravatar, który buforuje je na swoich serwerach. Dlatego jeśli komentujesz dużą liczbę blogów lub nawet kilka o dużym ruchu, Twój Gravatar zostanie zapisany na serwerach Gravatara.

W rezultacie Twój Gravatar załaduje się szybko na wszystkich tych blogach. Ale z drugiej strony może to być również wadą, ponieważ jeśli usługa Gravatar jest niedostępna lub Twój Gravatar zostanie usunięty z jednego z skomentowanych przez Ciebie blogów, Twój Gravatar zniknie ze wszystkich tych blogów.

Dostosowanie Gravatara za pomocą kompleksowego obrazu jest niesamowicie nieatrakcyjne. Dzieje się tak, ponieważ jeśli Twój niestandardowy Gravatar nie pojawia się na tych blogach, zamiast niego zostanie użyty domyślny gravatar, co może nie być odpowiednie.

Istnieją dwa możliwe rozwiązania tego problemu:

• Spraw, aby Twój Gravatar był jak najmniejszy. Mniejsze obrazy ładują się szybciej i zużywają mniej przepustowości niż większe.
• Powinieneś hostować własną wersję usługi Gravatar w domenie, którą kontrolujesz. Będzie to wymagało serwera WWW Apache, PHP i bazy danych MySQL do przechowywania Gravatarów lokalnie, zamiast buforowania ich na serwerach Gravatar.

Wyświetlaj obrazy z CDN:

Jeśli Twoje obrazy są dostarczane przez sieć dostarczania treści (CDN), pamiętaj o włączeniu buforowania. Dzięki temu przeglądarki i inne urządzenia nie będą musiały wielokrotnie pobierać tego samego obrazu.

Najlepiej byłoby zastanowić się, jak Twoje obrazy będą wyświetlane podczas konfigurowania CDN. Ponadto na twoich obrazach powinno być włączone przepisywanie CDN. Możesz to zrobić za pomocą wtyczki Perfmatters

Korzystając z tej wtyczki, możesz łatwo podłączyć swoją witrynę do sieci CDN. W rezultacie, jeśli Twoja witryna może udostępniać treści za pośrednictwem sieci dostarczania treści, Twoje obrazy zostaną wykonane przez serwery CDN.

Możesz użyć dowolnej z następujących sieci CDN.

• CloudFlare
• Królik CDN

Czego nie powinieneś robić podczas optymalizacji obrazów na swojej stronie?

Unikaj przekierowań adresów URL obrazów:

Jeśli używasz przekierowania adresu URL w swojej witrynie, opóźnia to pojawienie się obrazu. Ponadto obraz nie jest buforowany przez przeglądarkę, co może powodować opóźnienie w wczytywaniu strony.

Dlatego optymalizując obrazy w Internecie, należy unikać przekierowywania adresów URL.

Unikaj nagłówka wygasa:

Jeśli użyjesz nagłówka wygasa w swoich obrazach, przeglądarka może ich nie buforować. Powoduje również, że przeglądarka ponownie żąda obrazu za każdym razem, gdy jest ładowany na stronę.

Powinieneś unikać umieszczania wygasłych nagłówków na obrazach swojej witryny, jeśli chcesz je zoptymalizować.

Unikaj osadzania obrazów:

Ważne jest, aby nie osadzać obrazów na stronie podczas optymalizacji obrazów w Internecie. Dzieje się tak, ponieważ po osadzeniu obrazu przeglądarka pobiera cały obraz przed jego wyświetleniem.

Może to spowodować powolne ładowanie witryny i frustrować odwiedzających. Zamiast tego użyj znacznika <img> lub <object>, aby dołączyć łącze do obrazu na serwerze. W ten sposób przeglądarka może pobrać tylko plik obrazu, a nie całą stronę.

Najlepsze narzędzia do optymalizacji obrazu:

Treści wysokiej jakości są niezbędne do tworzenia profesjonalnych blogów. Ponadto, aby blog wyglądał atrakcyjnie, niezbędne są wysokiej jakości obrazy. Trudno jednak znaleźć darmowe narzędzia do optymalizacji obrazów bez utraty rozdzielczości i pięknie zaprojektowanych obrazów.

W rezultacie przygotowałem listę jednych z najskuteczniejszych narzędzi do optymalizacji obrazu, które ułatwiają nam pracę.

• TinyJPG: TinyJPG to przydatne narzędzie online do kompresji obrazów JPEG. Stopień kompresji tego narzędzia jest bardzo wysoki, a jakość obrazu jest nadal doskonała.
• Toolur: Toolur to pomocne narzędzie online do optymalizacji obrazów w Internecie. Optymalizuje obrazy, zmniejszając rozmiar pliku bez wpływu na jakość obrazu.
• ImageOptim: ImageOptim to jedno z najlepszych narzędzi do optymalizacji obrazu. To narzędzie pomaga poprawić szybkość ładowania witryny poprzez optymalizację obrazów na stronie internetowej. Może nawet optymalizować obrazy, które zostały już skompresowane.
• GIMP: GIMP to świetny edytor obrazów, który pozwala zmniejszyć rozmiar pliku obrazu przy jednoczesnym zachowaniu jakości obrazu. Jest godną alternatywą dla Adobe Photoshop.

Najlepsze wtyczki do optymalizacji obrazu dla WordPress

Istnieje kilka różnych wtyczek do optymalizacji obrazu dostępnych dla WordPress. Wybór najbardziej odpowiedniego dla Twoich potrzeb może być trudny. Oto lista najlepszych wtyczek.

• Optymalizator obrazu EWWW
• Wyobraź sobie autorstwa WP Rocket Team
• Optymalizator obrazu ShortPixel
• WP Smush
• reSmush.it

Możesz użyć wtyczek EWWW Image Optimizer , Imagify by WP Rocket Team i ShortPixel Image Optimizer z powyższej listy.

Powinieneś użyć wtyczki premium do optymalizacji obrazu, aby uzyskać optymalny wynik. Jeśli chcesz zaoszczędzić trochę pieniędzy, wypróbuj EWWW Image Optimizer .

Często zadawane pytania

Jak tworzyć obrazy WebP w WordPressie?

Kiedy używasz WP Rocket do optymalizacji obrazów w swojej witrynie, automatycznie zapisze je jako WebP. W przeciwieństwie do tego, jeśli chcesz przekonwertować obraz JPG lub PNG na obraz WebP, możesz to zrobić za pomocą wtyczki.

Możesz użyć do tego dowolnej z następujących wtyczek.

• Konwerter WebP dla mediów
• WebP Express

Świetną wtyczką, której używam do WebP, jest Flying Images firmy WP Speed ​​Matters. Działa z dowolnym motywem i obsługuje wszystko. Dodatkowo umożliwia tworzenie obrazów WebP o dowolnym rozmiarze i zapewnia bezpłatną usługę CDN obrazów, co jest znaczącą korzyścią.

Jak mogę odroczyć obrazy poza ekranem?

Atrybut defer może być używany w JavaScript do ładowania obrazów poza ekranem, dzięki czemu przeglądarka może szybciej renderować początkową stronę. Wymaga to znaczników początkowych i końcowych. Na przykład:

<img src=”image-source.png” alt=”” width=”100px” height=”100px” title=”Tekst podpowiedzi” data-defer=”offscreen-image.jpg” />

Uwaga- Odroczenie jest obsługiwane tylko w HTML5, nie XHTML.

Korzystając z wtyczki JavaScript, takiej jak Perfmatters, możesz opóźnić ładowanie swoich obrazów. W rezultacie możesz zmienić tag img na dowolny element, taki jak div.

<div data-defer=”offscreen-image.jpg”></div>

Jak naprawić odroczone obrazy poza ekranem?

• Lazy ładuje obrazy.
• Lazy ładuje obrazy tła.

Obrazy w części strony widocznej na ekranie powinny być wyłączone z leniwego ładowania, aby użytkownicy szybko je zauważyli. Aby jednak rozwiązać problem odroczonych obrazów poza ekranem lub leniwego ładowania w witrynie WordPress, możesz użyć wtyczki Perfmatters. Wtyczka pozwala poprawić szybkość ładowania witryny WordPress poprzez odroczenie ładowania obrazów poza ekranem.

Uwaga- Możesz włączyć leniwe ładowanie obrazu za pomocą wtyczki WP Rocket. Możesz więc użyć dowolnego z nich.

Na zakończenie

WordPress to potężny system zarządzania treścią, który umożliwia tworzenie i zarządzanie własną witryną internetową. Jednak optymalizacja obrazów dla WordPressa może być trudna bez odpowiednich narzędzi.

Problem z optymalizacją obrazów dla WordPressa polega na tym, że dostępnych jest wiele różnych metod. Na przykład możesz użyć wtyczki, narzędzia online, a nawet własnego oprogramowania.

Najskuteczniejszą metodą optymalizacji obrazów dla WordPressa jest połączenie wszystkich tych technik . Dodatkowo możesz użyć wtyczki, która określi, które obrazy wymagają zmiany rozmiaru, a także możesz ręcznie zmienić ich rozmiar.

Oprócz optymalizacji rozmiarów obrazów dla WordPressa powinieneś również zoptymalizować liczbę plików na post. Spróbuj użyć wtyczek premium, aby zoptymalizować szybkość obrazu i witryny. Dzięki temu będziesz mógł stworzyć przyjazną dla użytkownika, szybką i wydajną stronę internetową.