Jak dodawać i optymalizować zdjęcia na stronę internetową

Zdjęcia na stronie są ważne tak samo jak i teksty, a może nawet i bardziej. Ktoś powiedział, że jeden obraz jest wart 1000 słów i jest w tym sporo prawdy. Warto jednak zwrócić uwagę nie tylko na efekty wizualne naszych zdjęć, ale także na to, jak są one zapisane.

Zbyt duże obrazki mogą drastycznie zepsuć szybkość ładowania strony, co pośrednio przyczyni się także do gorszej pozycji w Google. Niestety, jeśli dodajemy zdjęcia prosto po skopiowaniu z aparatu czy telefonu, zdjęcia mające po kilka MB, strona może spowolnić tak bardzo, że w końcu zablokuje nam serwer albo może nawet przestać się otwierać. Przed dodaniem zdjęć na stronę, zawsze musimy poddać je odpowiedniej optymalizacji, czyli – zmniejszyć je pod kątem ich wielkości i wagi. Jest to pierwszy etap optymalizacji zdjęć.

 

Na początek krótka ściągawka i podstawowe pojęcia, którymi będziemy się posługiwać:

  • Rozmiar zdjęcia – podajemy go w pixelach. Małe, kwadratowe zdjęcie może mieć rozmiar np. 200 x 200 px., a większe, pełnoekranowe – 1920 x 1080px.
  • Waga – wagę zdjęć podajemy w kilobajtach (kB) i megabajtach (MB). Pamiętajmy, że zdjęcie na stronie nie powinno ważyć więcej niż 200-500 kB.
  • Rozdzielczość – na potrzeby internetu spokojnie wystarczy 72 dpi (do druku stosujemy 300 dpi).
  • Format (rozszerzenie) – na stronę www dodajemy plik z rozszerzeniem JPG lub ewentualnie PNG (ten drugi typ, jeśli obraz zawiera przezroczystości). 

Czy wiesz, ile ważą Twoje zdjęcia?

Najpierw sprawdźmy więc, ile kB lub MB ważą zdjęcia na Twojej stronie lub zdjęcia, które chcesz dodać.

Jeśli posiadasz już zdjęcia na swojej stronie, możesz sprawdzić ich wagę na przykład za pomocą narzędzia GTmetrix.

Jeśli dopiero zamierzasz dodać zdjęcia, to przed wrzuceniem ich na stronę, sprawdź koniecznie ich właściwości, klikając na plik prawym klawiszem myszy. Zwykle zdjęcia zgrane z aparatu lub smartfona mają po kilka, a nawet kilkanaście MB, a to dla naszej strony stanowczo za dużo! Czas to zmienić.

Jak odchudzić zdjęcia? To proste!

  • Jeśli zdjęcia ważą zbyt wiele, to przed dodaniem ich na stronę, należy w dowolnym programie graficznym przeskalować je tak, aby były nieduże i lekkie. Ja korzystam z programów Adobe Photoshop i Lightroom (opcja “Save for Web”).  Z bezpłatnych narzędzi możesz skorzystać np. z programu Gimp.
  • Można też skorzystać z aplikacji do bezstratnej kompresji zdjęć online tinyjpg.com. Wrzucamy tam zdjęcie, serwis je optymalizuje, pobieramy odchudzoną (zoptymalizowaną) fotografię i dodajemy na stronę. Taka optymalizacja nie zmienia rozmiarów zdjęcia.
  • Jeśli zdjęcia dodaliśmy już wcześniej na stronę i teraz okazuje się, że są za duże, to mamy dwie możliwości: możemy przeprowadzić optymalizację „ręcznie”, czyli przez serwer FTP za pomocą klienta ftp. Lokalizujemy najpierw adres kłopotliwego pliku, np. za pomocą narzędzia GTmetrix i kopiujemy ten plik na komputer. Robimy optymalizację, a następnie wysyłamy poprawione pliki w miejsce, z którego je pobraliśmy i nadpisujemy. Po optymalizacji obrazków odświeżamy listę plików w lewym okienku klienta FTP. Gotowe!
  • Druga możliwość odchudzenia zdjęć na stronie, to skorzystanie z gotowej wtyczki do kompresji zdjęć. Ja polecam WP Smush. Sugeruję to rozwiązanie, zwłaszcza, gdy na stronie mamy już dużo zdjęć i ręczna optymalizacja zajęła by nam zbyt wiele czasu.

