Jak zoptymalizować grafikę na stronie internetowej?

Jeżeli prowadzisz sklep internetowy lub nawet zwykłą stronę www, to musisz wiedzieć jak zoptymalizować grafikę na stronie internetowej. Od przyciągania nowych klientów przez wyszukiwarkę zdjęć Google do zmniejszenia czasu ładowania witryny – dobra optymalizacja grafiki może być ważnym elementem budowania udanego biznesu czy sklepu internetowego.

Czy zastanawiały Cię może kiedyś poniższe kwestie?

• Dlaczego podczas wyszukiwania grafiki, Google nigdy nie pokazuje moich zdjęć?
• Jak dobrze zoptymalizować grafikę na stronie internetowej, aby przyciągnąć więcej odwiedzających i zamienić ich w klientów?
• Czy muszę dodawać atrybut ALT do wszystkich moich grafik?
• Jaka jest różnica między rozszerzeniami graficznymi typu JPEG, GIF i PNG oraz kiedy ich używać?

Wpis ten odpowie na cztery powyższe pytania.

Jak zoptymalizować grafikę na stronie internetowej?

1. Nazywaj jasno zdjęcia na stronie internetowej.

DSC_001, IMG_001, DCIM_001 – wygląda to dla Ciebie znajomo? Po wykonaniu zdjęcia otrzymuje ono domyślną nazwę. O ile na naszych komputerach jest to rzecz normalna, o tyle w internecie takie nazewnictwo to bardzo kiepski pomysł. Dlaczego? Już wyjaśniam.

Jeżeli chodzi o pozycjonowanie, to ważne jest, aby używać słów kluczowych. Pomoże to w znacznym stopniu Twojej stronie internetowej we wspinaniu się po drabinie rankingowej wyszukiwarek. Tworzenie nazw dokładnie opisujących to, co jest ukazane na zdjęciu, to absolutnie kluczowa kwestia w optymalizacji grafiki na stronach internetowych. Wyszukiwarki nie tylko potrafią odczytywać zwykły tekst na witrynie, ale również szukać słów kluczowych w nazwach zdjęć.

Rzuć okiem na poniższy przykład:

Źródło grafiki: Koszulkowo.

Można, naturalnie, użyć nazwy domyślnej nadanej przez aparat – typu DSC_001. Jednak znacznie lepiej nazwać zdjęcie w taki sposób: luzna-koszulka-t-shirt-czekam-na-przelew.jpg.

Pomyśl też o tym, jak Twoi klienci wyszukują produkty i co wpisują w okienko wyszukiwarki. Dobrym zwyczajem jest przeanalizowanie słów kluczowych, po których użytkownicy odwiedzają Twoją stronę internetową oraz wykorzystanie ich do stworzenia nazw zdjęć czy grafik.

2. Zoptymalizuj atrybut ALT.

Atrybut ALT to tekst alternatywny dla zdjęć. Kiedy przeglądarka nie może z jakiegoś powodu wyświetlić grafiki, to w zamian za to wyświetla atrybut ALT.

Atrybut ALT dodaje również wartość do pozycjonowania (SEO) na stronach internetowych. Uzupełniając zdjęcia o odpowiednie znaczniki ALT, możesz pomóc swojej witrynie osiągnąć wyższą pozycję w wyszukiwarkach przez skojarzenie słów kluczowych z danych obrazkiem. W rzeczywistości atrybut ALT jest najlepszym sposobem na to, aby pokazać np. produkty w sklepie internetowym w Google Grafika.

Rzućmy też okiem na kod źródłowy, w którym występuje znacznik ALT:

Jeżeli chcesz zoptymalizować grafikę na stronie internetowej, to Twoim priorytetem powinno być nadanie atrybutu ALT każdej grafice.

Oto kilka prostych zasad, jeżeli chodzi o znaczniki ALT:

• Opisuj jasno i prosto każde zdjęcie.
• Jeżeli sprzedajesz produkty z numerem seryjnym, dołącz go do atrybutu ALT.
• Nie wciskaj na siłę słów kluczowych (typu ALT=”najlepsze tanie koszulki olsztyn kup teraz tanio najlepsza okazja”).
• Zobacz kod źródłowy swojej witryny i sprawdź, czy wszystkie znaczniki ALT zostały uzupełnione.

3. Zmniejsz wielkość zdjęć i grafik.

Kwestię rozmiaru grafik poruszyłem również w tekście dotyczącym najczęstszych graficznych błędów popełnianych na stronach internetowych.

Zastanów się teraz nad tym. Większość użytkowników komputerów czeka około 3 lub 4 sekundy na załadowanie się strony internetowej. Na urządzeniu mobilnym czas ten wynosi przeważnie od 5 do 6 sekund. Amazon twierdzi, że gdyby spowolnić ich stronę o tylko 1 sekundę, naraziłoby to ich na straty około 1,5 miliarda dolarów rocznie.

Google wykorzystuje czas ładowania strony internetowej jako ważny czynnik algorytmu rankingowego. Wspominaliśmy o tym w tekście dotyczącym czynników wpływających na ranking pozycji w Google. Wobec tego, jeżeli masz zdjęcia na swojej stronie internetowej, które wczytują się 15 sekund „z góry do dołu”, to niestety klienci nie są na pewno z takiego faktu zadowoleni.

Co należy wtedy zrobić?

