Optimizare / compresie imagini pe servere

[aelius]

Utilizez tot timpul tool-ul pagespeed de la google pentru a verifica site-urile mele. Dorind sa obtin un scor cat mai mare la pagespeed, am facut o functie bash si am introdus-o in '.bashrc'. Cu ajutorul acestei simple functii, pot optimiza automat toate imaginile din site.

function optimizeaza() {
	echo "Optimize jpg/jpeg images ....."
        for i in `find $1 -type f -name *.jpg` ; do jpegoptim $i ; done
	echo "Optimize png images ....."
	for i in `find $1 -type f -name *.png` ; do optipng $i ; done
}

Cum functioneaza ?

root@pluto:~# optimizeaza /home/marian/www/mywebsite.ro

Cum arata output-ul ?

Optimize jpg/jpeg images .....
/home/marian/www/mywebsite.ro/stuff/maunel2.jpg 640x426 24bit Exif IPTC ICC JFIF  [OK] 87586 --> 85650 bytes (2.21%), optimized.
/home/marian/www/mywebsite.ro/stuff/photo4.jpg 2592x1936 24bit Exif  [OK] 1406815 --> 1393885 bytes (0.92%), optimized.
/home/marian/www/mywebsite.ro/stuff/maunel.jpg 640x426 24bit Exif IPTC ICC JFIF  [OK] 74139 --> 72027 bytes (2.85%), optimized.
/home/marian/www/mywebsite.ro/devel/mediaplayer-4.4/preview.jpg 352x256 24bit JFIF  [OK] 8295 --> 7602 bytes (8.35%), optimized.
/home/marian/www/mywebsite.ro/lsgc/admin/themes/NCleanGrey/images/layout/body.jpg 1x300 24bit JFIF  [OK] 338 --> 338 bytes (0.00%), skipped.
/home/marian/www/mywebsite.ro/lsgc/admin/themes/NCleanGrey/docs/screenNCleanGrey.jpg 500x388 24bit JFIF  [OK] 98373 --> 98373 bytes (0.00%), skipped.
/home/marian/www/mywebsite.ro/lsgc/admin/themes/OneEleven/images/layout/cmsms-logo.jpg 205x69 24bit Exif Adobe  [OK] 9858 --> 8988 bytes (8.83%), optimized.

Optimize png images .....
OptiPNG 0.6.4: Advanced PNG optimizer.
Copyright (C) 2001-2010 Cosmin Truta.
** Processing: /home/marian/www/mywebsite.ro/easypaypal/documents/DatabaseSchema.png
952x500 pixels, 3x8 bits/pixel, RGB
Input IDAT size = 49464 bytes
Input file size = 49611 bytes

Trying:
  zc = 9  zm = 8  zs = 0  f = 0		IDAT size = 40765

Selecting parameters:
  zc = 9  zm = 8  zs = 0  f = 0		IDAT size = 40765

Output IDAT size = 40765 bytes (8699 bytes decrease)
Output file size = 40840 bytes (8771 bytes = 17.68% decrease)
.........

Avantaje ?

- Incarcare mai rapida in browser si o parere mai buna a utilizatorilor.

- Trafic mai mic

- Pagespeed score mai mare. Va ajuta la SEO.

Tool-uri utilizate:

- jpegoptim => jpegoptim – Freecode

- optipng => OptiPNG Home Page

Pentru mai multe detalii, va rog sa cititi manualele tool-urilor. Daca aveti intrebari le puteti pune in acest thread.

Edited April 3, 2014 by aelius

[GarryOne]

Mai vin cu o completare legata de imagini, pentru un page speed mai mare, marimea trebuie sa fie exacta, evitati sa faceti resize din html/css.

[aceveve]

Si inca una de la mine deoarece am vazut ca destul de multi nu stiu asta. display:none nu inseamna ca imaginea dispare. Inseamna ca se incarca dar nu este afisata. Am vazut greseala asta in special la versiunile de mobil.

[tromfil]

Thanks. Acum ceva vreme folosisem o linie de genul pentru a aduce la jum?tate imaginile dintr-un folder. Poate ajut? pe cineva.

for name in $(ls *.jpg); do convert -resize 50% $name new/$name; done

Folose?te pachetul imagemagick.

[bubbles]

Recomand si GTmetrix | Website Speed and Performance Optimization