Jak zoptymalizować grafiki na stronie internetowej? Poradnik o Image SEO

Dzisiejsi użytkownicy oceniają stronę internetową już od pierwszego spojrzenia. Dlatego koniecznie musisz zadbać, aby przyciągała wzrok i każdy najmniejszy detal został dokładnie przemyślany. Doskonałym sposobem na lepszy odbiór witryny jest dodanie większej liczby grafik. Wtedy jednak trzeba też zwrócić uwagę również na stronę praktyczną, czyli zadbanie o prawidłową optymalizację zdjęć na stronie online. Poznaj sekrety Image SEO i zacznij je wdrażać na swojej witrynie.

| Dlaczego optymalizacja zdjęć na stronie internetowej jest ważna?

Oto kilka najważniejszych powodów, które sprawią, że zaczniesz wdrażać zasady związane z optymalizacją grafik:

• Strona szybciej się ładuje

Szybkość ładowania się strony jest uzależniona od tego, ile ona “waży”. Duża liczba nieskompresowanych grafik może znacząco opóźnić wczytywanie. Wpłynie to na pozycjonowanie w wyszukiwarce, gdyż Google uznaje szybkość ładowania się witryny za jeden z czynników mających znaczenie podczas ustalania pozycji w wynikach wyszukiwania. Do tego użytkownicy także doceniają ten aspekt i chętniej odwiedzają strony, wczytujące się błyskawicznie, gdyż nie muszą wtedy czekać oraz tracić czasu.

• Zaczniesz pozycjonować się w Google Grafika

Dobrze wykonana optymalizacja sprawia, że możesz czerpać korzyści również z pojawienia się w wyszukiwarce Google Grafika. W końcu tam również trwa walka o pozycję, dlatego, nawet jeśli twoja konkurencja jeszcze nie doceniła potęgi grafik, to bądź pierwszy lub pierwsza oraz dzięki temu m.in. zwiększ liczbę wyświetleń swojej witryny.

• Zużywasz mniej transferu z hostingu

Każdy serwer ma ograniczoną liczbę miejsca, dlatego zdawaj sobie sprawę z tego, że optymalizując grafiki, dbasz też o to, aby zmieścić jak najwięcej multimediów, treści, wtyczek itd. Ze względu na to, że wszystkie te elementy cechują się jakąś pojemnością, to warto świadomie wzbogacać witrynę.

• Przyciągnij uwagę użytkowników

Optymalizacja wpływa również na jakość grafik pod względem estetycznym, co z kolei docenią internauci, odwiedzający witrynę. Ciekawe, kreatywne i wyraźne elementy graficzne mogą sprawić, że użytkownik chętniej przejrzy twoją ofertę, przeczyta artykuł na blogu, a nawet dokona zakupu.

| Jak zoptymalizować grafiki na stronie internetowej? Praktyczne wskazówki

Podczas optymalizacji grafik należy zwrócić uwagę na kilka kwestii. Dopiero gdy uwzględni się wszystkie, będzie można zyskać pewność, że elementy graficzne zostały dostosowane do aktualnie zalecanych standardów.

Rozmiar grafik

Rozmiar, czyli waga zdjęcia czy innego elementu graficznego jest kluczowa, więc to właśnie od zadbania o niego trzeba rozpocząć optymalizację. Odpowiedni rozmiar powinien wynosić ok. 200 KB. Zbyt ciężkie pliki sprawiają, że strona działa wyraźnie wolniej, dlatego warto wyrobić w sobie nawyk, aby przed dodaniem każdego artykułu na bloga czy produktu w sklepie internetowym, wcześniej dokonać kompresji.

Kompresja grafik

Każdy, kto chce prawidłowo zoptymalizować obrazy, powinien dowiedzieć się, jak prawidłowo dokonać ich kompresji. Koniecznie trzeba pamiętać o tym, aby nie przesadzić ze zmniejszaniem wagi zdjęcia, aby nie odbiło się to zbyt mocno na jakości.
Istnieje wiele narzędzi pozwalających wykonanie kompresji elementów graficznych, ale do najbardziej znanych należą:
● Optimizilla,
● TinyPNG,
● TinyJPG.

Formaty grafik