Kiedy użytkownicy wchodzą pierwszy raz na Twoją stronę internetową, może to zająć chwilę w zależności od tego, jak dużo miejsca zajmuje grafika. Im większe zdjęcie, tym dłużej będzie się ono ładować. Wobec tego, jak zoptymalizować grafikę na stronie internetowej, aby przyspieszyć jej ładowanie?

Do zmniejszania wagi zdjęć polecam TinyJPG oraz TinyPNG.

Musisz wiedzieć też, że nie ma żadnego sensu wstawianie na stronie internetowej zdjęcia o rozdzielczości 4K czy 8K. Należy je koniecznie zmniejszyć. Można to zrobić praktycznie każdym programem graficznym, zaczynając nawet od prostego edytora online, a kończąc na samym Photoshopie.

Jak duże powinny być zdjęcia na stronie internetowej?

Dla sklepów internetowych oraz zwykłych witryn przyjmuje się, aby zdjęcia nie przekraczały 100KB. Oczywiście jest to granica bardzo płynna i umowna, jednak na ten moment stanowi jakiś punkt odniesienia. Może być to czasami trudne do wykonania (zwłaszcza dla dużych obrazów), ale o tym w następnych punktach.

4. Użyj odpowiedniego formatu do danego zdjęcia.

Istnieją 3 główne rozszerzenia dla zdjęć, które można dodać na stronie internetowej. Są to pliki JPEG, GIF i PNG.

Spójrzmy na te 3 typy plików i zobaczmy, jak wpływają na ten sam obraz:

JPEG (.jpg)

Pliki JPEG są już nieco starymi typami plików. Obrazy te mogą być znacznie skompresowane, co odbija się oczywiście na ich jakości, ale zyskujemy na nich rozmiarze. Na powyższej ilustracji widać, że ten format zapewnia w miarę dobrą jakość i małą wagę pliku (rozmiar tego zdjęcia to 60KB).

GIF (.gif)

Pliki GIF będą miały gorszą jakość obrazu niż JPEG. Tego typu format jest zazwyczaj wykorzystywany do prostych obrazków, ikon lub animacji. Jeżeli chodzi o optymalizację na stronach internetowych, nie należy ich używać do złożonych zdjęć ze względu na małą paletę kolorów. Rozmiar powyższego zdjęcia to 150KB.

PNG (.png)

Pliki PNG są coraz bardziej popularne jako alternatywa dla GIF. Wspierają więcej kolorów niż GIF-y i nie pogarszają jakości tak, jak JPEG-i. Mimo że format PNG jest bardzo często używany, to jednak rozmiar takiego pliku może być znacznie większy i nieopłacalny w stosunku do JPEG-a. Rozmiar powyższego zdjęcia to aż 238KB.

Oto skrajny przykład, gdy wielkość zdjęć jest celowo utrzymana na stałym poziomie 60KB dla wszystkich trzech formatów plików:

Jak widać, JPEG jest tutaj zwycięzcą. GIF i PNG musiały pogorszyć jakość (GIF znacząco, PNG nieznacznie), aby utrzymać taki sam rozmiar pliku, jak JPEG.

Oto kilka wskazówek, o których należy pamiętać przy wyborze formatów:

• W większości przypadków dla e-commerce (sklepów internetowych) to właśnie JPEG będzie najlepszym rozwiązaniem. Zapewnia on najwyższą jakość w stosunku do rozmiaru zdjęcia.
• Nigdy nie używaj GIF-a do dużych zdjęć. Rozmiar takiego obrazka będzie wtedy bardzo duży, co spowolni jego wczytywanie. Możesz używać formatu GIF do miniaturek czy ikon.
• PNG-i mogą być dobrą alternatywą dla JPEG-a i GIF-a, jeżeli na obrazku jest mała paleta barw.
• W większości programów graficznych możesz zapisywać obrazy w tych trzech formatach i sprawdzać jak wyglądają oraz jakie mają rozmiary.

5. Testuj swoje zdjęcia na stronie internetowej.

Celem w optymalizacji zdjęć jest to, aby zwiększać swoje zyski i przyciągnąć większą rzeszę klientów. Poruszałem już tematykę zmniejszania rozmiarów plików czy rozdzielczości. Wspominałem też o tym, kiedy i gdzie używać danego formatu. Zostało jeszcze jedno – testowanie ilości zdjęć na Twojej stronie internetowej. Czas ładowania jest bolączką wielu witryn i sklepów internetowych. Może się okazać, że zmniejszenie liczby wyświetlanych zdjęć na stronie zwiększy ruch w całym serwisie, przez co wpłynie pozytywnie na sprzedaż.

Jak zoptymalizować grafikę na stronie internetowej? – podsumowanie

Jeżeli chcemy zoptymalizować grafikę na stronie internetowej, to musimy pamiętać o kilku rzeczach. Kompresja zdjęć skraca czas ładowania stron internetowych, zmniejsza potrzeby przepustowości łącza i poprawia komfort osób przeglądających witrynę. Pozycja strony w rankingu wyszukiwarek również powinna się poprawić ze względu na szybsze ładowanie strony www. Jednak należy pamiętać, że podczas kompresji zdjęcia zmienia się nie tylko jego rozmiar, ale i jakość. Dlatego ważne jest to, aby z tym nie przesadzić i znaleźć równowagę pomiędzy wagą zdjęcia, a jego jakością.