Jeśli zdjęcia mamy już pomniejszone i odchudzone, warto teraz zająć się zmianą nazwy każdego z plików i odpowiednio je opisać. Jest to ważne, zwłaszcza w kontekście SEO, czyli pozycjonowania.

Nazwa zdjęcia

Zwykle najłatwiej i najszybciej wrzucić na stronę zdjęcia z nazwami typu IMG1241.jpg lub foto4.jpg. Niestety takie rozwiązanie nie jest dobrze widziane przez Google i wtedy nasza strona od razu traci „notowania”. Warto to poprawić, czyli odpowiednio nazwać każdy z plików, pamiętając o tym, że:

  • nazwa zdjęcia powinna być konkretna i zawsze nawiązująca do tego, co przedstawia zdjęcie,
  • w nazwie warto umieścić słowo kluczowe, na które chcemy się pozycjonować,
  • w nazwie zdjęcia nie używamy spacji, polskich znaków oraz znaków specjalnych (zamiast spacji trzeba wstawić myślnik),
  • jeśli mamy już na stronie zdjęcia z dziwnymi nazwami typu 1, 2, 3.jpg, trzeba wgrać je po zmianie nazwy od nowa, można też pójść na skróty i zmienić nazwy za pomocą wtyczki Phoenix Media Rename.

Tekst alternatywny

Kolejna istotna rzecz przy optymalizacji zdjęć pod kątem wyszukiwarek to tekst alternatywny, czyli tak zwany atrybut “alt”. Jest to opis tego, co znajduje się na zdjęciu i tutaj również można zamieścić słowo kluczowe lub całą frazę. Tekst alternatywny do każdego zdjęcia można dodać w bibliotece mediów na stronie.

 

Tekst alternatywny teoretycznie nie jest widoczny dla czytelników strony, ale widzą (i słyszą) go osoby niepełnosprawne. Jest także bardzo ważny dla robotów Google, które skanują stronę i które wpływają na wyniki wyszukiwania.

 

Tytuł zdjęcia i opis

Jak już uzupełnimy tekst alternatywny w bibliotece mediów, to przy okazji warto uzupełnić tytuł zdjęcia (można tam również ulokować słowa kluczowe), najlepiej by brzmiał on inaczej niż w nazwie pliku i tekście alternatywnym. Kolejne pola do uzupełnienia w tym miejscu to „etykieta” i opis”. Będą się one wyświetlały użytkownikom pod zdjęciami w galerii np. lightbox.

 

Zdjęcia stockowe czy własne?

Na koniec warto wspomnieć o tym, że najlepsze zdjęcia na stronie to te oryginalne, zrobione przez Was samodzielnie lub przez Waszego fotografa. Jeśli nie chcemy zafundować sobie profesjonalnej sesji fotograficznej, możemy zrobić też szybkie zdjęcia komórką. Takie zdjęcie wyjdą być może mniej „profesjonalne”, ale ich atutem za to będzie autentyczność! Jeśli jednak potrzebujemy na stronę gotowych i pięknych czy wyretuszowanych zdjęć, a nie ma mamy własnych, możemy skorzystać, choćby tymczasowo, ze zdjęć stockowych. Takie zdjęcia jednak również należy przed dodaniem na stronę zoptymalizować. Pamiętajmy też zawsze o sprawdzeniu licencji!

Poniżej kilka darmowych banków zdjęć, z których można skorzystać:

Podsumowując, optymalizacja zdjęć to tylko jeden z wielu kroków, które powinniśmy zrobić, żeby poprawić jakość naszej strony. Wszystkie nasze zdjęcia na stronie powinny być odpowiednio zoptymalizowane (pod kątem zarówno prędkości strony jak i pod kątem wyszukiwania). Możemy to zrobić samodzielnie lub możemy to zlecić innej osobie. Warto o to zadbać, gdyż dzięki dobrym zdjęciom, nasza strona będzie śmigała dużo szybciej i będzie lepiej postrzegana przez roboty Google, co przełoży się na lepsze wyniki wyszukiwania, a tym samym zwiększy liczbę wejść na stronę i ilość potencjalnych klientów.