Optymalizacja strony - zmniejszenie rozmiaru obrazków

Opublikowano:
Jest to pierwszy artykuł z serii optymalizacji strony pod kątem PageSpeed Insights. Dzisiejszy problem jaki rozwiążemy to: "Zoptymalizuj obrazy"
Czasem, mimo szybkiego łącza, strona ładuje się bardzo długo. Jest to spowodowane najczęściej przez:
  • wiele dużych i nieskompresowanych plików CSS oraz JS
  • długi czas odpowiedzi serwera
  • zbyt duże obrazki

Jeśli umieszczasz obrazki na swojej stronie, warto się im dokładnie przyjrzeć. Zwróćmy uwagę na format obrazka, jego rozdzielczość, kompresję oraz wagę. Są to podstawowe kryteria, które należy spełnić przy przygotowaniu grafiki na stronę internetową.

Format obrazków

Zwróć uwagę na format obrazka, gdy wstawiasz animowany obrazek to używasz formatu GIF, gdy potrzebujesz przezroczystość to korzystasz z PNG, jeśli natomiast jest to najzwyklejszy obrazek to wykorzystaj format JPEG. Są to podstawowe formaty, jakie pojawiają się na stronach WWW. Wszystkie różnią się od siebie wielkością oraz możliwościami

Charakterystyka GIF

Gif obsługuje przeźroczystość, można robić w nim animacje, wykorzystuje kompresje bezstratną

Charakterystyka PNG

Popularny format grafiki obsługiwany przez większość przeglądarek WWW,obsługuje kanał alfa. przewiduje tryby o niskiej ilości kolorów. Wykorzystuje kompresje bezstratną

Charakterystyka JPEG

Metoda kompresji statycznych obrazów rastrowych, przeznaczona  do stratnego zapisu obrazów naturalnych, charakteryzujących się płynnymi przejściami barw oraz brakiem lub małą ilością ostrych krawędzi i drobnych detali.

Rozdzielczość grafiki

Masz bloga? Umieszczasz miniaturki obrazków do posta, a na stronie z artykułem pojawia się ten sam obrazek 4 razy większy? Warto to zoptymalizować. Dobierz rozdzielczość grafiki w taki sposób, aby była odpowiednia z miejscem jaki ma zajmować na stronie internetowej. Zaoszczędzisz tym czas ładowania strony oraz jej wagę (ale niekoniecznie już miejsce na serwerze ;) ). 

Kompresja obrazka

Kompresja jest to ograniczenie informacji obrazu, w celu zredukowania jego wagi. W tym celu można wykorzystać program JpegCompres lub optiPNG. Jest to już bardziej zaawansowana (bardziej dla oka niż użytkownika) technika optymalizacji obrazków dla stron internetowych. Moim zdaniem użycie narzędzi do takiego sposobu kompresji jest ostatecznością i dobrze dobrane grafiki (chociażby wg powyższych wytycznych) i tak dadzą bardzo duże przyśpieszenie ładowania się strony oraz wpłyną korzystnie na wagę pojedynczej strony internetowej.

W następnej części zajmę się optymalizacją plików JavaScript, CSS oraz HTML. Wpis pojawi się prawdopodobnie za tydzień, więc zapisz się do listy subskrybentów, jeśli zainteresuje Ciebie kolejny artykuł z serii optymalizacji serwisów


Podobne artykuły możesz znaleźc pod hasłami: zmniejszanie strony internetowej oraz optymalizacja strony internetowej