Optymalizacja obrazu w celu zwiększenia szybkości witryny i promocji witryny - Semalt Expert

Obrazy są jednym z najważniejszych elementów sieci, oczywiście po tekście. Strona internetowa bez obrazów będzie zwykle nudna i mniej motywująca dla internautów niż witryna zawierająca obrazy.

Istnieje również wiele obszarów, w których użycie obrazów jest obowiązkowe, a nawet konieczne, aby uzasadnić witrynę.

Na przykład:

Witryny handlowe online
Witryny z portfolio i wyświetlanie prac
Witryny ze zdjęciami, których „produktem” są zdjęcia - na przykład suknie ślubne, zdjęcia z wydarzeń itp.
Sieci społecznościowe - Coraz więcej badań wskazuje na fakt, że posty ze zdjęciami otrzymują znacznie więcej komentarzy i udostępnień, o znaczny procent w porównaniu do postów i statusów bez zdjęć

Promocja obrazu Google: prawidłowe używanie obrazów

Czy zainwestowałeś i kupiłeś zdjęcia w witrynach ze zdjęciami/repozytoriach zdjęć, a może nawet sam powiększyłeś i zrobiłeś zdjęcia? Powinieneś także zmaksymalizować je do celów SEO!

Google Image Promotion jest jednym z najlepsze sposoby na zwiększenie ruchu w witrynie w niektórych obszarach - szczególnie tych, które koncentrują się na stronie wizualnej.

Mimo wszystko niewłaściwe użycie obrazów może wyrządzić więcej szkody niż pożytku dla witryny, a nawet znacznie utrudnić działania promocyjne. Mówiąc o wykorzystaniu obrazów w kontekst promocji ekologicznej, należy również pamiętać o kilku zasadach, niewłaściwe wykorzystanie zdjęć może znacząco wpłynąć na szybkość działania witryny, a tym samym może mieć znaczący wpływ na promocję.

Podstawowe zasady optymalizacji obrazu:

1. Waga i wymiary obrazu

Jednym z ważnych parametrów promowania zdjęć w Internecie - jest waga obrazu.

Z jednej strony chcielibyśmy używać wysokiej jakości obrazów, ale z drugiej strony nie będzie to kosztować szybkości działania witryny, wrażeń użytkowników i promocji. Zaleca się zawsze „optymalizować” (od optymalizacji słów) obrazy do maksymalnego możliwego bez znaczącego obniżania jakości. Aby to zrobić, przestrzegaj wszystkich następujących zasad:

Korzystanie z formatu odpowiedniego do różnych sytuacji (jpg, png, gif i więcej) - pełne informacje na temat różnych typów formatów poniżej.
Ważne - Ustawianie wymiarów każdego obrazu na stronie - Unikaj wyświetlania obrazu mniejszego niż rzeczywisty (fizyczny) rozmiar obrazu tak bardzo, jak to możliwe, aby nie marnować niepotrzebnych zasobów. Im większa i bardziej mobilna witryna, tym większe znaczenie.
Zapewnianie dopasowywania responsywnego - jeśli pracujesz z WordPress i nowoczesnym szablonem, prawdopodobnie zamknąłeś ten róg. Ale jeśli nie, ważne jest, aby zawsze upewnić się, że obrazy w witrynie, zwłaszcza obrazy znajdujące się w postach, są responsywne i dobrze wyświetlane na urządzeniach mobilnych, tabletach itp.
Maksymalna kompresja wagi obrazu bez znaczącego pogorszenia jakości (rozwinięcie narzędzi i metod służących do tego - poniżej).

Zalecana waga zdjęć

Prawie każdy obraz można skompresować w takim czy innym stopniu, dlatego zawsze zaleca się używanie tylko tych wymiarów, które są naprawdę potrzebne i które są fizycznie wyświetlane w witrynie, i zmniejsz wagę obrazów w jak największym stopniu. Dotyczy to każdej witryny. Ale szczególnie w przypadku witryn z dużą ilością obrazów. Nie ma jednej reguły, która byłaby prawdziwa we wszystkich przypadkach, ale zaleca się upewnienie się, że waga obrazu nie przekracza 70-80K, chyba że jest to obraz galerii/slidera o szczególnym znaczeniu.

2. Wybierz odpowiednią nazwę obrazu

Podczas wyszukiwania obrazów w Google branych jest pod uwagę kilka parametrów, aby wyświetlić obraz odpowiedni dla zapytania. Jednym z nich jest nazwa pliku. Zaleca się poświęcić kolejną sekundę i nadać obrazowi nazwę opisującą to, co widzisz na obrazku. Ważne jest, aby zachować nazwę pliku w języku angielskim i używać środkowych linii, a nie spacji. Powodem jest to, że Google lepiej radzi sobie ze środkowymi myślnikami.

