1. 1. Teraz czytam: The Ultimate Guide to WordPress Image Management
  2. 2). 3 mniej znane wskazówki dotyczące zarządzania obrazami w WordPress
  3. 3). WordPress Image SEO Błędy i jak je naprawić

Wpływ wizualny jest jedną z najważniejszych cech, jeśli chodzi o skuteczny plan marketingu treści. Witamy w nowej serii postów – The Ultimate Guide to Image Management in WordPress.


Został zaprojektowany, aby zapewnić narzędzia niezbędne do zarządzania zasobami obrazu w WordPress – od optymalizacji technicznych, SEO, integracji CDN i zarządzania biblioteką. W tym wieloczęściowym przewodniku będziemy rekomendować tylko te metody, samouczki, wtyczki i motywy, które wypróbowaliśmy lub są polecane przez ekspertów branżowych.

Unikniemy również ślepego sugerowania wtyczek, które mają duże zastosowanie w repozytorium WordPress. Zamiast tego polecamy te, które uderzają idealnie między propozycją wartości a optymalizacją wydajności.

Możesz się zastanawiać, jak byśmy to zrobili. Ponad 24 000 pobrań naszego Total – Responsive Multipurpose WordPress theme w ThemeForest może nie być świetnym wskaźnikiem.

Przeszukaliśmy najlepsze blogi wiodących w branży firm hostingowych WordPress (takich jak WPEngine i Pagely) i dowiedziałem się, co one nauczył się podczas obsługi miliardów odsłon stron tysięcy znanych klientów. Wszystkie te informacje skompresowaliśmy do małych akapitów i wypunktowań, abyś mógł odnieść sukces online. Zaczynajmy teraz?

Wskazówki techniczne i dotyczące optymalizacji wydajności dla obrazów WordPress

Istnieje wiele opcji optymalizacji obrazu dostępnych w WordPress nie niepotrzebne obciążenie serwera WWW. Przyjrzymy się niektórym najpopularniejszym wskazówkom dotyczącym optymalizacji obrazu, z których wszyscy korzystają powinien śledź wraz z kilkoma innymi, które przydadzą się na specjalne okazje.

JPG czy PNG? Korzystanie z poprawnego formatu obrazu

Pierwszy krok w optymalizacji obrazu to dobry początek. Mówią, że dobrze rozpoczęta praca jest w połowie ukończona. Dokładnie tak jest w przypadku optymalizacji obrazu w WordPress. Wszystko zaczyna się od wyboru odpowiedniego formatu obrazu. JPG i PNG to dwa najpopularniejsze formaty obrazów używane online w content marketingu.

Sztuką jest zrozumienie, jaki format wybrać dla każdego rodzaju obrazu. Wybór niewłaściwego powoduje ogromny wzrost rozmiaru obrazu. Oto zasady.

Kiedy stosować format PNG?

W przypadku płaskich obrazów – takich jak wektory, ilustracje, czcionki, logo, banery, kształty, banery itp. – cokolwiek, co jest tworzone w formacie wektorowym, takim jak EPS lub Adobe Illustrator (.AI), użyj PNG. W rezultacie uzyskasz zoptymalizowany obraz z niemal zerową utratą jakości. Jeśli użyjesz JPG w tym przypadku, nie pójdziesz na kompromis, ale możesz skończyć się na jakości. W rzeczywistości przy wyższych rozdzielczościach PNG byłby jaśniejszy bez utraty jakości. JPG ucierpiałby.

Weź jego przykład. Stworzymy płaski obraz o rozdzielczości 5000 pikseli i zapiszemy go jako JPG i PNG.

Przykładowy obraz użyty do testu

Płaski obraz
JPG233 KB
PNG42 KB

Krótko mówiąc, obraz JPG był o 455% wyższy niż obraz PNG dla tej samej rozdzielczości.

Kiedy stosować format JPG?

Do wszystkiego innego użyj JPG. Wszystko inne niż obraz płaski lub wektorowy, użyj JPG. Zdjęcia ludzi, miejsc, rzeczy itp. – użyj JPG. Prawie wszystkie zdjęcia stock w tej kategorii używają JPG. Jeśli użyjesz PNG zamiast JPG, natrafisz na niektóre poważne problemy z wydajnością.

W tym przypadku musisz zachować szczególną ostrożność. Jeśli użyjesz JPG zamiast PNG, uszkodzenia będą niewielkie lub żadne. Jeśli jednak użyjesz krwawego PNG w przypadku JPG, stworzysz dużo miejsca na obrażenia. Spójrz na ten przykład.

