Właściwa optymalizacja obrazu na stronie: co o tym wiesz?

1. Wielkość i jakość wagi
2. 1. Zmień rozmiar
3. 2. Kompresuj zdjęcia
4. JPEG, PNG lub GIF: jak dokonać właściwego wyboru?
5. Bądź ostrożny! Elementy dekoracyjne
6. Optymalizacja SEO dla witryny
7. Pierwszy krok. Wypełnij tagi alt
8. Reguły wypełniania tagów Alt
9. Trzeci krok. Podpisy pod obrazem
10. Gdzie lepiej zamieścić zdjęcie?

Co robią właściciele witryn, aby przyciągnąć więcej klientów i czytelników do swoich stron? Wybierają wysokiej jakości treści, promują zapytania LF, MF i HF, linki do zakupów. Oczywiście wiesz o tym i stosujesz w praktyce. Ale czy zwracasz uwagę na optymalizację obrazów, zdjęć, zdjęć na stronie? Czy poprawnie radzisz sobie z grafiką?

Treść
Wielkość i jakość wagi
1. Zmień rozmiar
2. Kompresuje zdjęcia
JPEG, PNG lub GIF: jak dokonać właściwego wyboru?
Bądź ostrożny! Elementy dekoracyjne
Optymalizacja SEO dla witryny
Pierwszy krok. Wypełnij tagi alt
Reguły wypełniania tagów Alt
Drugi krok. Tytuł i CNC
Trzeci krok. Podpisy pod obrazem
Gdzie lepiej zamieścić zdjęcie?

Odpowiednio dobrana treść graficzna służy nie tylko jako dekoracja stron internetowych, ale także jako dodatkowe źródło ruchu. Ponadto piękne, chwytliwe zdjęcia uwagi pomagają opóźnić uwagę odwiedzających, a tym samym przyczyniają się do poprawy czynników behawioralnych. Zobaczmy więc, co reprezentuje optymalizacja obrazu seo dla witryny.

Wielkość i jakość wagi

Szybkość ładowania stron wpływa na pozycję zasobu w wynikach wyszukiwania. Jeśli blog ładuje się zbyt wolno, prawdopodobnie utraci potencjalnego czytelnika. Znaczna część użytkowników nie chce czekać, ludzie po prostu zamykają kartę przeglądarki i przechodzą do innych witryn.

W związku z tym, w celu szybkiego przesyłania grafiki przez sieć, konieczne jest zmniejszenie jej wagi. Istnieją dwa sposoby:

• zmniejszenie rozmiaru;
• Kompresuj zdjęcia z niewielką lub żadną utratą jakości.

1. Zmień rozmiar

Szerokość głównej kolumny większości blogów nie przekracza 600-900 pikseli. Dlatego nie ma sensu wstawianie większych obrazów. Najczęściej silnik jest w stanie automatycznie zmniejszyć zbyt duże pole graficzne do dopuszczalnej szerokości. WordPress to zrobi. Jednak lepiej jest skalować ręcznie. Wynika to z faktu, że oryginał o wysokiej rozdzielczości zostanie rozładowany z serwera dla użytkowników, a to bardzo waży.

W niektórych przypadkach warto odmówić używania dużych statycznych obrazów. W celu szybkiego przeglądu dużej liczby obrazów należy użyć miniatur. Z ich pomocą klient będzie mógł szybko zobaczyć grupę podobnych produktów i znaleźć dla siebie najbardziej odpowiednie opcje. A to duży plus. Im łatwiej znaleźć odpowiednie produkty lub informacje na swojej stronie, tym lepiej.

Przykład wizualnej prezentacji miniatur. Aby wyświetlić osiem produktów, zajęło mały blok o wysokości zaledwie 300 pikseli i szerokości 650 pikseli.

Ta metoda jest szczególnie dobra dla właścicieli sklepów internetowych z dużym asortymentem. Miniatury ładują się szybko, zajmują minimalną ilość miejsca na stronie, a jeśli to konieczne, pozwalają kupującemu szczegółowo przedstawić temat.

2. Kompresuj zdjęcia

Zdjęcia o tej samej szerokości i wysokości mogą się znacznie różnić wolumenem. Niektóre ważą kilka dziesiątek kilobajtów, inne ważą setki razy więcej. Na ratunek przychodzi zmiana rozdzielczości.

Aby zmniejszyć rozmiar pliku obrazu, użyj programu Photoshop. Jeśli go nie masz, nie martw się. Dobrym analogiem będzie darmowy Gimp. Również do Państwa dyspozycji są różne usługi online . Każdy z nich ma własne przydatne funkcje. W niektórych programach dostępna jest optymalizacja obrazu partii (masy). Przetwarzanie strumieniowe znacznie przyspiesza przygotowanie zdjęć do przesłania na stronę internetową.

Ilu powinno idealnie ważyć przetworzony plik? Cel kompresji grafiki do 50-70 kilobajtów. Oczywiście nie zawsze jest to łatwe. Zwłaszcza, gdy chcesz umieścić duże kolorowe zdjęcia. Ostateczny wynik zależy nie tylko od wyboru programu do optymalizacji obrazu, ale także od formatu, w którym plik rysunku zostanie zapisany. Rozważmy tę chwilę bardziej szczegółowo.

JPEG, PNG lub GIF: jak dokonać właściwego wyboru?

Dla porównania otwórz ten sam obraz w Photoshopie i zapisz go z kompresją równoległą we wszystkich trzech formatach.

Jpeg

Powszechny format używany do obiektów graficznych. Pliki można łatwo skompresować do minimalnego rozmiaru, prawie bez utraty jakości.

PNG

