Optymalizuj obrazy na swojej stronie WordPress

1. Optymalizacja zdjęć część 2: optymalizacja techniczna Wiele już powiedziano i napisano o SEO dla...
2. Witryna mobilna
3. Kompresja
4. Obrazy dla siatkówki i innych ekranów o wysokiej rozdzielczości
5. Sprite'y CSS
6. Mapy witryn dla obrazów
7. Wniosek

Optymalizacja zdjęć część 2: optymalizacja techniczna

Wiele już powiedziano i napisano o SEO dla treści (odpowiedni tekst, poprawne tytuły, słowa kluczowe i opisy itp.), Ale nie za dużo na temat innego rodzaju treści, a mianowicie obrazów. Jako edytor masz kontrolę nad atrybutami tytułu i alttext, ale nie zawsze nad technicznymi aspektami obrazów w witrynie. Potrzebujesz dobrej współpracy z programistą.

Jako kontynuacja poprzedni artykuł o optymalizacji obrazów , ten artykuł na blogu dotyczy bardziej technicznych aspektów obrazów i tego, co Ty lub Twój programista może zrobić, aby zapobiec problemom. W ten sposób witryna ładuje się szybciej, a to sprawia, że ​​wyszukiwarki są szczęśliwe. Zacznijmy od wymiarów obrazów .

„Rozmiar ma znaczenie”, także w przypadku obrazów

Witryna pulpitu

Przypuśćmy, że piszesz chwytliwy artykuł o swoim najnowszym produkcie i otrzymujesz ładny obraz od dostawcy. Umieszczasz to w swoim artykule, a następnie przeglądasz w przeglądarce. Rany, ile czasu zajmuje załadowanie strony . Otrzymujesz to, jeśli używasz obrazu, który jest przeznaczony do drukowania - 3000 x 2000 pikseli, a następnie 12 MB! To jest skrajny przykład, ale zdarza się to częściej niż myślisz. Aktualna maksymalna szerokość obszaru zawartości na stronie internetowej wynosi obecnie około 1000 pikseli (z wyjątkiem suwaków o pełnej szerokości, które mogą mieć szerokość 1600 pikseli). Dodatkowe 2000 pikseli w tym przykładzie jest zatem niepotrzebne i kosztuje tylko więcej przepustowości i czasu ładowania niż jest to konieczne. Tracisz również pewną jakość, ponieważ pozostawiasz przeglądarce skalowanie obrazu. Sposób skalowania i wynik różnią się w zależności od przeglądarki i systemu operacyjnego.

Rozwiązania mogą się różnić w zależności od systemu, ale skupię się tutaj na najczęściej używanych CMS (Content Management System): WordPress .

Rozwiązanie (-a):

1. Jeśli używasz WordPress, możesz ustawić maksymalne wymiary (i proporcje) wszystkich obrazów (Ustawienia -> Media). Powinny one / powinny odpowiadać przestrzeniom używanym w witrynie (pełna szerokość, zawartość blogu i miniatury widgetów). Poproś programistę, aby ustawił prawidłowe wymiary. WordPress wykorzystuje 3 regulowane formaty obrazu w standardzie:
   1. Duży rozmiar - obrazy używane na całej szerokości witryny - zwykle od 960 do 1000 pikseli szerokości.
   2. Średni rozmiar - zdjęcia na blogu - często 100% szerokości, w której wpis mieści się w +/- 600 pikseli
   3. Miniatury - obrazy na przykład widżetów - +/- 150 pikseli
2. Używając obrazów w wiadomościach / stronach, wybierz właściwy format obrazu. Zobacz obrazek poniżej .
3. W niektórych celach (na przykład suwaki o pełnej szerokości) nadal potrzebujesz obrazów w odpowiednim formacie uprawa i powiększ lub zmniejsz. WordPress używa oryginalnego formatu obrazu dla suwaków bez ich skalowania. Photoshop nadal pozostaje najlepszym narzędziem do tego. Poproś swojego programistę o prawidłowe wymiary.
4. Polecane obrazy są używane do różnych celów w WordPress; jako obrazy na liście blogów, portfolio, galerie itp. Twórca twojego motywu jest odpowiedzialny za użycie prawidłowych wymiarów. Programista WWW może lepiej ocenić, czy są one zbyt duże.

Wyświetl ustawienia na stronach / wiadomościach

Uwaga: Nawet jeśli zmienisz wymiary w ustawieniach, musisz dostosować wszystkie obrazy do nowych wartości. Niestety, nie dzieje się to automatycznie. Możesz użyć wtyczki do tego: Regeneruj miniatury .

Witryna mobilna

