Pisząc bloga lub rozbudowując swoją stronę o chociażby aktualności, szybko zorientujesz się, że zdjęcia które zgrywasz z aparatu lub kupujesz w sieci nie nadają się do bezpośredniego umieszczania na stronie. Opublikowanie kilku zdjęć o wielkości po ok 3 MB potrafi znacznie spowolnić ładowanie się www.

Po co Tobie optymalizacja zdjęć?

Skompresowanie zdjęcia lub innej grafiki do poziomu poniżej tego, gdy zauważalna staje się utrata jakości obrazu, przyniesie Tobie:

  • przyspieszenie wyświetlania całej www przez przeglądarki
  • przyspieszenie ładowania poszczególnych zdjęć
  • ułatwi robotom indeksującym Google przyznanie Twojej stronie wysokiej pozycji w wynikach wyszukiwania (wolno ładująca się strona przegra ten wyścig z taką samą stroną, ale z odchudzoną grafiką)
  • oszczędność miejsca na serwerze

Przy okazji, jak wysyłasz zdjęcia lub ilustracje na serwer – koniecznie pamiętaj o tym, że wyszukiwarka Google korzysta z nazwy pliku pokazując wyniki wyszukiwania grafiki. Wiele osób właśnie stamtąd może trafić do Twojej strony, więc zadbaj by np. Twoje zdjęcie na stronie „O mnie” nie nazywało się „DSC08927.JPG”. Druga sprawa to atrybut „Alt” obrazka. Wpisujesz go obowiązkowo – wyszukiwarka tylko w ten sposób „dowie się” co znajduje się na zdjęciu i będzie mogła uznać je za wartościowy content.

 

Jak prawidłowo odchudzać grafiki na bloga i www?

Każdy plik graficzny posiada 2 cechy własne:

  1. rozmiar w pikselach, np 1200×900 px,
  2. oraz objętość (potocznie wagę pliku)w kilobajtach, czyli np. 1,3 MB

i…. tak, DPI nie ma w przypadku zdjęć do internetu znaczenia. Dlaczego? – wyjaśnię na końcu.

Optymalizację możemy zacząć od ustalenia – jakie zdjęcie ma być duże na naszym ekranie. Przyjmuje się kilka wielkości standardowych. Maksymalnym standardem, wynikającym z rozdzielczości popularnych monitorów, jest 1600×1200 px. To optymalna szerokość na +/- całą przeglądarkę. Minimum to 900×675 px – typowe zdjęcie ilustrujące na stronie www. Często stosuje się jeszcze opcję pośrednią, czyli 1000×750 px. Pierwsza wartość jest szerokością i to ona jest najważniejsza, więc jeśli masz zdjęcie o innych proporcjach – skup się na dostosowaniu jego szerokości.

Kolejnym krokiem w optymalizacji grafiki jest kompromis pomiędzy: tzw. wagą pliku (objętością w kB) i jakością, którą chcemy by zdjęcie miało. Uważa się, że obrazek powinien mieć poniżej 300 kB, ja polecam Ci zejść z wagą jak najniżej się da zachowując dobrą jakość zdjęcia. Zależnie do tego czy optymalizujemy JPG, PNG czy GIF, możemy modyfikować jakość poprzez różne algorytmy. W przypadku PNG i GIF zmieniamy (zmniejszamy) ilość kolorów, a w przypadki JPG kompresujemy informacje o pikselach. PNG jest fajnym formatem, lekkim i zawsze dobrze się wyświetla, nawet w profilu kolorystycznym CMYK. Jednak, w przypadku zdjęć, lepiej optymalizuje się JPG.

Nie będę prezentować Tobie całej listy różnych narzędzi do przystosowywania grafiki na potrzeby internetu. Przedstawią Tobie 3 metody i zarazem 3 narzędzia, które sama stosuję i uważam za najlepsze.

Program do optymalizacji zdjęć do internetu RIOT – stacjonarny

metody optymalizacji zdjęć do internetu program Riot

Ten program musisz ściągnąć na swój dysk i zainstalować. Najlepiej pobierz go bezpośrednio ze strony producenta, czyli stąd – Riot program do optymalizacji zdjęć do internetu. Riot jest prosty, intuicyjny w obsłudze i niezawodny. Obsługuje pliki o rozszerzeniu JPG, PNG i GIF. Mamy pełną kontrolę nad jakością i objętością pliku. Podgląd, z możliwością zoom daje pełną elastyczność decydowania o tym jaki będzie plik wyjściowy. Mamy też możliwość kompresji do wyznaczonej objętości w kB.

 

 

