Skip to content

Tools we use:

Website Images

So it goes like this. Someone asks me to take a look at their site that is suddenly loading super slow after a few changes. I get in and run a GT Metrix test only to discover that they uploaded a 16MB picture that is like 5000px wide. Adding these plugins and following best practices will help optimize your images and keep your load times low.

For the record, the best way to optimize your images is to do so before you ever upload them to your media library. I usually compress (using save for web in Photoshop) and resize images before uploading them.  But if you manage a church website volunteers have access to, odds are that won't be a common practice for an admin uploading an event image. That's where these tools come in handy! 

Image Optimization

Image optimization boils down to file size and dimensions which means compression and resizing are crucial. Shortpixel handles both. That's why it's my go to. For file size try to keep large background (BG) images under 200KB and other photos under 75KB.

For dimensions try to keep BG images under 1500px (I do 1200px) and try your best to size other images to the size you want them to display on desktop. This keeps them from being scaled during the page load, thus decreasing load time.

Though you can only set one dimension size in ShortPixel and Resize, you can use the built in edit media function in WordPress to scale/crop your images to the proper size.

Caching

I put caching into Image Optimization because caching plugins can also dictate how a page loads. My go to is WP Rocket's lazy loading setting for images.

Basically it defers loading of images (and videos) until they are needed. An image at the very bottom of the page doesn't need to load with everything else. Lazy Loading decreases your page load times, especially on an image heavy page.