How to Properly Pre-Process and Optimize Images for WordPress
It is crucial to properly pre-process and optimize images BEFORE you upload them to WordPress. Otherwise your site load times might suddenly be dragged down by a 3 megabyte image and your mobile users will shake their fists in anger. They’d go find pitchforks and tar but it is easier to just leave your site and never come back. Yikes.
Load time is not only a vital part of the user experience but you could tank your rankings in Google if it takes your page dozens of seconds to load.
So how do you keep your WordPress images lean and small in size but still looking sharp and gorgeous?
Filetype
Generally images should be compressed JPEGs unless the image needs to be transparent, in which case a PNG is best. GIFs work too but watch the size.
Most graphics programs allow you to export a JPEG compressed for web. This might be represented as a number – 80-85 out of a 100 is a good target. You can also run images through a free compression tool like Kraken.io – it is amazing for cutting the file size dramatically without losing quality.
Watch for noticable pixelation on big expanses of a color, especially blue and black. If you see pixelation, you’ve gone too aggressive.
Dimensions
Ideally an image’s dimensions are less than 1000-1600px in either dimension
An exception might be if your image has text as part of the image (I’d then call it a graphic). What then happens is on Retina screens (HDPI) the images look blurry because the screens have higher pixel density. In these cases we sometimes use a technique that loads a 2x size version of the image. So if the normal width shown within a post is 600px, it would load a 1200px version of that to show in the space.
Even better is avoiding text being part of your image and placing actual text over the image so you can highlight / copy it. Ensures Google can read it too.
Weight / File Size
The image “weight” (file size) should generally be under 300kb. For a decent size image I’m happy if it ends up 150-250kb. Less is more and will help ensure the page loads quickly on mobile connections. The file size is predominantly a function of the scale of the dimensions of the image and the compression rate.
While programs like Photoshop, Illustrator, and GIMP offer save-for-web style exports, when leanness is crucial we like to also run the images through Kraken.io.
Bonus
For SEO purposes the filename should be descriptive of the image e.g. amino-acid-under-microscope.
Keep a watch out for the issue of image usage rights / copyrights. (Finding and Using Images for Your Blog Posts)