Optymalizacja zdjęć – waga i wielkość

Duże, ciężkie zdjęcia są bolączką znacznej części stron, które funkcjonują w Internecie. Wiele osób nie jest świadomych tego, jak negatywny wpływ na stronę mają niezoptymalizowane zdjęcia, więc w tym artykule postaram się Was nieco nakierować na dobrą drogę i pokażę, jak te zdjęcia doprowadzić do ładu. Tematem tego artykuły będzie więc optymalizacja zdjęć pod kątem ich wagi i wielkości.

Czym jest optymalizacja zdjęć?

Optymalizacja w kontekście zdjęć i stron www to dostosowanie ich wagi, wielkości oraz odpowiednie ich opisanie. O optymalizacji zdjęć można mówić więc dwutorowo – tor pierwszy to prędkość strony, tor drugi – SEO. Te tory się oczywiście przenikają, stąd nie trzeba nie wiadomo jakich kombinacji by to wszystko było ze sobą spójne.

Oczywiście trzeba znaleźć rozwiązanie optymalne – nie można przesadzać ani w jedną ani w drugą stronę. Mamy poprawić pewne rzeczy związane ze zdjęciami, ale też nie kosztem tego, że nagle obraz będzie totalnie zamazany.

Po co optymalizować zdjęcia?

Wytyczyłam takie cztery główne powody, dla których warto zająć się optymalizacją zdjęć i poniżej je Wam pokrótce opiszę.

Pierwszy powód to miejsce na serwerze.

Powód najbardziej przyziemny. Większość hostingów udostępnia nam za konkretne pieniądze konkretny pakiet GB miejsca. Chcemy, potrzebujemy więcej – musimy dopłacać. Pieniądz rzecz cenna, a więc i to miejsce jest niezwykle cenne. Po co więc go marnować na przeogromne zdjęcia, skoro czytelnik i tak generalnie większej różnicy nie zobaczy (o ile oczywiście nie zrobicie z nich pikselozy ; ) )

Powód drugi – prędkość strony www.

Zdjęcia są często gwoździem do trumny wielu stron. Jak strona przymula to powodów należy zacząć szukać w zdjęciach. Mało kto zdaje sobie sprawę z tego, że nie należy ładować na stronę zdjęć rzędu 5000px i przy tym wagi 15MB, bo tak zrobił aparat. Może i zrobił, ale przecież można zmniejszyć takie zdjęcie – nieprawdaż?

No i właśnie – jeśli chcemy by nasza strona działała szybko musimy te zdjęcia zmniejszać – zmniejszać pod kątem wielkości oraz wagi. Mając stronę na WordPress można zalecieć w kulki i robić to wtyczką, ale generalnie odradzam. Lepiej jest ogarniać zdjęcia jeszcze przed wgraniem do WordPress – wtedy mamy pewność, że wszystkie rozmiary (w tym do podstawowe zdjęcie, w pełnym wymiarze) zostaną zoptymalizowane. I jeszcze taka kwestia, że jak robimy to przed wgraniem do WP to możemy sobie ustalić różne formaty – a wtyczka wszystkie przytnie do takiej wielkości jaką jej zapodamy w ustawieniach. Dlaczego różne formaty są ważne?

Jak wrzucicie adres swojej strony do narzędzia GTmetrix (darmowe) to dostaniecie tam wytyczne co jest nie halo na Waszej www jeśli chodzi o prędkość. I tak wśród tych wytycznych często gęsto pada sformułowanie – served scaled images, czyli “ej Ty zapodaj mi tu odpowiednią wielkość w to konkretne miejsce”. Chodzi tu o to, że inną wielkość potrzebujemy na zdjęcie do banera a inną np. do wpisu, gdzie ono już nie jest pełnoekranowe. Rozumiecie? Jeśli przed wgraniem do WP ustalicie sobie, że do baneru wrzucacie 2040px, a do wpisów 980px, bo takie wystarczy, no to znów zyskujecie już na wstępie lżejsze zdjęcia, które będą ładować się szybciej oraz mniej cennego miejsca Wam pożrą z serwera.

Oczywiście nie załatwi to sprawy całkowicie. Dalej może być tak, że macie listę wpisów a motyw Wam uparcie ładuje tak fullwidth zdjęcie zamiast np. medium, które spokojnie by mogło wystarczyć. Wtedy trzeba pogrzebać w ustawieniach motywu lub modułu, który odpowiada za wyświetlanie zdjęć – page buildery często mają przy zdjęciach pole do określenia w jakim wymiarze ma być ładowane zdjęcie, więc warto sobie na to zwrócić uwagę. W przypadku darmowych motywów zdarza się, że trzeba pogrzebać w kodzie.

Dobrze zrobione motywy mają już coś takiego, że potrafią do różnych rozdzielczości dobrać różne wielkości zdjęć (oczywiście musimy mieć takie przycięte i wgrane, by WP miało możliwość ich załadowania). Fajne to, bo wtedy na mobile zdjęcie nie jest niejako sztucznie zmniejszane przez CSS tylko faktycznie wrzucany jest mniejszy rozmiar, dzięki czemu znów nasza strona zyskuje na szybkości.

A więc mamy dbać o wielkość zdjęcia i o jego wagę – tylko jak to ogarnąć nie wtyczkowo?

Nie jest to naprawdę skomplikowane. W dowolnym programie graficznym można przeskalować sobie zdjęcia na mniejsze. Można też skorzystać z programiku FastStone Photo Resizer, w którym masowo możecie sobie zmniejszyć do wybranej wielkości zdjęcia, a nawet zmienić ich format plików – o formatach plików będzie w kolejnych artykułach.