Powyższy problem staje się jeszcze wyraźniejszy w mobilnej wersji witryny. Przy ograniczonej przepustowości odwiedzający będzie musiał jeszcze dłużej czekać na te zbyt duże obrazy. Jeśli ładowanie strony mobilnej trwa zbyt długo z powodu zbyt dużych obrazów, Google i odwiedzający będą karać za to ; w dół ranking stron mobilnych i prawdopodobnie stracisz odwiedzających. Istnieje kilka sztuczek do wyświetlania innych treści, a także zredukowanych wersji obrazów na telefonie komórkowym.

Rozwiązanie (-a):

1. Użyj osobnego motywu mobilnego - na przykład z Motywy WPTouch ). Zawartość jest automatycznie formatowana, a obrazy są zmniejszane.
2. W przypadku niektórych skryptów JavaScript i PHP Twój programista może reagować na różne urządzenia i / lub rozdzielczości ekranu. W przypadku urządzeń mobilnych WordPress użyje zredukowanych wersji obrazów. W przypadku Ekrany siatkówki użyje również większych rozdzielczości. Obecnie najczęściej używanym javascriptem jest Retina.js ( patrz „Obrazy dla siatkówki i innych ekranów o wysokiej rozdzielczości” poniżej ).
3. Coraz więcej motywów obsługuje obrazy Retina.

Możesz także umożliwić skrypt Retina.js dzięki tej wygodnej wtyczce (uzupełnienie maj 2017).

Kompresja

Nawet jeśli napiszesz obraz z Photoshopa za pomocą „Save for web”, to nie koniec historii. Ładne i ładne, te zdjęcia z Photoshopa, które mają około 80 KB, ale jeśli nadal wyświetlasz 12 obrazów na stronie, to jest to prawie 1 MB. Czy może być trochę mniejsza? Tak, możesz . Dla każdego formatu pliku istnieje inne rozwiązanie (.jpg, .png, a nawet .gif). Większość z nich usuwa metadane (EXIF) i niepotrzebne profile kolorów z obrazów. Twój 1MB rozmiaru obrazu jest zredukowany do 80%! Istnieją również dwa rodzaje kompresji; „Bezstratny” i „stratny” lub nieodrzucający informacji o kolorze, a zatem zachowanie jakości lub odrzucenie informacji i utrata jakości. Cechą charakterystyczną ciężkiej kompresji JPEG są widoczne bloki 8 x 8 pikseli. Poniżej możesz zobaczyć skrajny przykład kompresji „stratnej”.

Bezstratny vs. kompresja stratna

Oto kilka narzędzi do kompresji obrazów, które możesz umieścić w swoim „obiegu pracy”.

Rozwiązanie (rozwiązania) zależne od systemu operacyjnego:

• ImageOptim ; Narzędzie offline dla komputerów Mac: PNG, JPG
• RIOT ; Narzędzie offline dla komputerów z systemem Windows: PNG, JPG
• Smush.it ; Narzędzie online; Obrazy PNG i JPG o rozmiarze do 1 MB)
• SuperPNG ; Wtyczka Photoshop, aby pliki PNG były jeszcze mniejsze niż standard Photoshopa
• Mały PNG ; Narzędzie online: dla PNG i JPG (wcześniej tylko PNG)
• JPGmini Narzędzie online: tylko dla JPG
• Kompresuj PNG / JPG ; Narzędzie online dla PNG i JPG

Uwaga: Nawet przy „stratnych” metodach często nie widać różnicy. Więc najpierw eksperymentuj. Często można zwolnić bardziej agresywną kompresję „stratną” na obrazach na ekranach Retina. Patrz następna sekcja.

Obrazy dla siatkówki i innych ekranów o wysokiej rozdzielczości

Załóżmy, że używasz obrazu o szerokości 320 pikseli na stronie pulpitu i oglądasz ten sam obraz na ekranie Retina lub innym urządzeniu o wysokiej rozdzielczości. To prawdopodobnie wygląda mniej dobrze. Wynika to z tego, że 72 PPI (piksele na cal) ekranu komputera jest „rozmazane” (technicznie „potrojone” lub więcej) w stosunku do PPI 220 do 326 ekranu Retina. Mniej informacji w większym zakresie . Widzisz to jako zamazany obraz:

Obraz odpowiedni dla siatkówki vs. non-retina (nie nadaje się do siatkówki)

Aby temu zapobiec, utwórz osobne obrazy dla ekranów o wysokiej rozdzielczości, które są 1,5 do 2 razy większe niż dla pulpitu.

Rozwiązanie (-a):