Przykłady złej nazwy zdjęcia:

DSC2387.jpg

Site promoter.png

Przykład dobrej nazwy obrazu:

Search-engine-optimizer.jpg

Dla tych z Was, którzy się zastanawiają - tak, Google wie, jak radzić sobie z angielskimi nazwami obrazów również w innych językach. Ponieważ wie, jak tłumaczyć ciągi wyszukiwania i zaznaczać przetłumaczone słowa w wynikach wyszukiwania.

3. ALT na obraz

Znacznik alt, który jest skrótem od alternatywy, jest parametrem, który ma na celu opisanie obrazu. Znacznik alt jest definiowany w systemie zarządzania/kodzie HTML dla każdego obrazu z osobna, a jego pierwotną funkcją jest służenie osobom niewidomym i niepełnosprawnym, którzy używają specjalnego oprogramowania, które skanuje te tagi i czyta to, co jest napisane.

W kodzie technicznie wygląda to tak:

<imgsrc="drzewo.jpg" alt="drzewo">

Oprócz znaczenia tagu pod względem dostępności strony internetowej, ma on również znaczenie dla wyszukiwarek. Znacznik alt pomaga wyszukiwarkom zrozumieć, jaki jest temat obrazu (wraz z innymi elementami, takimi jak nazwa pliku, kontekst strony, na której się znajduje, itp.), A także naturalnie wpływa na wyszukiwanie obrazów w Google.

Ponadto tag alt jest częścią optymalizacji na stronie dla wszystkiego. Ponadto, gdy z obrazka wychodzi link zewnętrzny, znacznik alt służy jako rodzaj kotwicy tekstu („tekst kotwicy”) obrazu.

Jak sprawdzić, czy obraz ma tag ALT?

Istnieje kilka sposobów:

Całą drogę - kliknij myszką na obrazek -> kliknij prawym przyciskiem myszy -> zaznacz element (treść różni się w różnych przeglądarkach).
Chcielibyśmy poszukać znacznika w komendzie <img>, jak pokazano wcześniej.
Użyj wtyczki o nazwie Web Developer (świetnej do wielu innych zadań). Rozszerzenie pozwala nam jednym kliknięciem przycisku wyświetlić wszystkie tagi alt, które obrazy mają na określonej stronie.

Krzycząca Żaba - Użyj żaby odpowiedniej, gdy chcemy dokładnie zeskanować obrazy w serwisie.

Proces polega na wprowadzeniu adresu URL do skanowania, a następnie kliknięciu karty Obrazy.

Tam zobaczymy listę zdjęć na stronie, które można sortować według kilku parametrów:

Obrazy ważące więcej niż 100 kb
Obrazy bez tagów ALT
Obrazy z tagami ALT, które zawierają więcej niż 100 znaków (i prawdopodobnie powinieneś je nieco skrócić)

Jest oczywiście więcej sposobów i różnego rodzaju wtyczek, ale wydaje mi się, że omówiłem ten temat w kategoriach zapotrzebowania na konkretną stronę i obszernej recenzji witryny.

Promocja obrazu Google - wskazówki dotyczące optymalizacji tagów ALT

Nie powinieneś wymuszać słów kluczowych, ale spróbuj opisać to, co widzisz na obrazku.

Skoro można połączyć opis zdjęcia z odpowiednimi słowami kluczowymi, aby wyróżnić się w naturalny sposób - co dobrego.
Nie ma potrzeby wyolbrzymiania opisu, tag alt składający się z 2 do 5 słów jest więcej niż wystarczający.
Zaleca się, aby znacznik alt i znacznik tytułu obrazu nie były identyczne.
W przypadku witryn handlowych - jeśli produkt ma numer modelu, zaleca się użycie go w tagu alt (aby pojawiał się w wyszukiwarce grafiki Google).

Nie ma potrzeby używania altów do tapet/obrazów dekoracyjnych - nawet jest to zalecane, aby Google nie podejrzewał, że próbujesz nadmiernie optymalizować.

4. Znacznik tytułu obrazu

Podpisy do obrazów lub Podpisy to rodzaj podpowiedzi, które można zobaczyć, przesuwając kursor myszy nad obrazem. Wiele osób myli je z tagami ALT.

Tytuły obrazów to kolejne wskazanie trafności i tematu obrazu, które mogą pomóc Google zrozumieć, o czym mówi obraz, i poprawić jego ranking w wyszukiwarce grafiki. W przeciwieństwie do tagu ALT, tag tytułowy będzie zwykle bardziej opisowy i nieco dłuższy, a jego celem jest opisanie internaucie, co jest widoczne na obrazku i/lub co pojawi się po kliknięciu w obrazek. Witryny z wiadomościami często używają tego tagu.

Tak to wygląda w kodzie:

5. Typy obrazów i rozszerzenia plików