Co do wagi zdjęć to bez utraty jakości możecie ją zmniejszyć korzystając z aplikacji online – tinyjpg.com lub imagify.io (ten drugi daje możliwość ustawienia różnych stopni kompresji, więc można wybrać i taki z utratą jakości).

A co jeśli mam stronę od ładnych paru lat i setki zdjęć?

Opcje są dwie – zgrywasz zdjęcia przez ftp, zmniejszasz na piechotkę i wrzucasz spowrotem lub korzystasz z wtyczki. W takim przypadku wybór wtyczki jest dla mnie zrozumiały i daję przyzwolenie : ) Jednak kolejne zdjęcia już optymalizujcie przed wgraniem do WordPress. Jaką wtyczkę wybrać? Ja rekomenduję Robin Image Optimizer, bo nie ma ograniczeń co do wagi zdjęć, jakie potrafi ogarnąć, można wybrać różne stopnie kompresji i nie trzeba co kilkanaście zdjęć klikać – “no leć mały dalej”, jak to jest w darmowej opcji WP Smush, który jest drugą, taką polecaną przeze mnie darmową wtyczką do kompresji wagi zdjęć.

A jaka jest odpowiednia wielkość i waga dla zdjęć?

Dla zdjęć pełnoekranowych spokojnie powinno wystarczyć Wam 2048px. Pozostałe rozmiary musicie dopasować względem Waszego motywu – najlepiej podpatrzeć w demo motywu, co tam jest wrzucone. Jeżeli chodzi o wagę zdjęć to oczywiście im mniej tym lepiej. Tutaj wiele zależy też od wielkości zdjęcia – pełnoekranowe będą ważyć na pewno więcej niż ikony wpisu 300px szerokie. Ogólnie przyjmuje się, że 500kb i mniej to jest w porządku, najlepiej jakby to było do 300kb.

Powód trzeci – by nie wkurzać czytelnika.

To się wiąże z powodem drugim, czyli z prędkością. Człowiek leń niesamowity, do tego mega niecierpliwy, więc jeśli każecie mu czekać aż strona się załaduje to ucieknie, gdzie pieprz rośnie i jeszcze rozpowie, że nie warto do Was zaglądać, bo to strata czasu. By nie robić tak złego wrażenia już na wstępie warto właśnie zadbać o to by zdjęcia były nieduże i lekkie – jeśli nie chcecie już dbać o prędkość samą w sobie, to zadbajcie o nią mimochodem, chcąc zadowolić swoich czytelników.

W kontekście doznań użytkowników naprawdę nie macie się czego obawiać, że on zauważy, że zdjęcia straciły na jakości, bo zmniejszyliście ich wielkość i wagę – oczywiście jeśli nie przesadzicie z kompresją. Ilekroć trafi mi się do ogarnięcia strona fotografa, tylekroć muszę długi czas tłumaczyć, że te ich zdjęcia jak z 30MB zejdą to 500kb (czy mniej nawet, zależy jaka wielkość potrzebna) dalej będą w porządku i dalej ten oglądający może wpaść w zachwyt podczas ich oglądania. Naprawdę. Nie żartuję. Fotografowie potrafią mieć na stronach zdjęcia o wadze 20-30MB i tłumaczyć mi godzinę przez telefon, że tylko wtedy widać każdy detal. Rozumiem mieć hopla na punkcie szczegółów, ale wierzcie mi – na cholerę Wam te szczegóły, jak czytelnika szlag trafi zanim się odpali galeria : )

I jeszcze jedno mi się ciśnie na język (hmm, może bardziej na klawiaturę…?) slidery. Gigantyczne zdjęcia, z szmerami, bajerami, wodotryskami ładowane zaraz na pierwszym ekranie po odpaleniu strony. No burza doznań dla czytelnika. Woooow niesamowite. Przynajmniej w teorii, bo w praktyce zanim ten nasz slider się załaduje to czytelnika wywiało do konkurencji. Jak już musicie mieć slider to proponuję wybrać coś lekkiego, nie kolosa typu revolution slider, który ma zajebiście dużo opcji i bajerów, ale drastycznie też potrafi pogorszyć prędkość strony. No i zdjęcia do slidera – zapamiętajcie sobie, że mają być lekkie ; )

Czas na powód czwarty, czyli optymalizujemy zdjęcia po to, aby się przypodobać Google.

Google pragnie by wszystkie strony w Internecie były szybkie, więc jeśli Wasza zamula no to macie dużego minusa. Tak więc prędkość ważna jest również dla wyszukiwarek, a co ma znaczący wpływ na prędkość witryny – oczywiście zdjęcia. Znów wracamy do punktu drugiego, czyli zmniejszania wielkości i wagi zdjęć tym razem po to, aby wyszukiwarki bardziej Nas lubiły.

W przypadku wyszukiwarek wchodzimy już także na ten drugi tor, o którym wspomniałam na wstępie – tor optymalizacji zdjęć pod kątem SEO, ale o tym będzie już w kolejnym artykule.

Jeśli macie jakieś pytania zapraszam do komentowania oraz na grupę Zostań specką, gdzie możecie również znaleźć nagrania z live dotyczącego optymalizacji wielkości i wagi zdjęć, a jeżeli szukacie baz z darmowymi zdjęciami to zerknijcie tutaj.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *