Speed Up Your Website With Simple Image Improvements

Speed is everything. Ok, almost everything. We all like Ferraris right? Well maybe you can’t afford one. But you can afford to make your website faster.

This is a great strategy to make your readers and customers happy. Google might even rank you higher too!

What? That’s right. Page speed (load times) is measured by Google and really does affect your search rankings.

Read this post from Google on how load times affect Google Rankings for more info.

How to Make Your Site Faster

So you are serious about making your site faster. But what are the first steps? Seeing as how Google made this an issue, they have also provided us some useful tools. Let’s try Page Speed Insights to test your site. In Google’s words

PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster.

Once you click on the above link, you will see this in the center of the page. Simply enter the web address (URL) you want to test. It could be your homepage, a specific post, or any page. You can and should test them all.

Once you have pressed the Analyze button, be patient. It can take some time to run. The result will be a list of improvements you can make to speed up your page.

Some possible speed improvements Google list include:-

• Optimize Images
• Serve Scaled Images
• Deferring Javascripts
• Put CSS files in the head
• Leveraging Browser Caching
• Minify CSS, Javascript etc
• and many many more

Before you get confused by all the jargon, we are only going to look at the image related issues. As a non-technical website owner, this is something you can easily fix

Serve Scaled Images

Click on the link to “Serve Scaled Images” if it’s in your results. This sections tells you what images can be improved in terms of size/scale. Often images are too large (ie too many pixels).

On webpages you only need the size you actually display. In terms of the complete page size (and load time), reducing image can make a huge difference to page speed. Especially if you have just grabbed them from somewhere with no extra rescaling or compression.

Google’s Analyser will tell you a few things. First, what the difference is between the image size you are using and what you actually show. You will also see a possible percentage improvement at the end of each line. This gives you an idea of whether it’s worth changing that image.

Here is an example from my page analysis:-

https://madlemmings.com/…/color_panel.jpg is resized in HTML or CSS from 800 x 414 to 598 x 309. Serving a scaled image could save 5.9KiB (45% reduction).

My images are already partially scaled, but I can still see a 45% improvement if I rescale my images to this size “598 x 309” (width x height). I will do this using GIMP, a Photoshop-like free image tool, using rescaling.  If you don’t have such a tool, check out the my post on choosing a tool for image manipulation. Most of these should do the job.

You can do this for any image you see listed in the analyzer – serve scaled images page, with your website URL in it. As these are the only ones you control (normally).

Optimize Images

Google also recommends optimizing your images. Not being a mindreader you might wonder what they mean. Unlike “Serving Scaled Images” above, this refers to removing any fat from your images. Now we all like a piece of lean meat right? well this is kinda the same. Some of the things Google recommends you can do include:-

• compressing your image further
• removing any excess space (ie. cropping)
• remove any comments (here I presume they mean things like EXIF data etc)

The simplest and most effective two are compressing and cropping.

Cropping

If you have never cropped before, here is a short description on how to do it. First you take a “Selection Tool” which should provide a dotted line rectangle. There are other shapes, but you usually want a rectangular image on your website right?  You then drag it to highlight the area you want to keep (cutting the fat). Finally you “crop to selection” (that is what it’s called in GIMP) or similar. In GIMP there is also a specific “cropping tool” you can use with a lot more options, and better visuals on what is cropped.  This video gives a quick tutorial on cropping and resizing in GIMP.

Compressing

Another way to reduce your image size is compression. Don’t be too confused about what actually happens with compression. You should just know that as you compress more, the image quality is reduced. I usually compress to about 60% for larger images, to be safe.

With smaller images, such as thumbnails, you can usually compress more. Experiment with more compression (lower values in the image tools) and see how it looks. It varies from image to image.

In most image tools compression happens when you save the image. If the image is not already a jpeg or png or similar, you can usually choose the type you want to save as. To get compression you should choose one of these two image types. When you are saving it, the image tool should offer you a scale (0-100 for JPEG, 0-10 for PNG in GIMP) for compression.

Google lists the following tools as possibilities more further image compression, often on the command line if you are more adventurous.

For JPEG

• JPEGTRAN 
• JPEGOPTIM

For PNG

• Optipng
• PNGOUT

They have also explained more about Optimizing Images if you wish to read the details. I will leave that as homework for tonight!

Again, once you have done the rescaling, cropping and compression, you should re-upload the image to your site. You can also re-run the Analyzer if you want to see the results.

Further Improvements?

Of course this is only the tip of a rather Titanic iceberg. But these changes are simple enough and provide huge benefits. In future posts I will enlighten you on other things you can do with javascript and css files, as well as caching to further improve your site.  If you use WordPress, most of this can be done with a plugin.

Now you are even closer to owning that Ferrari Website!!