Istnieje kilka popularnych formatów używania obrazów online. Pokrótce omówię każdą z nich:

JPEG/JPG - Najstarszy i prawdopodobnie najpopularniejszy format obrazów w Internecie. Zaletą formatu JPG jest możliwość wyświetlania obrazów o stosunkowo wysokiej jakości i niewielkiej wadze. Obrazy JPG nie obsługują krycia.
GIF - Format GIF jest również z nami już od dłuższego czasu, począwszy od czasów, gdy były jeszcze dyskietki. Gify obsługują tylko 256 kolorów, więc są formatem obrazu o niższej jakości i są przeznaczone głównie do użytku jako ikony lub różnego rodzaju dekoracje. Ponadto format GIP obsługuje animacje, a nawet Facebook niedawno zaczął wspierać ten format w źródle treści.

Podsumowując - gify nie są przeznaczone do wyświetlania obrazów, zwłaszcza jeśli chodzi o jakość obrazu, ale do prostszych ikon, animacji i elementów.

PNG - To jest (stosunkowo) nowy format w tej grupie. Główne zalety plików PNG - wyższa jakość w porównaniu do JPG i GIF oraz obsługa przezroczystości. Pliki PNG są podzielone na 2 formaty - PNG24, który jest lepszej jakości (i odpowiednio do wagi obrazu) oraz PNG8, który jest najbardziej ekonomiczny ze wszystkich.

Dostępnych jest wiele innych formatów obrazów, ale są one mniej przydatne w witrynach internetowych.

Wskazówka - Dla tych, którzy używają Photoshopa, zawsze zalecam porównywanie wagi obrazu za pomocą funkcji Save for web i urządzeń między różnymi formatami (przed zapisaniem pliku jest podgląd wagi obrazu).

Podstawowe zasady wyboru formatów obrazów

W większości przypadków format JPG wystarczy. Obrazy JPG zapewniają wysoką jakość i niską wagę pliku.
Nie używaj GIF-ów w dużych plikach, które zawierają wiele szczegółów - waga pliku będzie duża. Format nie jest do tego przeznaczony i jest bardziej odpowiedni do stosowania z małymi i prostymi elementami.
Jeśli przezroczystość odgrywa ważną rolę - użyj formatu PNG. Zawsze zaleca się porównanie plików PNG24 i PNG8, aby zmniejszyć wagę obrazów do minimum.

6. Właściwe wykorzystanie miniatur

Miniatury (podglądy) są ważnym, a nawet krytycznym elementem niektórych witryn - zwłaszcza witryn opartych na galeriach i witrynach handlowych. Miniatury („Miniatury” Google Translateâ € ¦) mogą z jednej strony być świetne, ale z drugiej znacząco sabotować witrynę i wygodę użytkowników.

Najważniejszą rzeczą przy korzystaniu z tych obrazów jest utrzymanie rozsądnej jakości i jak najniższej wagi. W dużych witrynach handlowych, które korzystają z miniatur do wyświetlania stron kategorii i podglądów produktów, ten fakt jest szczególnie ważny. Czy wiesz, że każda sekunda opóźnienia w załadowaniu strony kosztuje Amazon 1,6 miliarda dolarów rocznie? Większość czasu wczytywania takich witryn to obrazy.

Prawdą jest, że większość z nas może tylko pomarzyć o posiadaniu takiego miejsca. Ale wiesz - duże zmiany zaczynają się od dołu do góry, a te małe. Im szybciej się zajmiemy, tym lepiej.

Wskazówki dotyczące prawidłowego korzystania z miniatur

Zdecydowanie zaleca się utworzenie miniatury dla miniatury i większego obrazu samej strony produktu. Nie używaj dużego zdjęcia jako miniatury! Spowoduje to kilkukrotne wczytanie obciążenia witryny, zwłaszcza gdy na jednej stronie znajduje się wiele miniatur. W różnych systemach CMS jesteś automatycznie zwolniony z tego problemu.

Jeśli chodzi o zasady optymalizacji obrazu, zaleca się inwestowanie więcej w duże obrazy niż w miniatury. Na przykład - nie umieszczaj miniatur w mapie witryny z obrazami (rozszerzenie poniżej), w niektórych przypadkach nawet nie ustawiaj dla nich tagów ALT. Ambicją jest to, że Google indeksuje duże zdjęcia kosztem miniatur, a nie odwrotnie.

Zaleca się ustawienie tytułu obrazu na miniatury, które opisują produkt w kilku słowach i ogólnie to, co zobaczy internauta po kliknięciu w obrazek.

Jeśli każda strona kategorii produktów zawiera wiele produktów (powiedzmy ponad 30), zaleca się użycie skryptu Lazy Load, który ładuje obrazy tylko wtedy, gdy internauta przewija do obszaru, w którym się znajdują.

7. Stosowanie zawijanego tekstu