Optimizilla – program do optymalizacji zdjęć do internetu – online

sposób optymalizowania obrazków do internetu OptimizillaSzybszym sposobem, nie wymagającym instalowania niczego na dysku komputera jest program online. Ten nie obsługuje jednak obrazków w formacie GIF. Jego funkcjonalność jest bardzo zbliżona do Riot’a. Możesz jednocześnie uploadować do 20 plików z grafiką. Optimizilla czeka na Ciebie tu: http://optimizilla.com/

 

 

Optymalizacja zdjęć w telefonie – Photoczip

 

metoda zmniejszania rozmiaru zdjęć w telefonieCzasem do publikowania zdjęć używamy telefonu. Aplikacją, która zmniejszy i dodatkowo skompresuje Twoje zdjęcie jest np. Photoczip – compress resize. Działa zarówno dla JPG i PNG, jednak koniecznie przejdź do jej ustawień i ustaw maksymalny rozmiar zdjęcia po kompresji (np 1200px dla dłuższego boku) oraz jego maksymalną „wagę”. Im mniejsza tym lepiej, ja ustawiłam 200 kb (kompresowane zdjęcia wychodzą wtedy ok 150 kb). To idealnie do publikacji na stronie www, która wtedy lekko się ładuje.

 

Co zrobić gdy zdjęcie na Facebooku wygląda źle

 

Jeśli Twoje zdjęcia na Facebooku wyglądają kiepsko też podpowiem Ci jak sobie z tym poradzić.

 

  1. Facebook zaleca wagę do 1 Mb, chociaż opublikuje również zdjęcia o objętości 15 Mb. Jeśli sam zadbasz o to, żeby zdjęcie było lekkie, to platforma nie będzie musiała już robić kompresji, a Ty będziesz wiedział dokładnie jak wygląda zdjęcie, które ostatecznie pojawi się na Facebooku.
  2. Spróbuj opublikować je w superrozdzielczości. Ustal wymiar dłuższego boku na 2048 pikseli, gdy to zrobisz Facebook automatycznie nie będzie obniżał jakości zdjęcia. Dlaczego tak jest i jak długo ten sposób będzie działał – nie wiem. Możliwe, że uznaje takie zdjęcia za mające wyższą wartość estetyczną niż np. memy.

 

 

Wskazówki końcowe

Dbając o to żebyś już miał(a) pełną wiedzę a zakresu przygotowania grafik do publikacji na swojej www, zrobię co obiecałam. Wyjaśnię Ci o co chodzi z DPI.

DPI  (ang. dots per inch, czyli kropki na cal) to jednostka stosowana do określenia rozdzielczości obrazów drukowanych. Od określenia DPI zależy jak widoczne będą szczegóły. Przykładowo: zdjęcie do foto-albumu drukujemy w gęstości kropek 300 na cal, natomiast plakat 1m x 2m możemy wydrukować w rozdzielczości 150 DPI, a billboard nawet w 60 DPI. Jest to trochę zakręcone, a sprawy nie ułatwia fakt, że w Polsce zamiast cali jako jednostki miary długości, używamy metrów. Możemy sobie ułatwić i skorzystać np. z tego kalkulatora pikseli.

W przypadku grafik internetowych używa się analogicznie określenia PPI (ang. pixels per inch, czyli piksele na cal). I standardowo zapisuje się je w rozdzielczości 72 PPI lub 96 PPI. Jednak parametr ten nie ma najmniejszego znaczenia w tym, jak Twoja grafika będzie wyświetlana na monitorze. Przykład: zdjęcie o rozmiarze 1200×900 px, zapisane w trzech wersjach (72, 96 i 300 DPI/PPI) zostanie wyświetlone na monitorze identycznie, jako zdjęcie 1200×900 px. Natywne PPI ekranu (rozdzielczość) to ok 100 PPI i tylko ten parametr uwzględniany jest przez wyświetlacz.

Podsumowując, dbaj o optymalizację grafik! Znasz już sposoby 🙂 Na pewno przyniesie Ci to korzyść.

 

Jeśli uważasz, że artykuł przedstawia wartościową treść, udostępnij znajomym. Niech się niesie 🙂