Optymalizacja zdjęć na stronie www

Motocykl Triumph Test rozdzielczosci zdjec
Motocykl Triumph.  Test rozdzielczości zdjęć

Dziś dostałem zaproszenie do znajomych na LinkedIn od osoby związanej z biznesem, szkoleniami itp. Ale nie o tym będzie ten wpis. Na profilu osoby zapraszającej znalazłem link do strony www. W takich sytuacjach szybciej klikam w link niż w guzik akceptuj zaproszenie :)

Domena fajna, krótka, łatwa do zapamiętania, bez kombinowania, że piszemy c czytamy k, albo że nie wiadomo czy przez v czy w. Nic z tych rzeczy. Klikam i czekam, czekam, łącze 30mb a ja czekam. Załadowały się zdjęcia i oniemiałem.

Rozdzielczość zdjęć na stronie www

Na stronie zdjęcie wyświetla się w rozdzielczości 460px x 268 px a ktoś władował tam fotografię wielkości 2000px x 1158px.

Przeliczmy to:

  1. 460*266 = 103960
  2. 2000*1158 = 2 316 000

22,78 razy więcej! Szok! Myślicie, że to był rekord? Nieee. Obok głównego zdjęcia kilka mniejszych.

Liczymy dalej:

  1. 220*124 = 27 280
  2. 1920*1080 = 2 073 600

76,01 razy większe zdjęcie się ładuje niż wyświetla. Po co? A zdjęć na głównej z dziesięć.

To się musi ściągnąć, załadować, wyświetlić. Wiadomo, że dzisiaj nikt nie łączy się z netem przez modem, ale niektórzy korzystają z niewielkich pakietów danych. Mi mój transfer starcza w zupełności ale przecież takie zdjęcia zwiększają też transfer na hostingu, a niektórzy nie mają nielimitowanego transferu u swoich dostawców ale nie ważne nie mój problem.

Przecież jest Wordpress

Już miałem pisać, że nie wiem z jakiego CMSa korzysta ta strona ale już wiem – WordPress, to dziwne, bo ten CMS sam skaluje zdjęcia a przy dodawaniu obrazu do wpisu wgrywa kilka zdjęć, różnej wielkości i wyświetla to, które wskażemy. I to jest banalne, a przyśpiesza działanie stron. A Google jak wiadomo lubi te, które ładują się szybciej. Są przecież różne page speed testy i inne narzędzia optymalizujące zdjęcia. Są też systemy zarządzania treścią, które odpowiednio to formatują. Nie wiem gdzie jest błąd na tamtej stronie i nie chce wiedzieć. Szkoda, że niektózy nie zwracają na to w ogóle uwagi, a powinni.

Jak sprawdzić rozdzielczość Waszych zdjęć na stronie

Jak najprościej się da. Nie ma co angażować tu innych narzędzi skoro przeglądarka sama dostarcza nam tych informacji. Należy kliknąć prawym guzikiem myszy w wybrane zdjęcie i wybrać Otwórz grafikę w nowej karcie. A następnie najechać kursorem myszki na tę kartę/ zakładkę.
Efekt poniżej:

sprawdz-rozdzielczosc-zdjec-na-www rozdzielczosc_zdjec-nowa_karta

Zdjęcie użyte jako obrazek wyróżniający ma rozdzielczość 300px x 169px i takiej wielkości jest ładowane, zdjęcie oryginalne jest wielkości FullHD 1920px x 1080px. Dla lepszego wyświetlania zdjęć i większego komfortu przeglądających stronę używam wtyczki wp-jquery-lightbox, która m. in. dopasowuje zdjęcia do ekranu odpowiednio je scalając.

Narzędzia optymalizujące zdjęcia

IrfanView ramka_resize
Ramka Resize

Od wielu lat używam programu Irfan View, który jest mega prosty w obsłudze. Po instalacji domyślnie zaproponuje używanie go jako domyślnego programu do otwierania różnych plików. Proponuję zaznaczyć image only. Do filmów i muzyki znajdziecie na pewno lepsze aplikacje. Sam program to nie wszystko, zachęcam do pobrania plug-in’ów czyli wtyczek rozszerzających jego możliwości.

Obsługa podstawowych funkcji odbywa się z klawiatury. Będąc w temacie optymalizacji, zmniejszania, zdjęć na stronę www najbardziej użytecznym skrótem będzie Crtl+R (Resize). Po otworzeniu zdjęcia w IrfanView naciskacie Ctrl+R, pojawia się ramka Resize, gdzie w domyślnie zaznaczonym miejscu możecie wpisać pożądaną szerokość zdjęcia, obok jego wysokość. Chociaż tutaj przy zaznaczonej opcji Preserve aspect ratio wysokość zmieni się proporcjonalnie. Z prawej strony zdefiniowane są przykładowe rozdzielczości.

Oprócz tego program oferuje masę innych funkcji, jedną z moich ulubionych jest tzw. przetwarzanie wsadowe, dzięki czemu możemy zautomatyzować swoją pracę i za jednym zamachem zmienić rozdzielczość wielu zdjęć – skrót klawiaturowy B (Batch conversion).

Zapisując efekt zmian, standardowo naciskamy Ctrl+S, zdjęcie zapisze się domyślnie w tym folderze, ale wcześniej będziemy mogli zmienić typ obrazka, jego jakość, jeśli zapisujemy jako JPG, przeźroczystość w wybranych typach i wiele innych funkcji.

Podsumowanie

Podsumowując. Nie zawsze mega wielka rozdzielczość zdjęcia jest zaletą. Oczywiście jeśli oddajemy grafikę do druku to dobrze aby plik był jak najbardziej wyraźny, ale jeśli chodzi internet optymalizacja zdjęć na stronie www ma bardzo duże znaczenie. Mam nadzieje, że ten krótki tekst pozwoli niektórym lepiej dobierać zdjęcia na ich strony czy blogi.

ps. Zdjęcie motocykla pobrałem ze strony: Gratisography: Free high-resolution photos

Add a Comment