Zwykle obrazy służą tekstowi, a nie na odwrót. Ale jeśli chodzi o optymalizację obrazu i promocję obrazu w Google, a jeśli strona jest siecią opartą na obrazach, to bardzo warto nie zaniedbywać kwestii tekstów, nawet jeśli są to podstawowe rzeczy.

Dla tych, którzy chcą zachować czysty i minimalistyczny wygląd, jak to tylko możliwe (na przykład na stronie portfolio fotografa), zaleca się, aby przynajmniej zdefiniował następujące elementy na każdej stronie, na której znajduje się obraz:

H1 Zgodnie z tematem obrazu
Krótki opis (nawet 10-20 słów jest lepszy niż nic) na obrazku, najlepiej z odpowiednim słowem kluczowym lub dwoma
Tytuł i opis są oczywiście istotne (w przypadku, gdy jest to strona fizyczna, a nie obraz wyskakujący z galerii).
Tytuły alternatywne i zdjęcia - w tym przypadku bardzo zalecane.

8. Mapa strony ze zdjęciami

Mapa witryny z obrazami (image-sitemap.xml) pomaga Google lepiej czytać i indeksować nasze obrazy w witrynie. Podobnie jak w przypadku standardowej mapy witryny XML, mapę witryny z obrazami można przesłać za pomocą Search Console w obszarze map witryn.

Dodaj mapę witryny w Search Console

Mapa strony z obrazami jest szczególnie przydatna podczas korzystania z wszelkiego rodzaju galerii ze skryptami i różnymi efektami - które Google ma trudności z konwencjonalnym skanowaniem.

Istnieją pewne parametry korzystania z map witryn z obrazami.

Jak stworzyć mapę witryny?

WordPress - jak zwykle, jeśli pracujesz na WordPress, Twoje życie jest łatwe. Wtyczka Udinra All Image Sitemap zamyka róg. Wszystko, co musisz zrobić, to zainstalować wtyczkę, zaznaczyć V w ustawieniach, utworzyć mapę witryny i uruchomić ją w Google przez Search Console.

Na każdej innej platformie - to zależy. Jeśli nie ma rozwiązania Out of box, takiego jak wtyczka itp., Można to zrobić za pomocą Screaming Frog.

Żaba może pomóc w łatwym utworzeniu mapy witryny z obrazami. Jedyny problem - nie aktualizuje się automatycznie (w przeciwieństwie do wtyczki) i musi być co jakiś czas odświeżany.

Jak to robisz?

Należy wykonać pełne skanowanie żądanej witryny, a następnie w górnym menu oprogramowania przejść do Mapy witryny -> Utwórz obrazy Mapa witryny. Otrzymasz koszerny plik XML do użycia i uruchomienia za pośrednictwem Search Console.

9. Zachęcaj do udostępniania zdjęć

Jeśli chwalisz się częstym wykorzystaniem oryginalnych obrazów (czy to fizycznego, czy elementu graficznego), a obrazy są główną lub przynajmniej istotną częścią witryny, bardzo warto zachęcić użytkowników do udostępniania zdjęć w mediach społecznościowych sieci i ułatw im to.

Jak zwykle mam praktyczne wskazówki dotyczące platformy WordPress, w innych systemach polecam skorzystać z programatora lub sprawdzić, czy jest do tego dedykowana wtyczka.

WordPress ma 2 fajne wtyczki do tego celu:

Social Image Hover for WordPress - płatna wtyczka (em; lakier do paznokci - 17 USD).
Pinterest Pin it Button - wtyczka, która dodaje małą ikonę Pinterest do zdjęć w serwisie.

10. Narzędzia do redukcji i optymalizacji obrazu

TinyPNG - doskonała usługa, która pozwala kompresować obrazy online za pomocą szczególnie wygodnego interfejsu przeciągania. Mają też API, które pozwala na pracę w większych ilościach i automatycznie, a także świetną wtyczkę do WordPressa, która pozwala na kompresję wszystkich obrazów w serwisie - wymaga użycia ich API (za darmo do 500 obrazów miesięcznie).

Fotosizer - ładne oprogramowanie komputerowe, które pozwala edytować obrazy w dużych ilościach - nie tylko kompresję, ale także zmniejszenie wymiarów, dodawanie znaków wodnych i różnych efektów do obrazów i wiele innych fajnych funkcji.

Wniosek

Właśnie zrozumiałeś, jak ważna jest optymalizacja obrazów witryny internetowej. Jeśli jednak chcesz poznać aktualny stan swojej strony, możesz to zrobić za darmo, dzięki Semalt Konsultacje SEO.

Semalt pomoże Ci zidentyfikować problemy SEO związane z Twoją witryną. Ponadto z Semalt Experts możesz łatwo poprawić wydajność swojej firmy online po niższych kosztach.

send email