As a photographer or designer you are bound to have a lot of images on your site, but with a lot of images comes an inherent problem, it slows down the loading of your website.
Site speed is very important for both your visitors and search engines. If your site takes to long to load visitors will get annoyed and search engines will penalize you. Luckily there are a number of ways you can optimize your images to load faster and in doing so speed up the loading time of your site.
One important thing to remember before applying any of the techniques I will be talking about is to NOT upload large images to begin with, for the most part I would advise on keeping your images below 300kb, especially if you are in a hosting environment where resources are shared.
Here are some WordPress plugins you can use to further optimize your images.
EWWW Image Optimizer automatically and losslessly optimizes your images as you upload them to your site. It can also optimize images that you have previously uploaded.
Another nice feature of this plugin is the ability to convert your images to the file format that produces the smallest image size. It can also optionally apply lossy reductions for PNG images.
If you take adaptive design seriously, you might want to consider using Hammy. This plugin takes your images and regenerates a number of smaller sized images. So when a visitors arrives on yours site, they see the most appropriate sized image (or the smallest one possible). This makes for a better and faster experience, especially for mobile users.
Hammy only works for images within posts and pages, not custom post types.
PB Responsive Images automatically reformats all your images into a format similar to the picture tag proposed by the Responsive Images Community Group on w3.org.
Each image is reformatted based on standard CSS media queries and SLIR query pairs, giving more flexibility in the variety of query combinations. Also, the plugin provides shortcodes so you can customize the queries used per image, and helper functions that can be used to customize the queries used per post or per layout.
Lazy load doesn’t need configuring because it works out-of-the-box.
It uses jQuery.sonar to only load an image when it’s visible above fold. This plugin is an amalgamation of code written by the WordPress.com VIP team at Automattic, the TechCrunch 2011 Redesign team, and Jake Goldman from WordPress consultancy