Divi Tutorials Web Development

How To Serve Scaled Images

This is a simple tutorial. Part one of our “Speed Your Website Up” series. In this tutorial we are really looking to scale the images down for increased speed. Most of the tutorials I make will be using the Divi or Genesis theme and framework. They are not the only themes I use but I sure do use them a lot.

First of all, if you’re not familiar with gtmetrix.com please do yourself a favor and definitely peruse the site for all the available tools. This is a fantastic website to get methods and analysis to speed up your site.

  1. Go to https://gtmetrix.com/
  2. Put the complete URL to box, and click analyze
  3. Scroll down and click on Serve scaled images
  4. Open image that need to be scaled

Divi Tutorials Serve Scaled Images

Divi Tutorials Web Development

5. Download the image, and resize it to size it’s supposed to be (in the above example we need it to shrink from 342×328 to 128×123)

6. Add resized images to section where the image belongs

Divi Tutorials Web Development

7. On Design → Sizing → Image width,  reset the image size to actual size

Divi Tutorials Serve Scaled Images

For Divi it’s a pretty easy process. However, make sure you take advantage of a awesome web tool like Gtmetrix. It will save you time in the long run and you’ll get a better bounce rate because your site will be faster and more efficient.