1. Użyj WP Retina 2X wtyczka. W tym celu wystarczy upewnić się, że oryginalny rozmiar wszystkich obrazów jest wystarczający dla ekranów Retina: 1,5 do 2 razy większy. WordPress wybiera właściwy rozmiar urządzenia.
2. Od momentu pojawienia się modyfikatora Apple w wysokiej rozdzielczości „ @ 2 ” użyje obrazu iPhone / iPad z tym rozszerzeniem na ekranie Retina. Wraz z niektórymi javascript ( Retina.js na przykład) możesz użyć normalnego obrazu, skrypt zapewnia, że ​​jeśli urządzenie o wysokiej rozdzielczości zostanie wykryte, obraz o niskiej rozdzielczości zostanie zastąpiony wersją o wysokiej rozdzielczości. Działa to na wszystkich urządzeniach, a nie tylko na produktach Apple.
3. Dla zdjęć w CSS (obrazy związane z motywem) możesz użyć zapytań o media CSS :
   • @media
     (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
     / * Reguły specyficzne dla siatkówki tutaj * /
     }

Uwaga: Ponieważ ekran telefonu komórkowego jest nieco mniejszy, możesz kompresować obrazy dla ekranów o wysokiej rozdzielczości nieco bardziej agresywnie. Na przykład w Photoshopie piszesz oryginalny obraz z 80% kompresją JPG, ale możesz użyć kompresji 30% dla obrazu o wysokiej rozdzielczości. Pozostanie ostry, ponieważ artefakty ciężkiej kompresji zwykle nie wyróżniają się.

Sprite'y CSS

Przypuśćmy, że w Twojej witrynie 2 różne obrazy strzałki (wskazania po lewej i prawej stronie) są używane do różnych celów. I każda z tych strzał ma osobny efekt najechania myszą . Oznacza to, że użytkownik musi załadować 4 różne obrazy. Dla każdego obrazu jest dodatkowe Żądanie HTTP . Dlaczego więc nie zebrać go w jeden obraz? Zamiast 4 żądań HTTP wszystko jest gromadzone w jednym żądaniu . Ta kolekcja obrazów nazywana jest „ikonką” .

Pojedyncze obrazy a jeden sprite CSS

Dzięki CSS możemy wyświetlić jeden obraz, który jest potrzebny w ikonce, reszta pozostaje ukryta. Aby uzyskać efekt najechania myszą, wszystko, co musimy zrobić, to przesunąć ikonkę w górę (minus współrzędne Y). Zebranie obrazów w jednym sprite'u i dostosowanie CSS wymaga czasu, ale z pewnością jest warte piękna. To jest coś, co programista musi zrobić dla Ciebie.

Rozwiązanie: w rzeczywistości istnieje tylko jedno rozwiązanie;

Na szczęście istnieje aplikacja internetowa (bookmarklet), która przejmuje ciężką pracę dla Ciebie - SpriteMe .

SpriteMe analizuje twoją stronę pod kątem możliwych duchów

SpriteMe analizuje wszystkie luźne obrazy w witrynie i zapewnia, że ​​obrazy o tej samej wysokości są umieszczane w tym samym wierszu w ikonce . Możesz pobrać nowy sprite, a SpriteMe napisze również poprawny CSS.

Mapy witryn dla obrazów

Mapy witryn są zwykle używane do indeksowania treści (stron i wiadomości) przez różne wyszukiwarki. Wiele osób nie wie, że Google w szczególności indeksuje Twoje zdjęcia i filmy oddzielnie . W tym celu musisz umieścić te media oddzielnie w pliku sitemap.xml.

Przykład mapy witryny XML dla obrazów:

<? xml version = "1.0" encoding = "UTF-8"?> <urlset xmlns = "http://www.example.com/sitemap.xml"> <url> <loc> http: //www.example .com / foo.html </loc> <obraz: image> <obraz: loc> http://example.com/image.jpg </ image: loc> </ image: image> </url> </ urlset >

Rozwiązanie:

Za pośrednictwem wtyczki Mapa witryny Google XML dla obrazów jest to łatwiejsze w WordPressie. Zainstaluj wtyczkę i utwórz mapę witryny dla swoich multimediów. Wtyczka zapewnia, że ​​wszystkie media wraz z treścią są zawarte w mapie witryny.XML. Google i inne wyszukiwarki zaindeksują mapę witryny na czas, ale znacznie szybciej, jeśli sam ją wprowadzisz Narzędzia Google dla webmasterów rekord.

Wniosek

Wydaje się, że trzeba wziąć pod uwagę wszystkie te techniki. I to jest prawda raz. Ale to się opłaca. Na pewno zdobędziesz kilka punktów wyżej dzięki Google Speed ​​strony i Yahoo's Y-slow .

Aby uzyskać więcej informacji lub skorzystać z tych technik, najlepiej jest zwrócić się do własnego programisty internetowego. Razem możesz skonfigurować przepływ pracy, w którym wszystko jest uporządkowane pod kątem optymalizacji obrazu.