5 sekund potrzebuje użytkownik sieci, by zainteresować się stroną internetową lub ją odrzucić. Tylko tę krótką chwilę mamy, by przekonać go, że warto z nami pozostać! Niewiele, prawda?
Aby zmieścić się w czasie, dodajemy na stronę grafikę, która przekazuje w 1/10 sekundy to, co tekst w minutę. Musimy jednak pamiętać, że grafika obciąża stronę i znacznie opóźnia jej ładowanie. Jak optymalizować obrazy na stronę internetową, by nie stracić czytelników, zanim nas odwiedzą?
Jaki rozmiar powinny mieć obrazy na stronie internetowej? W dużym uproszczeniu można powiedzieć, że optymalna wielkość pliku z grafiką to nie więcej niż 200 - 300 KB.
A co, jeśli nie chcemy upraszczać? O tym, czy nasze obrazy mają odpowiednią wagę, przekonamy się przeprowadzając testy strony. Zanim jednak przejdziemy do weryfikacji grafiki, popracujmy nad tym, by była ona jak najwyżej oceniona.
Złą praktyką jest zamieszczanie na stronie obrazów w ich oryginalnej rozdzielczości. Warto zmniejszyć rozmiary grafiki do tej, która będzie rzeczywiście wyświetlana na ekranach (w przypadku stron responsywnych ładujemy obraz w rozmiarach odpowiednich dla desktopa, a następnie dostosowujemy go do rozmiarów urządzeń mobilnych ).
Jak skalować obraz? Wystarczy obróbka w popularnych programach graficznych: Photoshop, bezpłatny Gimp (polecam), czy bezpłatny program online Pixlr editor (również godny polecenia ze względu na praktyczne filtry i spore możliwości korekty zdjęć).
Kompresja w programach do obróbki grafiki często powoduje znaczną utratę jakości obrazu, dlatego dużo korzystniejsze jest zmniejszanie rozmiarów obrazów w kompresorze online - TinyPNG. To darmowe narzędzie zmniejsza pliki w formacie JPEG oraz PNG, pozostawiając jakość obrazów w niemal nienaruszonym stanie.
Aby obraz był dobrze zoptymalizowany pod wyszukiwarkę graficzną należy nadać odpowiednie opisy:
nazwę pliku z obrazem,
tytuł obrazu,
opis alt obrazu.
Zamiast wgrywać na stronę plik o nazwie np. IMG_0435.JPG, nadajemy mu logiczną nazwę (najlepiej taką, która zawiera słowo kluczowe), np. pokoje-klasy-biznes.jpg.
Obraz powinien mieć nadany tytuł, który także zawiera słowo kluczowe. Tytuł powinien przybrać inne brzmienie niż nazwa pliku, np. Pokoje klasy biznes z widokiem na morze.
Opis alt jest też inaczej określany jako opis obrazu dla osób niewidomych i niedowidzących. On również zawiera słowo kluczowe, np. Luksusowe pokoje klasy biznes.
Cały zapis dotyczący obrazu będzie wyglądał następująco:
<img src="http://nazwadomeny/pokoje-klasy-biznes.jpg" alt="Luksusowe pokoje klasy biznes" title="Pokoje klasy biznes z widokiem na morze"/>.
Obrazy mogą być również opisane za pomocą danych strukturalnych. W ten sposób można skuteczniej i ciekawiej pozycjonować się w wyszukiwarce, np. dodać logo do opisu firmy.
Aby uzyskać taki efekt należy odpowiednio oznaczyć grafikę z logo. W tym celu należy dodać do kodu strony taki fragment:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "http://www.example.com",
"logo": "http://www.example.com/images/logo.png"
}
</script>
Poprawność kodu możemy sprawdzić na stronie udostępnionej przez Google:
https://search.google.com/structured-data/testing-tool
Więcej na ten temat danych strukturalnych można przeczytać na stronie http://schema.org/docs/schemas.html
Dla użytkowników jednego z najpopularniejszych cms-ów, Wordpressa, mam dobrą wiadomość - do dyspozycji jest kilka wtyczek, które umożliwiają wprowadzenie danych strukturalnych bez znajomości kodu html, np. WP SEO Structured Data Schema.
Ważne: dodanie danych strukturalnych do pliku nie gwarantuje wykorzystania ich przez Google. O tym, czy uzyskamy pożądany efekt decydują algorytmy wyszukiwarki.
Kiedy już wdrożymy konieczne zmiany w plikach graficznych, możemy sprawdzić, czy optymalizacja obrazów jest wystarczająca. Jednym z narzędzi, które umożliwia weryfikację jest Page Speed Insights.
Pożądany wynik w zakładce "Już zastosowane rozwiązania optymalizujące", pod hasłem "Zoptymalizuj obrazy" to: Grafiki są zoptymalizowane.
Inny test to Pingdom:
Dane dotyczące rozmiarów obrazów, przy jednoczesnym dobrym wyniku ładowania strony pozwalają ocenić optymalizację jako udaną.
Ostatnie narzędzie, które chcę tu wymienić to Test My Site. Test weryfikuje prędkość ładowania się strony mobilnej dla internetu w technologii 3G. W tym przypadku wynik nie jest już tak satysfakcjonujący. Przy prędkości 6 sek. (ocenianej jako średnią - poprawną (ale bez szału), wskazania do poprawy to m.in.: optymalizacja obrazów.
A więc... Do pracy! :)
Anna Kłyszko
Entuzjastka cyfrowego marketingu i nowoczesnych technologii stosowanych w obszarze customer experience. Z pasją wykorzystuje wszelkie dostępne narzędzia komunikacji biznesowej. Dąży do zapewnienia jak najlepszych doświadczeń klientów w cyfrowej przestrzeni marki.
Wszystkie prawa zastrzeżone © anianowak.pl
+48 512 264 372
biuro[@]anianowak.pl