Webstack
Bejelentkezés

Elfelejtetted a jelszavad?

Nem vagy még tag? Kattints ide és regisztrálj most!

Képek optimalizálása

PHP | tomizej  | 2013-01-09 06:47:35

Ebben a cikkben bemutatjuk, hogyan hatnak a képek a weboldalak teljesítményére. Az egyik legnagyobb szerepet az oldal letöltés sebességében ugyanis a képek jelentik (legalábbis a statikus tartalmak betöltésénél, galériáknál). Minél részletgazdagabb és jobb minőségű egy kép, annál nagyobb, ami sajnos webes környezetben adatforgalmat jelent.

 

Milyen kép formátumot válasszunk?

Webes környezetben a böngészők 3 féle file formátumot támogatnak GIF, PNG, JPEG.
Néhány szó és pro-kontra a 3 képformátumról:

GIF

Palettás képek tárolására alkalmas (256 szín).

Előnyök:

  • Veszteségmentes tömörítés
  • Animációk
  • Átlátszóság (alpha csatorna)

Hátrányok:

  • Fotók, részletes képekre nem alkalmas

JPEG

Rendkívül hatékony veszteséges tömörítő algoritmussal működő formátum, amely mára az Internet egyik szabványos formátumává vált

Előnyök:

  • TRUE color, fotó minőség
  • jó tömörítés, kis file méret

Hátrányok:

  • Nem támogatja az átlátszóságot
  • érezhetően gyenge képminőség nagyobb tömörítés esetén (zaj, életlenség)

PNG

Rendkívül hatékony veszteségmentes tömörítést alkalmazó formátum.

Előnyök:

  • TRUE color
  • Veszteségmentes tömörítés
  • Átlátszóság (alpha csatorna)

Hátrányok:

  • nincs animáció

 

Összegezve az előnyöket és hátrányokat a JPEG-t fotókra érdemes használni, galériákhoz, ahol használhatunk veszteséges tömörítést és itt tudunk a legtöbbet optimalizálni a képeken, úgy hogy nem lesz szembetűnő.
A GIF formátum egyszerűbb animációkra lehet jó.
A PNG pedig minden másra, web grafikák design elemek, színátmenetekre alkalmas.

JPG Képek optimalizálása

Meta, EXIF információk törlése a fileból:

A JPG fileok tartalmaznak meta, EXIF információkat (Kép szerzője, fényképező típusa, fókuszbeállítás, dátum) amik nem szükségesek a kép megjelenítésében és növelik a file méretét.
Ezeket a meta adatokat a PHP GD library nem támogatja, ami annyit jelent, hogyha PHPvel méretezünk képet, gyakorlatilag eldobtuk ezeket az információkat a képből. Viszont vannak erre külön szoftverek. pl.: jpegtran.

Mikor milyen tömörítési arányt érdemes választani?

A tömörítés arányával csökkenthető a file méret, viszont a kép minőség is romlik. 85-90%-os minőség még elfogadható lehet, ez ugye függ az oldal témájától is, pl egy profi fotós portfolióján nem lehetnek gyenge minőségű képek, az ő látogatói ugyanis a jó minőségű fotók alapján fogják őt választani. Itt 95%-os minőség kell legalább. De pl egy webáruház esetében, ahol a vásárlók nem a képminőség alapján fognak dönteni, lehet nagyobb tömörítést is alkalmazni, bizonyos határokon belül persze.

A webes JPEG tömörítés kulcsmegoldása a progresszív JPEG tömörítés lehet.

Progresszív JPEG vagy Baseline?

Az JPEG képeknek két alapvető típusa létezik. Az Baseline és a progresszív. A kettő közt a különbség a kép megjelenítés módjában van, valamint a progresszív valamivel kisebb képméretet produkál.

Baseline

A Baseline valójában a normál JPEG kép formátum. A böngészők sorról-sorra töltik be folytonosan a képet bal fentről a jobb alsó sarokig (amíg a kép adatok érkeznek a szervertől). Nagy felbontású képek betöltése ezzel a módszerrel nem túlságosan van a felhasználói élmény magaslatán, főleg ha az internet kapcsolat sem a leggyorsabb. A felhasználónak ki kell várniuk még a kép teljesen betöltődik a böngészőben, közben a részlet csíkokból csak találgatni tudja, mi lehet majd a képen.

Az alábbi képen látható, hogyan tölti be a böngésző a baseline tömörítést, illetve ha rákattintuk a képre ki is próbálhatjuk.

 

baseline jpeg

Progresszív

A progresszív JPG teljesen más fajta megjelenítést eredményez. Ezek előnye, hogy fázisonként töltődik be az információ és egy rossz minőségű előnézet kép ismételt feljavításával éri el a végleges, jó minőségű eredményt a megjelenítés. A kép betöltési fázisok számát a kép mentésekor lehet megadni. Ez scan-nek nevezik a képszerkesztő szoftverek. A felhasználói élményt nagyban növeli, hogy azonnal látható egy előnézeti kép, amiből kivehető az információ.

Az alábbi képen látható, hogyan tölti be a böngésző a progressive tömörítést, illetve ha rákattintuk a képre ki is próbálhatjuk.

 

progresszív jpeg

Progresszív JPG tömörítés PHPben

PHP-ben a GD Library is tudja a progresszív JPG tömörítést. Az imageintrelace() függvény meghívásával beállíthatjuk. Lásd:

//Létrehozunk egy GD image képet
$i = imagecreatefromjpeg("image.jpg");

//Beéllíthuk, a progersszív bitet.
imageinterlace($i,true);

//Mentjük
imagejpeg($i,"image.jpg",90); 

Az Imagemagic library-vel a következőképp tehetjük meg a progresszív JPEG tömörítést:

$image = new Imagick('image.jpg');
$image->setInterlaceScheme(Imagick::INTERLACE_PLANE);
$image->writeImage('progressive.jpg');

 

Szerző: tomizej

Hozzászólások

meszlenyi.tamas.5
2013-04-04 05:20:33

ok

Hozzászóláshoz be kell jelentkezni!

Keress minket Facebookon
Ajánlások