Poradnik SEO - Jak zoptymalizować zdjęcia na stronie internetowej?

Poradnik SEO – Jak zoptymalizować zdjęcia na stronie internetowej?

Jak przykuć uwagę Internauty? Odpowiedź na to pytanie jest prosta: grafiką i zdjęciami najwyższej jakości. Jednak jak osiągnąć wysoką jakość i jednocześnie nie obciążyć strony? Dowiedz się, jakiego formatu zdjęć używać na stronie, jak zoptymalizować zdjęcia na stronie internetowej aby kierowały na listy Twoich odbiorców, co zrobić aby zdjęcia strony były widoczne w Google Grafika? I poznaj listę najlepszych programów do obróbki grafiki.

1. Jakiego formatu zdjęć najlepiej używać na stronie internetowej?

2. Jak zoptymalizować zdjęcia na stronę, by ładowała się szybko?

3. Co zrobić, żeby moje zdjęcia pokazywały się w Google Grafika?

1. Jakiego formatu zdjęć najlepiej używać na stronie internetowej?

Obecnie w sieci królują 3 rozszerzenia obrazków, a są nimi:

JPEG

Najpopularniejszy format zdjęć używany w Internecie. Powszechnie wykorzystywany dla zdjęć produktów, fotografii itp. Pliki JPEG obsługują szeroką gamę kolorów, można zapisywać je na różnych poziomach jakości, co umożliwia nam dobranie ustawień do idealnego zbalansowania pomiędzy jakością zdjęcia, a jego wagą. Kompresja obrazów w formacie JPEG jest skuteczna, ale i stratna. Co oznacza, iż po skompresowaniu zdjęcia możemy zaoszczędzić dużo miejsca, ale po zapisaniu nie mamy możliwości powrotu do pierwotnej wersji zdjęcia

Najważniejszym czynnikiem na który wpływa wybór pomiędzy formatem PNG, a JPEG jest to, że PNG obsługuje przezroczystość. Rozszerzenie to jest wykorzystywanie głównie dla grafik, które posiadają przezroczyste tło. Dodatkowym atutem jest to, iż format PNG umożliwia bezstratną kompresję obrazu.

Format używany głównie ze względu na możliwość umieszczania więcej niż jednej klatki obrazu w zdjęciu, dzięki czemu możemy tworzyć animację. Choć format PNG również posiada taką funkcjonalność, to GIF jest wybierany częściej z uwagi na węższą paletę kolorów, co przyczynia się do niższej wagi obrazków/animacji. Poniżej obrazek zapisany w trzech różnych formatach przy zachowaniu przybliżonej wagi pliku – 50 kB. Zobacz różnicę:

Wyraźnie widać (szczególnie na kokosie), że JPEG zachował najlepszą jakość przy stosunkowo niskiej wadze pliku. Szeroka gama kolorów oraz brak możliwości powrotu do wersji sprzed kompresji skutkuje niską wagą i najlepszą jakością pliku.

2. Jak zoptymalizować zdjęcia na stronie internetowej, by ładowała się szybko?

Na rozmiar obrazka głównie wpływają dwa czynniki rozdzielczość oraz jakość. Dlatego też podczas optymalizacji powinniśmy skupić na nich największą uwagę. Jaki jest cel optymalizacji? – Uzyskać najniższą wagę obrazka, przy najmniejszej utracie jakości.

Waga obrazka

Wysoka jakość obrazków na stronie ma znaczenie, jednak wielkość takiego pliku znacząco wydłuża czas ładowania strony. Przed przesłaniem takiego obrazka na serwer należy dokonać jego optymalizacji. Zapisany i zoptymalizowany plik powinien mieć wagę w okolicach 100kB.

Wielkość obrazka

Wrzucanie bardzo wysokiej rozdzielczości zdjęć na stronę WWW nie ma większego sensu. Z reguły obrazki są automatycznie skalowane przez strony internetowe, by wyświetlić całość. Dlatego udostępnienie obrazka o wielkości 4000 x 4000 px nie ma sensu, gdyż strona wyświetli go w dużo mniejszym rozmiarze. Warto skupić się na wrzuceniu obrazka o maksymalnej wielkości w jakiej zostanie wyświetlony na stronie. Najczęściej rozmiar najdłuższego boku wynosi 1000 px. Możesz umieścić większe zdjęcie, jednak nie zaleca się udostępniania zdjęć większych niż 1500 px.