Istnieje wiele formatów związanych z grafikami, jednak jeśli chodzi o te, które wykorzystywane są w kontekście strony internetowej, to można wyróżnić przede wszystkim trzy – JPG, GIF oraz PNG. Najczęściej stawia się dziś na format JPG i JPEG, gdyż pozwalają na pełną kompresję. Niekiedy jednak dochodzi tutaj do utraty jakości, dlatego warto wypośrodkować te dwie zależności, czyli jakość i rozmiar grafiki, aby nie przechylić szali na jedną lub na drugą stronę. Zaleca się wybierać jakość 80%, czyli idealny kompromis. Choć trzeba zdawać sobie sprawę z tego, że przy każdym obrazie może to wyglądać odrobinę inaczej. JPG znajduje zastosowanie przy różnych grafikach, w tym przy rastrowych czy przy różnych zdjęciach.
W przypadku formatu GIF musisz pogodzić się z tym, że będziesz mieć do czynienia z gorszą jakością obrazu, niż w przypadku formatu JPG (o ile zdjęcie nie zostało przesadnie skompresowane). Ten format najczęściej znajduje zastosowanie przy ikonach, animacjach lub niekiedy przy obrazach.
Pliki PNG są często niedoceniane, a to duży błąd, gdyż wyróżniają się tym, że nie tracą jakości nawet po kompresji. W dodatku dotyczą grafik rastrowych. Często można odróżnić ten format od JPG, gdyż na samym początku ładowania cechuje się gorszą jakością, jednak już po chwili obraz się wyostrza. Zazwyczaj wykorzystywany do wykresów, tła, ikonek, logo i innych prostych ilustracji.

Rozdzielczość zdjęć

Rozdzielczość jest bardzo istotna w kontekście szybkości ładowania się witryny, ale niestety nie każdy zdaje sobie sprawę z tego, jak duży potencjał w niej tkwi. Szczególnie jest to widoczne w przypadku sklepów internetowych, gdzie zdjęcia produktów wykonywane są samodzielnie przez właściciela lub pracownika. Wtedy też rozdzielczość jest zazwyczaj zbyt duża i przy okazji rozmiar zdjęcia także ma kilka lub kilkanaście megabajtów. Najlepiej zatem zadbać o to, aby szerokość obrazów w tle czy w nagłówkach miała nie więcej niż 1600 pikseli, z kolei pozostałe zdjęcia w postach na blogach ok. 1000 pikseli.

Skalowanie grafiki

Przed zapisaniem obrazów na stronie www warto je też przeskalować, aby miały dokładnie taki rozmiar, jaki jest potrzebny. Nie ma potrzeby przesyłać grafiki, które będą miały znacznie większy rozmiar, nawet jeśli zostanie automatycznie przeskalowany, jak to ma miejsce w przypadku WordPressa.

| Image SEO — jak wdrożyć na stronie www?

Kiedy zadbasz już o wszystkie elementy, o których mowa była powyżej, to będziesz mógł lub mogła zająć się kwestiami jeszcze bardziej związanymi z SEO. Podczas optymalizacji grafik typowo pod kątem wyszukiwarki najważniejsze będzie znalezienie odpowiednich słów kluczowych. Kiedy ten etap będzie już za tobą, to możesz zająć się pisanie treści i właśnie działaniem zgodnym z Image SEO.

Krok 1 – Zmień nazwy plików graficznych

Bardzo ważne jest to, aby każda grafika posiadała indywidualnie nadaną nazwę, składającą się ze słowa kluczowego. Poza tym oczywiście powinna odzwierciedlać to, co znajduje się na zdjęciu lub innym elemencie graficznym i do tego nie zawierać polskich znaków. Nazwa może składać się z kilku słów, ale wtedy trzeba rozdzielić je myślnikami.
Przykład – kosiarka-do-trawy.jpg

Krok 2 – Sprawdź adres URL

Pozostając jeszcze na moment przy nazwach grafik, zauważ, że zazwyczaj nazwa staje się częścią adresu URL. Jednak zawsze należy sprawdzić, czy aby na 100% tak się stało. W razie potrzeby zoptymalizuj adres ręcznie.

Krok 3 – Podpisz grafikę

Podpis pod zdjęciem nie jest krokiem obowiązkowym, jednak warto się na niego zdecydować. Główną zaletą w tym przypadku jest możliwość zawarcia słów kluczowych w miejscu, które nie będzie nikogo razić, a może zdziałać dużo dobrego w kwestii pozycji w wynikach wyszukiwania. Koniecznie zadbaj o to, aby podpis wyglądał i brzmiał całkowicie naturalnie, gdyż tylko w ten sposób zostanie doceniony przez Google.
Czasami wykorzystuje się go też do tego, aby zawrzeć źródło, z którego zaczerpnęło się zdjęcie.

Krok 4 – Zapisz atrybut ALT

