Weboldalainkat élesítés előtt érdemes a Google átlal készített PageSpeed Insights eszközzel megvizsgálni. Számtalan hasznos tanácsot kaphatunk. Nem biztos, hogy érdemes minden esetben a 100/100-as pontszámra törekedni, ám több olyan tanács is van, amely megfogadása mindenképpen ajánlott. Ezek közül az egyik a képek optimalizálása.

Egy-egy kép számtalan olyan meta információ tartalmazhat, amely csak feleslegesen növeli a fájl méretet és így a letöltési időt. Sokszor meg egyszerűen rosszul van tömörítve a kép és emiatt lesz a mérete nagyobb az indokoltnál. Célunk az, hogy a weboldalunkon a képeinket ugyanolyan minőségű, de kisebb méretű képekre cseréljük.

Képek minimalizálására számtalan segédeszköz létezik, ám ha amúgy is kéznél van a Grunt, akkor felesleges más programot is telepíteni. Ha esetleg mégsem lenne kéznél a Grunt, akkor először a Grunt-ról szóló bevezető cikkemet ajánlom figyelmedbe!

Első lépésként hozzunk létre egy új projektet, benne a Grunt imagemin nevű kiegészítésével. Azaz hozzunk létre egy package.json nevű fájlt az alábbi tartalommal.

{
	"name": "GruntImagesMinifier",
	"devDependencies": {
		"grunt": "*",
		"grunt-contrib-imagemin": "*",
		"jpegtran-bin": "*"
	}
}

Majd adjuk ki az npm install utasítást a konzolon. (ezzel az utasítással a Node.JS csomagkezelője telepíti a szükséges fájlokat)

Következő lépésben hozzuk létre a Gruntfile.js nevű fájlt a következő tartalommal.

var grunt = require('grunt');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.initConfig({
	imagemin: {
		dynamic: {
			files: [{
				expand: true,
				cwd: 'src/',
				src: '*.{png,jpg,gif}',
				dest: 'dest/'
			}]
		}
	}
});
grunt.registerTask('default', ['imagemin']);

Továbbá hozzunk létre a projektben még két mappát, src illetve desc néven. Első a forrás mappa, amelybe majd az optimalizálni kívánt képeket tesszük. Második a célállomás mappa, ahová az optimalizált képek kerülnek.

Ezzel készen is vagyunk! Most az src mappába másoljunk néhány képet, majd a konzolba írjuk be a grunt utasítást! Végül némi várakozás után a desc mappában megtaláljuk az optimalizált képek, amelyekben a PageSpeed Insights sem talál majd hibát!

Természetesen ennél lényegesen több paraméter is megadható a Gruntfile.js-ben, ezekről bővebben olvashatsz a grunt-contrib-imagemin oldalán!

Zárszóként csak annyit említenék meg, hogy ezzel a módszerrel nagyon kevés energiaráfordítással igen sokat tudunk tenni az optimalizált weboldalunkért. Használata mindenképpen ajánlott!