Wyobrażacie sobie dzisiaj strony bez absolutnie żadnej grafiki? Miałby jeden plus,wyczytywałyby się błyskawicznie. I „zabierałyby” niewiele transferu.

Strona internetowa bez obrazków brzmi jak abstrakcja. Myślę, że w dzisiejszych czasach ciężko, byłoby jej się wybić. Pomijam strony specyficzne np. z jakimiś rozprawami naukowymi. Choć i tam prawie zawsze pojawia się grafika w postaci wykresów, ale… Wróćmy na ziemię.

Lubię pływać pod prąd, więc już na początku powiem, jak rozgryźć rozmiar plików graficznych na stronie. Pliki mają ważyć jak najmniej i mieć jak najlepszą jakość.Pomogłam.

Rozmiar plików graficznych na stronie

Przy okazji pisania o opisywaniu plików graficznych, wspomniałam, że grafika nie powinna ważyć więcej niż300 KB. Przygotowując dzisiejszy tekst, jeszcze trochę poszukałam tych wytycznych. Natknęłam się na informację, aby ważyły nie więcej niż 200 KB.

Będę to pewnie jeszcze nie raz przypominać, ale nie jestem za tworzeniem treści pod wyszukiwarki, aby odhaczyć każdy punkt z listy. Oczywiście, że roboty wyszukiwarek zwracają uwagę na rozmiar pliku graficznego, ale to jest istotniejsze dla użytkownika. Jeżeli plik jest za ciężki (duży), strona długo się wczytuje, czytelnik się zniechęca i wychodzi. W dobie mobilnego internetu użytkownik zwróci uwagę, ile transferu trzeba zużyć na wczytanie się strony.

Jak zapisywać pliki, aby nie ważyły tony?

Na pewno musimy być świadomi, czy mamy do czynienia z grafiką rastrową, czy wektorową.Wspominałam już o tym przy opisywani plików, ale na blogu jest również całytekst poświęcony różnicy między grafiką rastrową a wektorową.

Idąc jak najbardziej się da na skróty

  • .jpeg – grafika rastrowa np. zdjęcia
  • .png – grafika wektorowa np. logo, infografika

Warto zwrócić uwagę, aby grafika – w zasadzie najczęściej problem pojawia się przy zdjęciach – nie miała rozdzielczości fototapety. Zdjęcie o wymiarach 3… można spokojnie wydrukować w bardzo dobrej jakości w rozmiarze obrazka „Bitwa pod Grunwaldem”.

W grafice wektorowej tworzymy rzeczy, które na wstępie wiemy, że będą używane na stronie internetowej. Łatwiej jest dostosować rozdzielczość. Poza tym te pliki można powiększać i pomniejszać, bez utraty jakości. Problematyczne stają się zdjęcia zgrywane z aparatu, telefonu czy pobierane z banku zdjęć.

Po pierwsze warto zmniejszyć rozdzielczość zdjęcia. Niech ma rozdzielczość sporego plakatu,nie fototapety. Poza tym większość programów graficznych ma coś takiego jak„zapisz dla internetu”. Jeżeli mamy zdjęcie np. 5 MB i właśnie w ten sposób je zapiszemy, dostaniemy plik o wadze 150 KB bez utraty jakości.

Program graficzny przy zapisywaniu dla Internetu „kasuje” wszystkie dane ze zdjęcia. To tak, jak byśmy dostali wydrukowane zdjęcie. Nie ma tam już informacji np. o aparacie, czasie naświetlania, dacie wykonania. Kiedy trzymamy w ręku fotografię, też nie ma na niej żadnych danych. Zapis dla Internetu jest cyfrową wersją analogowego zdjęcia.

Testowanie grafik

Warto skorzystać z narzędzia – PageSpeedInsights, któredostarcza nam informację, co może wpływać na wolniejszą pracę strony. Analizastrony dostarczy nam wytycznych, które zdjęcia należy jeszcze zmniejszyć,odchodzić – mam nadzieję, że nikogo nie obrażę. Dostajemy również zmniejszone grafiki, które wystarczy ściągnąć i podmienić na swojej stronie.

W Internecie jest wiele miejsc, które oferują nam zmniejszenie wielkości (wagi) grafiki bez utraty jakości.

Jeżeli w teście pokaże się nam list z połową wgranych przez nas grafik – mamy problem.Jeżeli jednak np. na 100 zdjęć na liście znajdzie się około 10 do poprawy, nie warto panikować. Znowu będzie, jeżeli, ale jeżeli te zdjęcia ważą więcej niż 1MB, warto je zmniejszyć. Jeżeli są mniejsze, może lepiej poszukać innej opcji na przyspieszenie strony?

Jeżeli chodzi np. o WordPress-a, sam motyw może być takim spowalniaczem dla wczytywania się strony, a nie trochę za duże zdjęcia. Problem może być też na serwerze, gdzie nasza strona sobie mieszka. Chodzi mi o to, że warto przeanalizować inne problemy, aby zachować dobrą jakość zdjęć.