From 64 MB to 3.1 MB for 8 images we want to look good is alright I think. So that's how we keep the image loading on our blog snappy, even on mobile. The size comparison from our full size shots is usually very significant: % ls -1 -sh source gulp-imagemin: Minified 8 images (saved 324 kB - 9.1%) The output of the script is not very interesting, but here we go: Using gulpfile ~/projects/gulp-image-resize/gulpfile.js But there are barely any savings on jpegs. The default settings work great with PNG and save a lot. The undertakings change the records, building source files into creation. New to grunt, using grunt-contrib-imagemin to optimise my images. These errands are code-based and use modules. At an undeniable level, gulp configuration files as streams and lines the streams to various assignments. The point of the script is to take a folder / directory of images on the harddrive, convert them to jpg and to resize them. Gulp is a cross-stage, streaming assignment sprinter that allows engineers to mechanize numerous improvement errands. Gulp-newer makes sure that no images is resized again if the source file hasn't changed (believe me, this is good if you're resizing a lot of images and you don't want to wait forever, when changing one). The dependencies can be installed with: npm install -save gulp gulp-gm gulp-newer gulp-imagemin Var imagemin = require( 'gulp-imagemin') In addition, we get 'Details' which look. Now everything is red, which is quite hard to look at and to parse visually. JavaScript task runners like gulp are a great deal of help when automating tasks with the help of a large amount of community packages for almost every purpose.įor the GegenWind Blog we frequently resizes images with a gulp task that looks a bit like this: var gulp = require( 'gulp') In gulp 3, when errors were logged the output was colored nicely, with separate colors for filenames, plugin name, etc. You take something that used to take a long time and then you automate it. Writing your own tools and scripts is always a very satisfying thing. Hethey, reading time: ~2 minutes Image Resizing with Gulp So that's how we keep the image loading on our blog snappy, even on mobile.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |