Zoptymalizowane pod względem technicznym i właściwie opisane grafiki to bardzo ważny element każdej strony internetowej. Niestety podczas tworzenia witryny bardzo często skupiamy się na innych jej aspektach i funkcjonalnościach, zapominając o optymalizacji grafik i zdjęć. Tymczasem to właśnie obrazy w dużej mierze odpowiadają za sprzedaż produktów i usług, wpływają na poziom user experience, a także szybkość ładowania strony www i jej pozycję w wynikach wyszukiwania Google.
W tym artykule skupimy się na tym jak poprawnie zamieszczać grafiki na stronie www – podpowiemy w jaki sposób opisywać zdjęcia, skąd legalnie pobierać darmowe obrazy oraz jak właściwie je optymalizować, zarówno pod kątem czasu ładowania, jak również pozycjonowania.
Skąd brać zdjęcia na stronę internetową?
Zdjęcia do artykułów, które zamieszczamy na stronie internetowej powinny przede wszystkim pochodzić z legalnego źródła. Idealną sytuacją jest, kiedy fotografie nawiązują do treści artykułu bądź strony oraz dobrze wpisują się charakter naszej marki i są autentyczne. Niestety nie zawsze możemy pozwolić sobie na to, aby wykonać je samodzielnie. W takich sytuacjach pozostaje nam albo skorzystanie z usług profesjonalnego fotografa, albo zakup fotografii w jednym z banków zdjęć (popularnie nazywanych stockami).
Jeśli decydujemy się na grafiki ze stocka, pamiętajmy, aby przy wyborze zdjęć nie popaść w sztuczność. Fotografia uśmiechniętej Pani w słuchawkach na stronie kontaktu to tak oklepany motyw, że warto go sobie podarować, zwłaszcza, że wszyscy już kojarzymy te generyczne zdjęcia członków zespołu, które wręcz krzyczą „nie pracujemy w tej firmie, jesteśmy ze stocka” i bombardują nas tymi samymi twarzami z co piątej strony internetowej. Takie pozowane zdjęcia z pewnością nie wzbudzą zaufania naszych odbiorców. Jeśli już korzystamy z banków zdjęć, starajmy się wybierać takie fotografie, które wyglądają autentycznie.
Jako alternatywę dla zdjęć pochodzących z płatnych serwisów możemy wykorzystać fotografie i grafiki z darmowych banków zdjęć takich jak: Pixabay, Pexels, Unsplash, Kaboompics czy Freeimages.
Jak dobrać idealne zdjęcie do artykułu na stronie www?
- Korzystajmy tylko z legalnych źródeł, nigdy ze zdjęć, które po prostu znajdziemy w Google.
- Dobierajmy zdjęcia pod temat artykułu jako dobre uzupełnienie jego treści, ale unikajmy oklepanych i nieautentycznych fotografii np. „członków zespołu” z pozowanych stockowych sesji
- Zadbajmy o właściwą rozdzielczość zdjęcia – zbyt małe fotografie będą wyglądać brzydko po zeskalowaniu do właściwego rozmiaru.
- Jeśli korzystamy z darmowych banków zdjęć zwracajmy uwagę na jakość techniczną fotografii – zdarzają się tam zdjęcia zbyt ciemne, za jasne lub mało kontrastowe, ale bardzo często wystarczy je lekko poprawić w dowolnej aplikacji do obróbki zdjęć (np. bezpłatnym Gimpie), aby z powodzeniem mogły konkurować ze swoimi płatnymi odpowiednikami.
Pozycjonowanie zdjęć – nazwy plików i atrybuty alt obrazów
Google nie potrafi jeszcze czytać obrazów (choć przyszłość może być inna) dlatego musimy mu powiedzieć, co znajduje się na zdjęciu, schemacie, mapie czy grafice. Na przykład, jeśli chcemy odwołać się do zdjęć jednego z naszych produktów lub dyrektora firmy, w której pracujemy, wpiszmy w nazwie pliku odpowiednią frazę np. laptop-asus-g7jh.jpg czy jan-kowalski-dyrektor-nazwa-firmy.jpg, a Google będzie w stanie wypozycjonować takie zdjęcie z dużą trafnością. Idealną sytuacją jest, gdy nazwa pliku zawiera frazę kluczową artykułu lub jej synonim.
Równie istotny jak nazwa pliku (a nawet bardziej) jest tekst alternatywny, czyli fraza, która znajduje się w atrybucie alt obrazu. Powinna ona odpowiadać temu co znajduje się na fotografii. Tekst alternatywny obrazka może być oczywiście dłuższy niż nazwa pliku (a nawet powinien). Może on też nawiązywać do treści artykułu, ale ze względu na dobre praktyki SEO warto zadbać o to, aby w opisie alternatywnym pliku pojawiała się fraza kluczowa, na którą pozycjonowany jest artykuł.
Dlaczego warto dodawać podpisy pod zdjęciami?
Podpis pod zdjęciem to krótki tekst towarzyszący fotografii, diagramowi, mapie lub wykresowi, zwykle wyświetlający się pod obrazem. Dobrze opisane zdjęcia i grafiki nie tylko pomagają lepiej zrozumieć treść artykułu, ale też pozytywnie wpływają na jego pozycjonowanie.
Podpis pod zdjęciem może przybierać różne formy: opisową, interpretacyjną, informacyjną. Często zmienia on sposób, w jaki postrzegamy zdjęcie lub wykres. I chociaż obraz zamieszczony na stronie internetowej może być rozpoznany przez każdego internautę na świecie, nie ma dwóch takich samych ludzi, którzy nadaliby obrazowi taką samą wartość symboliczną. Każdy z nas ma inną kulturę wizualną i przekonania, a także inne warunki społeczno-ekonomiczne wpływają na nasze widzenie.
Niestety podpis pod zdjęciem jest bardzo często pozostawiony redaktorowi artykułu, a nie jego autorowi, często więc ten element jest albo całkowicie pomijany, albo traktowany bardzo pobieżnie.
Brak podpisów pod zdjęciami, nieprzemyślane opisy alternatywne i niewłaściwie nazywane pliki obrazów nie tylko zmniejszają atrakcyjność tekstu, ale również jego potencjał SEO. Warto poświęcić im czas, zwłaszcza, że stworzenie dobrego podpisu dla zdjęcia wcale nie jest czasochłonne.
Jak napisać dobry podpis pod zdjęciem zgodny z SEO?
Nagłówki i ilustracje należą do pierwszego poziomu czytania. Kiedy czytelnik widzi zdjęcie, prawdopodobnie przeczyta podpis pod nim jeszcze przed przeczytaniem artykułu (o ile oczywiście zdjęcie nie znajduje się w środku tekstu).
Idealny podpis to taki, który towarzyszy ilustracji i nadaje jej znaczenie. Ostatecznie można powiedzieć, że te dwie rzeczy – podpis i zdjęcie – wzajemnie się uzupełniają. Tekst pod obrazem powinien zatem opisywać fotografię i wyjaśniać czego ona dotyczy, zwłaszcza jeśli zdjęcie nie jest zrozumiałe.
Forma podpisu pod zdjęciem, zwłaszcza jego długość, może być różna, w zależności od układu i tego co znajduje się na fotografii. Można bezpiecznie przyjąć, że idealny podpis pod obrazem to około 150 znaków (jedno lub dwa zdania). Opis alternatywny (znajdujący się w atrybucie alt obrazka) powinien być nieco krótszy (do 100 znaków).
Oprócz tego, że podpis powinien zawierać informacje potrzebne do zrozumienia obrazu, niezależnie od tego, co jest na nim przedstawione, powinien zachęcić również do przeczytania artykułu. Wykorzystywana jest tutaj ta sama technika, która służy do pisania nagłówków prasowych. Chodzi o to, aby napisać to, czego użytkownik dowie się czytając artykuł lub co znajdzie w tekście.
Jeśli wydaje się nam, że zdjęcie jest oczywiste, należy pamiętać, że obraz, nawet najbardziej wymowny, lepiej przemawia w towarzystwie podpisu. Każde zdjęcie można lepiej zoptymalizować, opisując je dobrze dobranym tekstem i sprawić, że będzie ono atrakcyjne nie tylko dla użytkowników, ale również dla robotów Google. Tylko zdjęcie, które jest ściśle powiązane graficznie z tytułem, może – ewentualnie – obejść się bez podpisu (wtedy tytuł artykułu przejmuje tę funkcję). Jeśli jednak zamieszczamy zdjęcie w treści tekstu i nie jest ono wyłącznie jego graficznym ozdobnikiem, powinniśmy dodać do niego podpis.
Można wyróżnić pięć różnych formatów napisów:
- Uzupełniający napis – w podpisie pod zdjęciem podajemy dodatkowe informacje: np. datę i nazwę miejsca, w którym była zrobiona fotografia, nazwisko fotografa itp.
- Podpis objaśniający – zdjęcie może zawierać elementy, które nie są znane czytelnikom i których nie są oni w stanie zidentyfikować, nawet jeśli zdjęcie jest bardzo czytelne.
- Sugestywny podpis – jest to podpis, który odnosi się do tematu artykułu, a w niektórych przypadkach nawet sugeruje jego tendencję.
- Napis narracyjny – opowiada w sposób szczegółowy o wydarzeniu, które przedstawia zdjęcie. Podpisy narracyjne mogą być stosowane w fotoreportażu bez tekstu, gdzie pokazany jest tylko tytuł artykułu i galeria zdjęć. W takim wypadku podpisy opowiadają historię wydarzenia.
- Cytat w podpisie – nadaje się szczególnie do portretów i zawiera jedno lub dwa zdania, które dana osoba reprezentuje lub wypowiedziała w przemówieniu, wywiadzie, oświadczeniu itp. Cytat powinien być podpisany imieniem i nazwiskiem osoby. Zwłaszcza jeśli trudno jest ją rozpoznać lub gdy nie jest ona znana czytelnikom.
Optymalizacja techniczna zdjęć
Same podpisy to nie wszystko. Choć bez wątpienia powinniśmy dołożyć wszelkich starań, aby opisy pod fotografiami zamieszczanymi w naszych artykułach były dopracowane i przyjazne wyszukiwarkom, zadbajmy również o to, aby zdjęcia nie były zbyt ciężkie albo za duże. Nie ma nic gorszego niż galeria zdjęć składająca się z kilkuset niezoptymalizowanych grafik, które opóźniają ładowanie strony o dobre kilka sekund.
Jeśli na naszej stronie znajduje się dużo obrazków w pierwszej kolejności powinniśmy upewnić się, że nie są one zbyt duże. Oczywiście jeśli mamy tylko jedno pełnoekranowe zdjęcie w nagłówku strony możemy pozwolić sobie na zamieszczenie go w jakości FullHD (1920 pikseli szerokości), ale gdy jest ich więcej powinniśmy rozważyć ich zmniejszenie.
Zaleca się, aby rozdzielczość zdjęć na stronę www w pełnoekranowych sliderach nie przekraczała 1600 pikseli szerokości. W przypadku zdjęć zamieszczanych w treści artykułów nie przekraczajmy 900-1200 pikseli. W galeriach stosujmy klikalne miniaturki, z możliwością powiększania obrazów, a jeśli zamieszczamy więcej grafik na stronie – zastosujmy mechanizm lazy load, który załaduje zdjęcia dopiero gdy te znajdą się na ekranie po zeskrolowaniu strony. W przypadku smartfonów i mniejszych tabletów możemy ładować wersje alternatywne zdjęć lub całkiem je ukrywać. Skróci to czas wczytywania strony www na tych urządzeniach.
Formaty zdjęć i grafik na stronie internetowej
Przy omawianiu tematu optymalizacji zdjęć na stronę www warto również wspomnieć o różnych formatach grafik. Choć najpopularniejszym rodzajem grafik w Internecie są grafiki rastrowe, z powodzeniem możemy używać na stronach www formatów wektorowych .svg np. dla ikonek czy logotypów zamiast dużo cięższych plików png, które w dodatku mogą gorzej wyglądać na ekranach o większej gęstości (np. na smartfonach).
Starajmy się, w miarę możliwości, wykorzystywać pliki .webp lub ewentualnie .jpg dla zdjęć, uprzednio odpowiednio je kompresując. Można w tym celu wykorzystać bezpłatny serwis TinyPNG, który umożliwia optymalizację zarówno grafik w formacie .png jak również .jpg. W ten sposób możemy odchudzić nasze grafiki nawet o 80% i to bez straty jakości, a w konsekwencji solidnie przyspieszyć ładowanie strony www.
Może się to wydawać banalne, ale optymalizacja zdjęć jest jedną z najszybszych i najskuteczniejszych metod przyśpieszenia strony internetowej. A dobre wyniki w testach Google Page Speed również przekładają się na pozycjonowanie.
Jak widać grafiki na stronie www to nie tylko kwestia estetyki. Warto więc podczas pisania artykułów poświęcić nieco więcej czasu obrazom i pamiętać o ich właściwej kompresji oraz odpowiednim nazywaniu plików, dodawaniu podpisów pod zdjęciami oraz wprowadzaniu opisów alternatywnych. Dzięki temu nasza strona www nie tylko wyraźnie przyspieszy, ale stanie się bardziej przyjazna zarówno dla użytkowników jak również robotów Google.