Narzędzia do optymalizacji zdjęć

– Adobe Photoshop (płatny)

Za pomocą Photoshopa możemy poprawić kolory w zdjęciu, zmienić jego rozmiar, a na sam koniec zapisać specjalną funkcją „Zapisz dla Internetu (ang. Save for Web)”, która oczyszcza zdjęcie ze zbędnych danych, zapisuje je by uzyskać najlepszą jakość i jednocześnie najmniejszą wagę pliku. Dzięki podglądowi na żywo łatwo możemy obserwować zmiany w obrazku i wybrać najlepsze ustawienia. Odpowiednia automatyzacja procesu pozwala na przetworzenie dużej ilości zdjęć w mniej jak minutę. W Photoshopie zoptymalizujemy każdy format opisywany w tym artykule.

– TinyPNG (darmowy)

Proste narzędzie do optymalizacji zdjęć. Wrzucamy zdjęcia na stronę, a po chwili otrzymujemy link do pobrania zoptymalizowanych. Darmowa optymalizacja pozwala na optymalizacje 20 zdjęć (max. 5 MB każde) w formacie PNG i JPEG.

– Optimizilla (darmowy)

Narzędzie działa tak samo jak powyższe, z dodatkiem podglądu zdjęcia po optymalizacji. Dzięki czemu możemy przed pobraniem zdjęcia na dysk sprawdzić, czy nie straciliśmy dużo na jakości, a dodatkowo ulepszyć kompresję zwiększając lub zmniejszając ilość kolorów.

– ezGIF (darmowy)

ezGIF posiada wiele przydatnych funkcji do tworzenia animacji i zapisywania ich w formacie GIF. Dodatkowo posiada również narzędzie do optymalizacji, gdzie poza formatami PNG oraz JPEG mamy możliwość zoptymalizowania pliku w formacie GIF.

– WP Smush (darmowa wtyczka WordPress)

Dla użytkowników WordPressa polecamy skorzystanie z wtyczki WP Smush. Wtyczka usuwa ukryte informacje w zdjęciach pozwalając na zmniejszenie rozmiaru bez utraty jakości. WP Smush kompresuje zdjęcia w czasie rzeczywistym podczas przesyłania zdjęć na serwer, a dodatkowo pozwala na kompresję obrazków, które są już na serwerze. W wersji darmowej można zoptymalizować maksymalnie 50 zdjęć za jednym kliknięciem.

3. Co zrobić, żeby moje zdjęcia pokazywały się w Google Grafika?

Trzecim, a zarazem najważniejszym punktem optymalizacji zdjęć jest ich odpowiednie nazewnictwo. Wszystkie zdjęcia, które zapisujemy z telefonu, czy aparatu posiadają nazwą podobną do DSC0001, DCIM_0001, IMG0002 itd. Nazywanie zdjęć w taki sposób nie jest niczym złym i świetnie sprawdza się na komputerze, czy urządzeniach z których je pobraliśmy, ale nie w Internecie.

Google Grafika jest wyszukiwarką i działa dokładnie tak samo jak Google – wyszukuje obrazy po odpowiednich nazwach. Google Grafika jest na tyle zaawansowane, że potrafi (nie zawsze trafnie) rozszyfrować to co znajduje się na zdjęciu oraz wyszukać obrazy podobne do naszego.

Zacznij od odpowiedniego nazewnictwa zdjęć

Google wyszukuje zdjęcia po ich nazwach, dlatego należy unikać przypadkowo wygenerowanych nazw. Spójrzmy na przykład poniżej:

Zdjęcie przedstawia samochód marki Mercedes-Benz, klasy S coupe w wersji S63 AMG. W sytuacji gdy szukalibyśmy właśnie takiego samochodu nie chcielibyśmy zobaczyć zdjęcia samochodu innej marki, a nawet Mercedesa klasy S w wersji limuzyny. Wówczas w okno wyszukiwarki wpisalibyśmy „Mercedes klasy S AMG coupe”. Dla przedstawienia samego pojazdu takie nazewnictwo jest już wystarczające, ale nie byłoby wystarczające np. na witrynie bloga motoryzacyjnego, lub na stronie firmy wynajmującej samochody, ponieważ nie opisuje dokładnie tego co to zdjęcie przedstawia. Dlatego też zdjęcie zostało nazwane „mercedes-klasy-s-s63-amg-coupe”.

