Optimizing Images / Best practices / Grunt

I’ve only just beginning using the Grunt script. I wondered if anyone has built upon it and uses any other tools? In particular I was thinking it would be cool to optimise images which I think you can do with Grunt.

If there are any images in the theme that would be great to optimise. How would that work for images within the /media/ directory? Having said that, most of these images will have been uploaded via the WP media uploader. Any thoughts or other ideas?

Just to add to my previous post, I currently use a great plugin to optimise images on the server called EWWW Image Optimizer. It does require you or your host installing a few PHP image libraries, but it works a treat. This is very useful when you hand a website over to a client and want images uploaded properly optimized. I moved over to this from Yahoo’s Smush.it because of the amount of downtime they were having.

Of course, the other issue is when client’s upload rediculously large images (like 3000x2000px). WordPress does a good job at resizing, but it also keeps the original image. Does anyone know of a way to get WP to resize the original image to a more sensible size? Ideally I can add some custom code and not rely on another plugin.

Finally, how about supporting Retina screens? I’ve seen quite a few methods- some use client side and some use both server/client side scripts to serve the correct image. But how does that work in WP? Any thoughts?

You can use Wordpress’ large, medium, and thumbnail sizes to set reasonable sizes. Other than that, there are php sizing scripts like Timthumb, but other than that, you sort of have to train or at least explain to clients that images should be sized and worked on somewhat before uploading for the website.

Other than that, I generally don’t set img tags with specific heights and widths, but I do set the container to a specific type of width (depends on if it is responsive or not), and the img to 100% width or whatever works. Height to auto and you can keep the aspect ratio correct.

In the end though, I guess it depends on the client. If they are going to keep you around for work, you can try and help them with their images, but if not, you can do your best to explain what they should do, but it’s pretty difficult to predict every type of image that they will try to upload to their website.

Thanks, @kalenjohnson

Using WP’s built in image sizes (and in fact creating your own sizes) works well, but this doesn’t address the issue that the original image is kept on the server. Despite mentioning it to clients I can’t tell you how many HUGE images end up being uploaded. This is bad for storage space, bandwidth and server load.

Obviously resizing before upload is the best way forwards, and I’ll just have to keep mentioning this. Does anyone recommend an easy tool for non-techy clients that is cross platform?

Another idea would be a function or plugin that refuses to accept an image above a certain resolution or size. Does anyone know of such a plugin?

Other than that, there are plugins that state that the can resize the original image after upload:


I haven’t tried these yet, and I don’t know if they would be compatible with the likes of EWWW Image Optimizer.

Anyone have any thoughts on my original question about using the Grunt Script to optimise images in development?

I use imsanity for these tasks when required, and find it to be very good. Default image size is 1024px wide or high, but you can set it to whatever you want. It can also re-size images already uploaded, which is great.

EDIT: I like the idea of using Grunt to optimise images, but am not sure how it would be inserted into the workflow if images are already on the server (via the WP media manager)

Exactly, Grunt would not be used in a production server. Still, it could be helpful for images while you are building the theme.

Upon upload, wordpress creates 3 image versions i.e, thumbnail, medium and large sizes plus the original image.

You can lessen the uploaded images by setting the medium and large size to max width to 0 and max height to 0 values. In this case it will only make two versions, the original and thumbnail size.

@jayseventwo Thanks for that. I’ve just tested Imsanity and it works perfectly and when combined with EWWW Optimizer reduces the amount of space by a huge amount. Obviously it would still be better for clients to upload smaller images since all this resizing by the server will put it under more strain.

I wasn’t really thinking about optimizing images in the media folder with Grunt. I can’t see how that would work for the production site. However, it might be useful if there are any images used within the theme folder. Just a nice addition. If any of you know how to do that it would be great to add it to the Grunt script.

My final question was about retina ready images? Do any of you bother? If so, how do you do it? A plugin? Something else?

I’ve done a few complete Retina ready websites, but it adds a good amount of time to get as many images as possible at double the size, then make sure they’re all loading correctly.

I would suggest simply doing as much as you can with CSS3, possibly SVG icons if you are able. Then I generally will make sure the logo is Retina ready, as I want that to be sharp, and perhaps anything else that looks better, but I don’t often make sure EVERY image is Retina.

If you use CSS backgrounds, its easy to swap the background with a media query, but img tags are harder, you need some type of Javascript implementation to change the src if it’s on a Retina device.

I’m using MacRabbit’s Slicy and it’s a wonderful time saver for Retina image production.

Also, I’m using the same process that @kalenjohnson is using (img {width:100%; height: auto;}) on my content images. Usually this serves a higher res image than the device width (it’s going to work better with iPhones than iPads,FYI).

Also, for compression, I use ImageOptim and it’s been performing well.

Too bad all of those are Mac only.

For optimizing images, I don’t know about jpg’s, normally I just save those out at 50-70%, I do a quick check on the file size and quickly check if there is a big decrease in quality in Photoshop.

For transparent PNG’s, though, I often run them through tinypng.org . I don’t do it for every image, but if there is a bunch of png’s in my theme that I am using, I will generally use it. It tends to get anywhere between a small to relatively large gain, sometimes over 50% size savings.

But yeah, there is an image optimizer for Grunt, just check the Grunt plugins.

Have you ever tested any? I would like to add some new useful plugins to my grunt file.

The following link has an interesting article on setting up Grunt tasks for WordPress, including image optimisation. I haven’t had a chance to try them yet, but looks fairly straight forward.

http://mattbanks.me/grunt-wordpress-development-deployments/

1 Like

Sorry, I haven’t yet

I’ve just tried grunt-contrib-imagemin

Here is an output example:

Here is a comparison of an optimized PNG image file:

What do you think?

1 Like

I will tell you what I think. that is some cool stuff.
Here I was looking for a theme with Bootstrap, find Roots.io and now have been exposed to so much more that does not even depend on either of the two. I love being a dev. on days like this.

Hi bmorejohn, How about the comparison on the image quality? What are the outputs?

Has anyone gotten sprites working correctly with Grunt and LESS? The SASS + Grunt solution works perfectly for me, but I tried a few of the image optimizers/spriters with the LESS and Grunt and couldn’t find one that worked for me. I’m sure it came down to setup, as they all seem to have quite a few dependencies.
After I couldn’t get it to work though, I just went back and saved my sprites folder and uploaded it to http://cly.jsser.com/sprites/, which does a pretty awesome job of placing all of the sprites and giving you accurate CSS.

1 Like