Ustawiać: Pobrałem ten obraz z Shutterstock, który waży około 10,3 MB w rozdzielczości 6149 × 4562 – zasadniczo zdjęcie w rozdzielczości 28 MP. O ile nie przygotowujemy czegoś w rodzaju broszury gotowej do wydruku, nie będziemy używać pełnej rozdzielczości zdjęcia na naszych blogach. Powiedzmy, że mamy ustalony maksymalny rozmiar obrazu naszego bloga 1600px.

Eksperyment: Zmienimy rozmiar obrazu źródłowego do 1600 pikseli i utworzymy cztery wersje – dwa dla formatu PNG i dwa dla JPG. Dla każdego formatu (JPG / PNG) użyjemy (a) zalecanych ustawień kompresji i (b) maksymalnych ustawień kompresji.

Przykładowy obraz do eksperymentu JEPG

Wyniki: Oto wyniki na ładnym wykresie do naśladowania:

Oryginalny obraz (KB)

10870
Rozdzielczość docelowa1600px
FormatUstawieniaRozmiar (KB)% Redukcji
JPGProgresywny, Jakość = 8523198%
Bez progresji, jakość = 8523998%
PNGKompresja = 0557549%
Kompresja = 6185283%
Kompresja = 9175084%

Na pierwszy rzut oka można by pomyśleć, że kompresja PNG wynosi 84% wystarczająco dobry w porównaniu do 98% osiągniętych w JPG. To nie do końca prawda. Jeśli przyjrzysz się bliżej rozmiarom obrazu, zobaczysz, że PNG waży nieco ponad 1,7 MB, podczas gdy JPG to 0,22 MB. Co oznacza, że PNG jest 8 razy cięższy niż JPG wersja tego samego obrazu w tej samej rozdzielczości. Innymi słowy, dla tego samego obrazu i rozdzielczości wersja JPG jest o 700% lżejsza niż PNG!

Dla tego samego obrazu i rozdzielczości wersja JPG jest o 700% lżejsza niż PNG!

Zasadniczo używaj PNG do płaskich obrazów i JPG do wszystkiego innego.

Lista kontrolna do przesyłania zdjęć stock w blogach

Istnieje mnóstwo blogów, w których redaktorzy bezpośrednio przesyłają wersję swoich zdjęć w pełnej rozdzielczości. Oto kilka wskazówek dotyczących przesyłania zdjęć stockowych do blogów. Korzystam z bezpłatnego oprogramowania o nazwie IrfanView, które ma wiele niesamowitych funkcji. Zilustruję każdy dla ciebie.

1. Zmień rozmiar obrazu

Po pierwsze, musisz zdecydować o maksymalnej rozdzielczości dla wszystkich swoich obrazów w witrynie WordPress. Każdy obraz powyżej tego wymiaru zostałby zmieniony, chyba że jest oczywiście mniejszy.

IrfanView ma Konwersja partii funkcja (naciśnij B po uruchomieniu aplikacji), która może zastosować listę funkcji do kilku zdjęć za jednym razem. Do naszych celów funkcje obejmują zmianę rozmiaru, kadrowanie, dodawanie znaku wodnego itp.

2. Usuń dane EXIF

Zdjęcia kliknięte zwykłym aparatem mają wiele osadzonych metadane – co jest niczym innym jak drobnymi (ale użytecznymi) kawałkami informacji o obrazie. Przykłady takich informacji obejmują współrzędne GPS miejsca, w którym kliknięto zdjęcie, ustawienia ISO, model aparatu itp.

EXIF informacji o losowym zdjęciu klikniętym na moim iPhonie

O ile nie zajmujemy się blogowaniem fotograficznym, generalnie nie chcemy takich informacji na obrazie posta na blogu. Gdy zapisujesz lub konwertujesz obrazy w IrfanView, dane EXIF ​​są zazwyczaj usuwane. Pomaga to zachować prywatność – zwłaszcza fizyczną lokalizację. Różnica wielkości większości zdjęć wynosi około 200–300 KB na obraz.

3. Zapisz jako progresywny JPG

IrfanView domyślnie zapisywał JEPG jako progresywne

Progresywny obraz JPG ładuje obraz warstwa po warstwie – tym samym przyspieszając czas ładowania. Uruchomiono sieci dostarczania treści, takie jak KeyCDN automatyczna konwersja Pliki JPG do progresywnych plików JPG w celu przyspieszenia dostarczania obrazów i optymalizacji przechowywania.

4. Ustaw DPI na 72

DPI lub kropki na cal to miara jakości obrazu. W przypadku materiałów do drukowania używana jest wysoka wartość DPI. Dla sieci idealna jest wartość 72.

Ok, więc podsumowując powyższe, poniżej są moje ustawienia. Korzystam z tej funkcji po skompilowaniu wszystkich zdjęć do mojego posta na blogu – przed przesłaniem ich do WordPress.