Zaletą formatu png jest zapewnienie doskonałej jakości obrazu po wielokrotnych zapisach. Zwróć jednak uwagę na rozmiar. Jest znacznie wyższy niż zdjęcia w formacie jpg.

Gif

Pozwala odbierać pliki o małej wadze. Ale ze względu na zauważalne zniekształcenia nadaje się tylko do małych przedmiotów. Nie używaj tego formatu do dużych zdjęć. Ale dla miniatur, przycisków, elementów menu okazał się doskonały.

Jeśli chodzi o jakość / rozmiar, moim zdaniem JPEG jest na czele.

Bądź ostrożny! Elementy dekoracyjne

W dążeniu do wizualnego wyglądu bloga niektórzy webmasterzy zapominają o moderacji. Oczywiście można ozdobić sekcje i nagłówki różnymi kolorowymi czapkami, udekorować piwnicę, włożyć chwytliwe guziki. Ale wszystko to może znacznie zmniejszyć szybkość ładowania strony, co powoduje odpływ odwiedzających. W końcu sam nie jesteś gotów czekać minutę lub dwie, aby utworzyć interesującą stronę.

Podczas pracy z elementami dekoracyjnymi:

• Sprawdź ich rozmiar. Nierozsądnie ciężkie bloki bez żalu, usuń;
• Używaj kaskadowych arkuszy stylów, kiedy tylko możesz;
• Sprawdź swój zasób pod kątem szybkości pobierania.

Optymalizacja SEO dla witryny

Dlaczego musisz optymalizować zawartość graficzną? Następnie, aby przyciągnąć trochę więcej odwiedzających. Nie należy oczekiwać zmian globalnych (chyba że oczywiście nie sprzedaje się produktu, którego szukają ludzie, w tym zdjęcia). Można jednak zauważyć pewien wzrost ruchu.

Pierwszy krok. Wypełnij tagi alt

Opóźnienia Alt to tekstowa reprezentacja obrazu wyświetlanego użytkownikowi, dopóki samo zdjęcie nie zostanie załadowane. Ten atrybut może być również przydatny w optymalizacji SEO zasobu internetowego. Na przykład zaawansowane kwerendy kluczowe mogą być używane jako znaczniki alt. Ważne jest, aby były one odpowiednie dla wybranego obrazu.

Reguły wypełniania tagów Alt

• użyj zapytań;
• napisz tag po łacinie;
• nie przesadzaj z długością. Na przykład znacznik alt „kupować mieszkanie na przedmieściach rabatów; raty ratalne przez macierzystą sprzedaż kapitałową w hipotece” nie jest zbyt udany. Postaraj się zachować do 55-60 znaków;
• nie warto spamować. Jeden klucz wystarczy;
• tag musi pasować do obrazu. Jeśli zdjęcie pokazuje Scarlett Johansson, nie pisz mętnej frazy „modne włosy do 2017 roku” na Alt. Bardziej udana byłaby wersja „fryzury Scarlett Johansson w MTV Awards”;
• elementy dekoracyjne do wypełnienia nie wymagają etykiet. Wyszukiwarki uznają takie posunięcie za ponowną optymalizację i zmniejszają pozycję zasobu w kwestii.

Drugi krok. Tytuł i CNC

Tytuł powinien być inny niż znacznik Alt, ale także napisany łacińskimi znakami. Tytuł zapewnia dodatkowe informacje dla wyszukiwarek o opublikowanym obrazie.

Jeśli to możliwe, przepisz osobisty adres URL. Na przykład, jeśli rysowana jest motorówka, wpisz nazwę motornaya-lodka.jpeg lub motorboat.jpeg. Taki adres URL zawiera więcej przydatnych informacji zarówno dla osoby, jak i wyszukiwarki. Przecież na przykład 14789.png nie jest całkowicie informacyjny i nie przyczynia się do przyspieszenia wyszukiwania.

Trzeci krok. Podpisy pod obrazem

Służy do dostarczania użytkownikowi dodatkowych informacji. Największym efektem są strony z dużą ilością grafiki i niewielkim procentem informacji tekstowych, na przykład w katalogach sklepów internetowych.

Podpis może również zawierać klucz z wyprzedzeniem.

Gdzie lepiej zamieścić zdjęcie?

Wydawałoby się, że takie proste pytanie, ale także ma znaczenie. Artykuł z dobrze dobranymi obrazami wysokiej jakości autorstwa Google i robotów wyszukiwania Yandex oceni się lepiej niż podobny tekst o jakości tekstu bez zdjęć. Graficzne wstawki mogą wyjaśnić cały materiał lub jego poszczególne części. W związku z tym najlepszym rozwiązaniem jest umieszczenie zdjęć w bezpośrednim sąsiedztwie tekstu, do którego się odnoszą.

Wyszukiwarki stają się coraz mądrzejsze każdego dnia. Mogą już wybierać pojedyncze obiekty na obrazie. Ale dla lepszej analizy obrazu potrzebny jest kontekst tekstowy. Dlatego odpowiednia kombinacja grafiki i bloku tekstu spełnia pozytywną reakcję botów wyszukiwania. Dodatkową zaletą będzie bliskość obrazu nagłówków h2-h5.

Podsumujmy

Sama optymalizacja obrazu nie wystarczy, aby radykalnie zmienić pozycję zasobu internetowego w wynikach wyszukiwania. Jednak użycie powyższych technik pozwoli ci, choć nieznacznie, zwiększyć przepływ gości i poprawić czynniki behawioralne. To z kolei sprawi, że strona będzie bardziej jakościowa i skuteczna.

Życzę Wam więcej udanych publikacji i wysokiej jakości rysunków.

Inne interesujące artykuły: