Optymalizacja zdjęć i grafik na stronie internetowej
Optymalizacja strony internetowej jest bardzo istotnym elementem. Bez dobrze wykonanej optymalizacji – pozycjonowanie strony www jest trudniejszym, a w konkurencyjnych branżach często mało wykonalnym zadaniem.
Optymalizacja na stronie www może dotyczyć kwestii związanych m.in z treścią, słowami kluczowymi, interfejsem, nawigacją oraz zdjęciami, grafikami i elementami szablonu strony internetowej. Te ostatnie – mogą mieć duży wpływ na szybkość ładowania strony, tym samym jej odbiór przez użytkowników. Zadbanie o prawidłowo zaimplementowane elementy graficzne jest więc bardzo ważnym czynnikiem świadczącym o jakości i mogącym mieć wpływ na skuteczność witryny.
Optymalizacja zdjęć na stronie
Kompresja zdjęć
Zdjęcia i grafiki przede wszystkim, powinny zostać podane kompresji tak, aby maksymalnie ograniczyć ich wagę bez widocznych strat w jakości. Zdjęcie możesz skompresować w dowolnym programie graficznym. Na codzień korzystamy z Affinity Photo, które jest mniejszym odpowiednikiem Adobe Photoshopa – jednak do celów podstawowej obróbki i edycji zdjęć wystarcza w zupełności.
Stopień kompresji ustalamy podczas zapisu zdjęcia na dysku. Dla formatu jpg może to być zakres od 60% do 90% w zależności od typu i jakości zdjęcia. Już stopień kompresji rzędu 90% potrafi obniżyć wagę zdjęcia np z 3MB do 300kb, co przy np. 10 fotografiach obniży ich łączną wagę z 30 do 3 MB tym samym bardzo mocno przyspieszy proces ładowania zdjęcia.
Te 3Mb to dosyć skrajny przykład, jednak do tej pory zdarzają się osoby, które nieświadomie wpychają na swoje strony www fotografie o nawet większych rozmiarach.
fot. Interfejs Affinity Photo przypomina Photoshopa. Aplikacja z powodzeniem może służyć do obróbki zdjęć na stronę internetową. Cena programu to zaledwie około 300 zł
Program do kompresji zdjęć online – kraken.io
Zdjęcia można dodatkowo skompresować za pomocą przeróżnych aplikacji on-line. Bardzo dobrą propozycją jest https://kraken.io/web-interface – gdzie w prosty sposób za pomocą metody „przeciągnij i upuść” dodamy nawet kilkadziesiąt zdjęć za jednym zamachem.
Aplikacja po kilku chwilach zwróci nam skompresowane pliki. Sam Kraken.io posiada darmową wersję z której śmiało możesz skorzystać do zmniejszenia wagi swoich zdjęć. Efekt jest bardzo zadowalający.
Rozdzielczość zdjęć
Rozdzielczość zdjęcia to rówież ważny czynnik wpływający pośrednio na jego wagę. Naturalne jest, że większa fotografia zajmie więcej miejsca na dysku. Potrzebować też będzie więcej czasu na przesył między serwerem a przeglądarką użytkownika – co wydłuża czas ładowania strony.
Z tego powodu nie powinniśmy używać na stronach zdjęć w rozdzielczości niż to rzeczywiście konieczne. W większości przypadków optymalna rozdzielczość np. 900 pikseli po dłuższym boku – będzie rozwiązaniem idealnym.
Inaczej sprawa ma się w przypadku np. stron z portfolio fotograficznym, gdzie jakość i ostrość zdjęć może mieć kluczowe znacenie w procesie decyzyjnym klienta. Warto wtedy zastosować wyższe rozdzielczości.
Nazwa pliku
Na potrzeby optymalizacji zdjęć na stronę internetową – warto zadbać o prawidłowe nazewnictwo plików jpg, png czy innych stosowanych. Jeśli zdjęcie przedstawia budynek firmy – niech w nazwie znajdzie się „budynek-firmy-xyz.jpg”, jeśli przedstawia nasz konkretny produkt, dajmy TV LG niechaj w nazwie pliku będzie np. „telewizor-lg-4k-2018.jpg”. Unikajmy stosowania nazw typu „DSC30230.jpg”, czy „33knbk23bdyasgd83.jpg”. Nazwa pliku ze zdjęciem powinna opisywać to, co znajduje się na fotografii.
Zamiast spacji stosujmy myślniki lub podkreślniki!
Atrybut „Alt” – tekst alternatywny
Tekst alternatywny służy przeglądarkom do odczytu informacji o tym co jest na zdjeciu. Z tego rozwiązania korzystają np. moduły dla osób niewidomych którym za pomocą atrybutu „alt” mogą przedstawić to, co znajduje się na fotografii. Z tego powodu tekst alternatywny nie powinien być zlepkiem słów kluczowych, a porządnie wykonanym opisem jak najlepiej odzwierciedlającym obraz. Oczywiście, taki tekst może być wzbogacony o słowo kluczowe.
Opis zdjęcia – etykieta
Przyjęło się zasadę, że zdjęcia powinniśmy podpisywać. W opisie możemy podać autora i źródło fotografii, a także zamieścić jedno lub dwa zdania opisujące przedstawiony obiekt, osobę, czy sytuacje. Opis zdjęcia, to ponownie idealne miejsce na przemycenie w naturalny sposób naszych słów kluczowych.
Na co zwrócić uwagę przy optymalizacji zdjęć i grafik?
- Odpowiedni rozmiar (rozdzielczość) adekwatna do potrzeb
- Odpowiednia kompresja zdjęć
- Nadana nazwa pliku
- Uzupełniony atrybut „alt”
- Opis zdjęcia
Tak przygotowane obrazy wpłyną na szybkość ładowania strony znacznie ograniczając czas potrzebny na ich załadowanie. Będą też wspierać pozycjonowanie poprzez odpowiednie opisanie zdjęć słowami kluczowymi. Takie modyfikacje pozwolą też wyświetlać się naszym zdjęciom w wyszukiwarce grafiki wyszukiwarki Google, co może stanowić olbrzymie źródło dodatkowego ruchu na stronie.
zobacz również:
- Optymalizacja tekstów na stronie
- Samodzielna optymalizacja strony www
- Zadbaj o skuteczność strony www już na etapie projektu
tagi: optymalizacja zdjęć na stronie, optymalizacja strony www, kompresja zdjęć, atrybut alt
