Optimizing images helps your pages load faster
There are several ways to optimize images on your site:
- Use images scaled/sized to the size they need to be. So if you need an image that’s 1200×800 and that’s the size you upload. Yes, you’d have to resize the image before you added it to your site. Avoid uploading images that are thousands of pixels across, unless there’s a reason. For example, images from your camera are often 4000 pixels wide or more!
- Make sure your html includes the image dimensions – this helps the page render more quickly. WordPress and most site builders do this for you, if you use the Insert Image button.
- Process your images in an image editor and use their “save for web” settings to compress and optimize the images.
Know the difference between image file types: .jpg, .png, .gif and when to use them to get the best image quality and lowest file size.
Online tools to optimize images
Here are four free online tools to help you optimize your images.
WordPress plugins to optimize images
There are also plugins that can help with optimizing images already on your site. Some use third party services to compress images, others work within your site. Note that some plugins only work on images in the Media Library, but not the theme (design) images. Some are plugins are versions of the online tools.
Use Lazy Load
This uses jquery/javascript and loads images on the page as the user scrolls down – they don’t load til they need to. Many platforms build this in today.
Using a CDN (Content Delivery Network)
Today’s browsers can load content from multiple sources and using a CDN takes advantage of this by putting your images and other media on a 3rd party network of servers. That’s the simplest explanation, there’s a bit more to it, depending on what service you use. Some CDN’s include:
- MaxCDN
- Amazon S3
- Cloudflare