Co zrobić w sytuacji, gdy mamy dużo zdjęć przedstawiających ten sam przedmiot?

Z takim problemem borykają się wszystkie sklepy internetowe, które muszą zamieszczać dużą ilość zdjęć jednego produktu na jednej stronie. W takim przypadku stosujemy zasadę tzw. long-tail, co oznacza że dopisujemy do nazwy naszego zdjęcia głównego słowo/wyrażenie opisujące to co dane zdjęcie przedstawia. Przykład poniżej:

Do nazwy naszego zdjęcia głównego „mercedes-klasy-s-s63-amg-coupe” dopisaliśmy słowo opisujące dokładnie to co dane zdjęcie przedstawia. W pierwszym przypadku jest to tył samochodu, więc do frazy zostało dopisane słowo „tył”, dalej jest to „wnętrze”, a następnie „licznik prędkości” oraz potocznie nazywane „zegary”. Dzięki takiemu zastosowaniu nazewnictwa nasza strona będzie wyświetlana w wynikach wyszukiwania jeśli ktoś dopisze – tył, wnętrze, lub zegary.

Dopisz atrybut ALT do każdego zdjęcia

Atrybut ALT przy zdjęciu to nic innego jak nazwa alternatywna naszego pliku. Jest on niewidoczny na stronie, ale to właśnie dzięki niemu wyszukiwarki wiedzą co znajduje się na obrazie. Dodatkowo opis ALT jest wykorzystywany do opisywania zdjęcia dla osób niewidzących. Opis ten powinien zostać uzupełniony dla każdego zdjęcia na Twojej stronie Internetowej. W nazwie alternatywnej dokładnie opisujemy co znajduje się na zdjęciu np. „Zdjęcie Mercedesa klasy S w wersji AMG pod drzewem”. Preferowane jest używanie tutaj potocznego języka, a nie sztucznego „upychania” fraz. Dopuszczalnym, ale niezalecanym jest stosowanie takiej samej nazwy alternatywnej (ALT) co nazwy zdjęcia (TITLE).

Optymalizacja zdjęć to klucz do sukcesu Twojej strony internetowej

Wzbogacanie strony internetowej o fotografie to klucz do sukcesu Twojej strony internetowej. Jakościowe zdjęcia potrafią zainteresować użytkownika i dłużej przytrzymać go na stronie. Jednak samo pobranie zdjęcia i wrzucenie go do sieci nie wystarcza. Jeżeli chcesz efektywnie zwiększać ruch na swoich stronach internetowych odpowiednia optymalizacja grafiki pozwoli na szybsze ładowanie strony oraz na ukazywanie się w wyszukiwarce Google Grafika. Czy dbacie o zamieszczane zdjęcia na Waszych stronach? Dajcie znać w komentarzach!

Chcesz, żebyśmy optymalizowali zdjęcia na Twojej stronie?

Sprawdź naszą ofertę.

Poznaj TOP 7 sekretnych cech skutecznych stron internetowych « Promeo Media

12 lipca 2018

[…] Nikt nie lubi czekać, aż strona się załaduje. Jeśli masz przeciążoną stronę, nikt nie będzie chciał jej odwiedzać. Strona powinna być lekka i ładować się w 3-7 sekund. Jeśli na jej otwarcie trzeba czekać 10 sekund i dłużej, zapewne zostanie szybko odrzucona. Często długo ładująca się strona kojarzy się z awarią, doprowadza do irytacji, dlatego koniecznie zadbaj o to, aby Twoja strona ładowała się w błyskawicznym czasie. Ważne są tu zdjęcia, muszą być one odpowiednio zoptymalizowane, pisaliśmy o tym w naszym poradniku, który wyjaśnia, jak optymalizować zdjęcia na stronie. […]

Odpowiedz