Scribd
Upload
80 views12 pages

Image Optimization Tips

This document provides steps to optimize images for a website to improve page load times. It recommends using GIMP, a free and open-source graphics editor, to resize images to exact dimensions needed and save them in the WebP format. Optimizing images in this way and replacing JPGs and PNGs significantly reduces file sizes and improves page load speeds. It also discusses enabling WordPress to upload WebP files and using Cloudflare's development mode when making multiple edits.

Uploaded by

curt dub
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
80 views12 pages

Image Optimization Tips

This document provides steps to optimize images for a website to improve page load times. It recommends using GIMP, a free and open-source graphics editor, to resize images to exact dimensions needed and save them in the WebP format. Optimizing images in this way and replacing JPGs and PNGs significantly reduces file sizes and improves page load speeds. It also discusses enabling WordPress to upload WebP files and using Cloudflare's development mode when making multiple edits.

Uploaded by

curt dub
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

A Quick Guide on Image Optimization

It’s essential that all images on your site be optimized.

Else, your pages will be sluggish.

Look at these two pages …

https://learnseo.dev/img-opt-eg-1/

and

https://learnseo.dev/image-opt-eg-2/

The pages are visually identical.

Here are their respective performance reports …

The page /image/opt-eg-1/ takes 9.46s to fully load.

And the page /image-op-eg-2/ takes 2.03s to fully load.

Here are the pages’ GTMetrix reports …

Sold to
[email protected]
This is because the images on the latter page are optimized better.

Using a plugin to optimize your images isn’t the best thing to do. Most plugins can’t reduce the size
of an image file a lot.

Instead, you would want to use a software like GIMP or Photoshop to optimize your images.

GIMP is a free program, and is almost as good as PhotoShop.

You can download GIMP from here:

https://www.gimp.org/downloads/

Here’s how you can optimize an image with GIMP …

You would want to install it on your computer in case you do not already have it.

There are two steps to optimizing an image:

1. Scale the image to the exact dimension you will using on your webpage

2. Save it as a WebP image

WebP is a format Google created, and they love it. You would want to replace all JPG and PNG
images on your pages with WebP images.

Let’s see how to do that in GIMP.

Step 1. Open the image you want to optimize ..


Let’s suppose this is the image we want to resize ..

You can get to view the image properties by clicking on the image menu item in the top navigation
bar and clicking on ‘image properties’ …
This is a 7480 x 4989 px JPG image and its size is 5.9MB.

This is way too large to be used on a webpage. Nevertheless, many web designers use several
images like these on a single page.
Step 2: Resize the image

To do this, go to image -> scale image

You should now see a dialog box pop up


If you are going to be using an image that’s 750 x 400 on your page, then change the width to 750
and push the ‘tab’ key.

The height will automatically change so that the aspect ratio is maintained.

Now, click on ‘scale’ and the image will be scaled to 750 x 500 px.

Step 3: Export as WebP

Now, click on the ‘file’ menu item in the top navigation bar and choose ‘export as’ …

You’ll see the ‘export image’ dialog box pop up ..

You’ll need to manually change the extension to .webp and select the location where you want to
save the file, and then click on ‘export’.
Now, the ‘export image as webp’ dialog box appears.

You’ll now want to bring the image quality slider all the way back to 50% and uncheck the ‘save Exif
data’ checkbox and click the ‘export’ button …
And that’s it. You’ve scaled the image and saved it as a WebP image.

If we check the image properties now

Even though GIMP says it’s a JPEG image, it’s a WebP image.

The dimensions are 750 x 500 px and the size is 34.9 kB.

If you right click on the image in Windows and see its properties, you’ll see it’s a WebP image.
You’ll want to repeat this with every JPEG and PNG image on your page and save all of them as
appropriately scaled WebP images.

If you do this, you will see your page load times reduce significantly.

Error while uploading WebP files?

When you are trying to upload WebP files, it’s possible WordPress will throw this error:

Sorry, this file type is not permitted for security reasons

This happens because WordPress by default allows only certain file types to be uploaded.

In case your WordPress installation does not allow WebP files to be uploaded, you will need to edit
the wp-config.php and add this line of code …
define('ALLOW_UNFILTERED_UPLOADS', true);

This will let you upload any kind of file to your WordPress installation.

If you are going to be editing wp-config.php manually, you would want to take a backup of your
website before doing so.

In case you are not comfortable making these edits yourself, you would want to contact your hosting
support and request for help.

You would not want to make edits to the wp-config.php file if you are not familiar with php.

Cloudflare Development Mode

When you need to make lots of edits to your pages, like when you are replacing all JPG and PNG
images on a page with WebP, you would want to turn Cloudflare’s development mode on.

To do that, log into your Cloudflare account, select the domain for which you want to turn the
development mode on …

Make sure you are in the ‘overview’ tab and turn development mode on.

This will turn off the CDN for a period of three hours, and you will see files from the hosting server as
you make edits to them.

Else, you will keep seeing cached copies of your pages, and the changes you make may not be readily
visible.

You’ll see a pop up asking whether you really want to turn the development mode on.
Click conform and the development mode will be turned on.

Once you turn the development mode on, you will want to purge the CDN cache ..

You will need to purge the plugin cache …

Clear the browser cache (CTRL + Shift + Del) …


And then log out and log into WordPress again.

You should now be seeing files from your hosting server and not from the CDN.

Once you are done editing, you will want to turn off the development mode in your Cloudflare
account …

And run all of the pages you want to test through

https://tools.keycdn.com/performance

a few times so that the newly edited pages will get cached by Cloudflare.

You will now be able to test the pages and measure performance improvements.

You might also like