Jak optymalizować obrazy na stronę internetową

01 maja 2018

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?

Kompletna misja firmy

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ą?

 

 

 

Jak optymalizować obrazy - krok po kroku

 

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.

 

 

 

Krok I - skalowanie obrazu

 

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ęć). 

 

 

 

Krok II - kompresja obrazów

 

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.

 

 

 

 

 

Krok III - nazwa pliku, tytuł i  meta opis obrazu

 

Aby obraz był dobrze zoptymalizowany pod wyszukiwarkę graficzną należy nadać odpowiednie opisy:

  • nazwę pliku z obrazem, 

  • tytuł obrazu,

  • opis alt obrazu.

 

Nazwa pliku graficznego

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.

 

Tytuł obrazu

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 obrazu

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"/>.

 

 

 

Krok IV - dane strukturalne

 

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.

 

 

 

Test optymalizacji obrazów

 

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.

Przeczytaj też:

16 listopada 2024
3 powody, dla których średnie firmy powinny inwestować w strategię marketingową W świecie, gdzie konkurencja rośnie z dnia na dzień,
03 listopada 2024
Czym jest komunikacja w marketingu B2B i dlaczego jest istotna? W świecie marketingu różnica między B2B (business-to-business) a B2C (business-to-consumer)
02 listopada 2024
Tworzenie landing page w B2B to ciekawy proces, który wymaga strategicznego podejścia, bo jego odbiorcami są różnorodne osoby decyzyjne z

Wszystkie prawa zastrzeżone © anianowak.pl

Twój e-mail
Treść wiadomości:
Wyślij
Wyślij
Formularz został wysłany. Dziękuję!
Proszę wypełnić wszystkie wymagane pola!

+48 512 264 372

biuro[@]anianowak.pl