Ustawienia konwersji wsadowej w IrfanView dla typowego bloga WordPress

5. Zoptymalizuj swoje zdjęcia

Bez względu na to, czy korzystałeś z JPG czy PNG, musisz zoptymalizować swój obraz. Istnieje wiele naprawdę niesamowitych narzędzi online, które pomagają zoptymalizować zdjęcia i zapisać los przestrzeni.

Mówię o usługach takich jak TinyPNG lub TinyJPG, który po prostu optymalizuje obrazy PNG / JPG za pomocą niektórych zaawansowanych algorytmów.

Zoptymalizowane obrazy w TinyPNG

Szczerze mówiąc, nie wiem, jak działają algorytmy, ale działają i zawsze byłem w stanie uzyskać redukcję o 50-70%, bez względu na to, jak najlepiej je uratować.

Możesz także kupić wersja pro usługi jako wtyczka programu Photoshop za 50 USD. Dostępne są wersje Windows i Mac. Dla moich celów wersja online (w połączeniu z Zapisz w Dropbox funkcja) działa najlepiej.

Wtyczki do optymalizacji obrazu w WordPress

Do tej pory nauczyliśmy się kroków zaczęło się dobrze. Co się stanie, jeśli natknąłeś się teraz na ten post i przesłałeś już setki zdjęć? Oto kilka wtyczek, które Ci w tym pomogą:

EWWW Cloud Image Optimizer

Ta wtyczka jest rozwidleniem oryginalnego i niezwykle popularnego EWWW Image Optimizer podłącz. Ponad 500 000 pobranych wtyczek do optymalizacji obrazów pozwala zoptymalizować obrazy przesyłane do WordPress.

To, co wyróżnia go spośród konkurencji, to jego zdolność do optymalizacji istniejących obrazów w bazie danych, co powoduje ogromny spadek wydajności. Oszczędza to również znaczne koszty przepustowości, ponieważ większość ruchu pochodzi ze starych artykułów. Możesz również opcjonalnie włączyć kompresję stratną (która jest ledwo widoczna gołym okiem), ale może zaoszczędzić dużo miejsca i przepustowości. Jeśli chodzi o technologię optymalizacji, może używać TinyPNG lub interfejsu API TinyJPG do optymalizacji nowych i istniejących obrazów.

Ale tu jest problem. Wiele hostów (w tym WPEngine) nie zezwala na wtyczkę EWWW Image Optimization, ponieważ powoduje to dodatkowe obciążenie serwera. Jeśli uda ci się ominąć ograniczenia serwera, możesz zaryzykować zawieszenie konta z powodu naruszenia zasad.

To gdzie EWWW Cloud Optimizer wtyczka przychodzi do gry. Odciąża wszystkie obliczenia wymagane do optymalizacji obrazów w chmurze i po prostu zastępuje niezoptymalizowane obrazy zoptymalizowanymi. Ponieważ do kompresji używa się praktycznie zerowej mocy procesora, serwer nie ma dodatkowego obciążenia. Dotyczy to wszystkich nowych i istniejących konwersji obrazów w witrynie WordPress.

Plany i ceny: Jak można się spodziewać, wtyczka nie jest darmowa, ponieważ deweloper musi płacić rachunki w chmurze. Jednakże cennik jest wyjątkowo rozsądny i kosztuje 9 USD za 3000 optymalizacji obrazu w ramach abonamentu opłacanego z góry.

Wtyczka Cloud Optimizer EWWW jest pięknie zaprojektowana. Skaner multimediów informuje, ile obrazów należy zoptymalizować przed dokonaniem zakupu. Na podstawie zdjęć z serwera możesz kupić odpowiedni abonament.

Wtyczka WordPress TinyPNG

To kolejna świetna wtyczka do optymalizacji obrazu, która integruje się bezpośrednio z usługą TinyPNG / JPG. Automatycznie nowe i istniejące obrazy przesyłane do biblioteki multimediów WordPress. Ta wtyczka oferuje bezpłatny plan 100 optymalizacji obrazu na miesiąc.

Freddy przygotował już listę wtyczek do optymalizacji obrazu – przeczytaj ją, jeśli chcesz dowiedzieć się więcej na ten temat.

Wniosek

To prowadzi nas do końca pierwszego posta w tej serii. W następnym artykule dowiedz się, w jaki sposób niektóre mniej znane porady i wskazówki dotyczące optymalizacji obrazu, takie jak zapobieganie hotlinkowaniu, pobieranie obrazów ze zdalnych serwerów i tym podobne. Czy masz jakieś wskazówki pod dobrze zacząć Kategoria? Daj nam znać w komentarzach poniżej.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me