Odpowiednia optymalizacja zdjęć może przynieść wiele dobrego. Na pewno chcesz, aby Twoja strona szybko się wczytywała i doskonale zdajesz sobie sprawę, że ładujące się długo zdjęcia nie są niczym fajnym. Jak zatem ulepszyć zdjęcia z korzyścią dla strony?

Przede wszystkim rozmiar zdjęcia

Reguła „im więcej tym lepiej” nie ma zastosowania w przypadku fotografii na stronach internetowych. Większy rozmiar to większa waga zdjęcia, a co za tym idzie dłuższy czas potrzebny na jego wczytanie. Posiadacze szybkiego internetu nie zauważają tak bardzo tego problemu. Jednak Ci, którzy działają na wolniejszych łączach doskonale wiedzą jak denerwujące jest oczekiwanie na wczytanie się dużego zdjęcia.

Co prawda większość systemów CMS posiada automatyczną funkcję skalowania grafik do pożądanego przez stronę wymiaru jednak bardzo często samodzielna edycja przynosi dużo ładniejsze rezultaty.
Możesz przyjąć ogólną zasadę, aby dodawać do swojej strony zdjęcia o maksymalnej szerokości 1920 pikseli i maksymalnej wysokości 1080 pikseli.

1920×1080 px (pikseli) – najczęstszy maksymalny wymiar zdjęć wyświetlany przez strony www


Jednak najlepszą optymalizacją rozmiaru zdjęcia byłoby dopasowanie go do miejsca w jakim ma się na stronie wyświetlić. Dokładniej mówiąc do szerokości i wysokości tego miejsca. Nie ma bowiem sensu wrzucać zdjęcia o szerokości 1920 px w kafelek, którego szerokość to 600 px. Dlaczego? Już tłumaczę.
Nawet jeśli panel edycji Twojej strony automatycznie przeskaluje zdjęcie do wymaganych 600 pikseli szerokości (z lepszym bądź gorszym skutkiem) to i tak nie zmieni jego faktycznego rozmiaru. Wobec tego użytkownicy strony i tak będą musieli pobrać całe zdjęcie o szerokości 1920 pikseli, co bardziej obciąży transfer serwera.

W dowolnym programie graficznym (który umożliwia zmianę rozmiaru zdjęć, np. w Photoshopie lub GIMP-ie) możesz przerobić zdjęcie tak, aby idealnie pasowało do wybranego umiejscowienia na stronie. Dzięki temu zmniejszysz wykorzystanie transferu i przyspieszysz stronę.

Pamiętaj też o wadze zdjęcia i rozdzielczości

Samo pomniejszenie rozmiarów zdjęcia wpłynie korzystnie na mniejszą jego wagę. Jednak nadal może ważyć za dużo i posiadać niepotrzebnie wysoką rozdzielczość. Staraj się, aby Twoje zdjęcia miały rozdzielczość 72 dpi, to w zupełności wystarczy do publikacji internetowej. Większe rozdzielczości pozostaw na druk 🙂 Co do wagi zdjęć najlepiej, aby miały wartość około 300 KB. Jednak nie zawsze jest to możliwe. Tak spore zmniejszenie wagi może zniszczyć jakość zdjęcia. Zwłaszcza jeśli wyjściowa grafika ma bardzo duży rozmiar (3000,4000 px i więcej). Wobec tego przyjmij następujące, bezpieczne wartości:

72 dpi – optymalna rozdzielczość zdjęć na strony www

< 1 MB – optymalna waga zdjęcia

Aby zmniejszyć wagę zdjęcia bez utraty jakości możesz skorzystać z kompresora. Osobiście korzystam z TinyPNG. To jedno z narzędzi, które szuka złotego środka pomiędzy małą wagą zdjęcia a jak najlepszą jakością. Warto abyś zwrócił uwagę także na format zdjęć. Najlepszym formatem (oprócz SVG, który jest ulubieńcem programistów) jest chyba wszystkim dobrze znany JPG. Zapewnia on najwyższą jakość w stosunku do rozmiaru zdjęcia.

Powodzenia w optymalizacji!

Obecnie brak komentarzy