Kolejną czynnością, jaką należy wykonać jest wpisanie parametru ALT, czyli tekstu alternatywnego. Będzie to informacja szczególnie przydatna dla robotów Google, które w ten sposób dowiedzą się, co dokładnie znajduje się na zdjęciu. Warto zatem poświęcić kilka chwil na wprowadzenie tego atrybutu do każdej grafiki. Również w tym przypadku warto wykorzystać słowo kluczowe. Podczas wymyślania ALT koniecznie zwracaj uwagę na to, aby był on prosty i mający odzwierciedlenie w rzeczywistości.
Przykład:
W kodzie strony atrybut ALT przybiera następujący obraz:
<img src=””http://nazwastrony/kosiarka-do-trawy.jpg”” alt=””Czerwona” />.
Jeśli korzystasz z CMS-a, jakim jest WordPress, to będziesz mieć do dyspozycji specjalny kreator do uzupełnienia nazwy, title oraz właśnie atrybutu ALT. Dzięki czemu nie trzeba znać się na kodowaniu nawet w najmniejszym stopniu.
Ciekawostka! Ustawienie atrybutu ALT jest też pomocne dla osób niewidomych lub niedowidzących, korzystających z czytnika ekranowego. Dzięki temu urządzenie przeczyta im zawartość strony, w tym także przekaże informacje o tym, że na stronie pojawiły się zdjęcia i co się na nich znajduje.

Krok 5 – Wymyśl atrybut title

Poświęć jeszcze chwilę na to, aby zapisać trafny atrybut title. Użytkownik będzie mógł go ujrzeć, gdy najedzie kursorem na grafikę. Warto trzymać się zasady mówiącej, że ALT i title nie powinny być takie same.
Przykład:
<img title=””Nowoczesna” src=””http://nazwastrony/kosiarka-do-trawy.jpg”” alt=””Czerwona” />

Krok 6 – stwórz sitemapę grafik

W przypadku, gdy na twojej stronie www znajduje się wiele różnych grafik, to doskonałym pomysłem będzie wykonanie specjalnej sitemapy XML dla obrazów. W praktyce jest to po prostu spis linków, zawierających wszystkie istotne pliki graficzne w obrębie witryny. Można ją zrobić w prosty i szybki sposób przy pomocy różnych narzędzi online czy też wtyczek (w przypadku WordPressa). Wujek Google na pewno doceni taki ukłon w jego stronę i postara się podwyższyć pozycję strony w wynikach wyszukiwania.

Omów z nami swój pomysł

Napisz do nas

• Wyrażam zgodę na przetwarzanie danych osobowych w celach marketingowych. Administratorem danych osobowych jest PRO Solution Sp. z o.o., 40-148 Katowice, Bytkowska 107/54, NIP: 9542736446.

| 4 strony z darmowymi grafikami na stronę www i nie tylko

Skoro różnego rodzaju grafiki powinny znaleźć się na stronie internetowej, to należy zadbać również o to, aby nie łamały one praw autorskich. Najbezpieczniejszą opcją będzie oczywiście wykonanie zdjęć samodzielnie. Jednak, jeśli nie chcesz tracić na to czasu lub nie jest to możliwe, to wtedy możesz skorzystać z grafik udostępnianych na wolnej licencji lub oczywiście wykupując dostęp do nich. Jeśli nie zamierzasz wydawać pieniędzy, skorzystaj z następujących źródeł:

● Pixabay — to strona z darmowymi zdjęciami, które warto wykorzystać m.in. na blogu firmowym. Fotografii jest tam tak wiele, że zadowolą naprawdę każdego, niezależnie od poszukiwanego tematu.
● Pexels — kolejna strona z grafikami z licencją CC0, czyli domeną publiczną, które można do woli wykorzystywać.
● Unsplash — szeroki wybór przepięknych fotografii do wykorzystania na stronie i blogu. Ciekawostką jest to, że podczas poszukiwań zdjęć możesz oprócz frazy kluczowej wpisać także kolor, który ma być dominujący na grafice. Dzięki temu wszystkie elementy graficzne będą bardziej do siebie dopasowane.
● Freepic — w tym przypadku możesz korzystać z potężnej biblioteki grafik, z których można wykonać logo, bardziej indywidualne obrazy, wizytówki i elementy graficzne na bloga czy stronę www. Nie brakuje tutaj również grafik wektorowych.
Alternatywnym rozwiązaniem jest przeszukanie Wyszukiwarki Google Grafiki. Jednak nie ze wszystkich zdjęć można wtedy korzystać. Wybierając tę opcję zaleca się nacisnąć opcję Narzędzia, a następnie Prawa do użytkowania, aby wybrać jedną z dostępnych tam opcji. Dzięki temu wyświetlą się, np. zdjęcia, które posiadają licencję pozwalającą na ponowne wykorzystywanie.

| Jak zoptymalizować grafiki na stronie internetowej? – podsumowanie

Poprawna optymalizacja grafik zawartych na stronie www jest jednym z czynników wpływających na pozycję witryny w Google. Najważniejsze jest to, aby wszystkie obrazy były skompresowane, zeskalowane i posiadały odpowiednio dopasowany format. W ten sposób skrócony zostanie czas ładowania się strony, co pozwoli na dłużej zatrzymać użytkowników i zachęci do częstych powrotów. Poza tym wdrażając zasady związane z Image SEO wpłyniesz na pozycjonowanie zdjęć w Google Grafika i nie tylko.

Zobacz także Optymalizacja Stron