How to Optimize Website Images – A Beginner’s Guide

In this article, I will explain, in simple, easy to understand terms, how to optimize website images so that they enhance your website posts but without causing any significant slowing down of your site loading speed.

This article is intended as a guide for beginners who are not sure of the basic principles involved in image selection, placement, sizing (dimensions), and compression (file size) and/or for anyone who is experiencing SEO (search engine optimization) issues deriving from their use of images in their website posts.

Why we Need to Optimize Website Images

Appropriate use of images can greatly enhance your website posts as well as the overall appearance of your website.  They can be a huge help in getting your message across (a picture is worth a thousand words) and, by breaking up what would otherwise be endless lines of text, provide a visual stimulus that keeps your readers engaged, staying on your website longer and wanting to come back for more.

But images can be a two-edged sword.  If you are not careful they can take up a lot of valuable space on your website and slow down your site loading speed to the point where your readers give up waiting and go elsewhere (and likely never come back). Also, Google likes websites that load quickly so if your images are slowing down site loading time, your Google ranking will suffer.

Your goal in image optimization is to reduce as much as possible the space an image takes up on your website but without a noticeable loss in the visual quality of the image.

Factors to Consider in Selecting, Editing, and Adding Images

The single most important consideration in adding an image to a page or post is the file size (see below) but this is just one of a number of factors that you will also need to think about if you want to ensure that the images on your website are indeed fully optimized.

Image Dimensions

A common mistake made by beginners is to fail to realize that when we talk loosely about “image size” we can be referring to two different, albeit related, things.  The first is the actual dimensions (width vs height) of the image and the second is the file size, (in kilobytes, megabytes, etc.) of the image.  The former determines how big the image will appear when viewed on a computer screen, tablet or smartphone while the latter determines how much space the image will take up on your website.

An image’s dimensions are now most commonly shown in pixels but they can also be shown in inches or centimeters/millimeters.

Although there is a correlation between an image’s dimensions and its file size (all else being equal, the greater the dimensions the greater the file size) it is still possible, through compression (see below), to use bigger images on your website while keeping the file size to a manageable level (optimized).  This being the case the dimensions of any given image comes down to aesthetics and your personal preference, having regard to the actual purpose of the image.

Typically, the images you use in your posts will fall into one of three general ‘sizes’:

  • Large, taking up (more or less) the full width of your web page
  • Medium, taking up between one third and one half the width of your web page
  • Small (or thumbnail), taking up less than one-quarter the width of your web page

The actual dimensions will depend on the width of your web page and which is in turn determined by your theme.

Depending on its source, any image you plan to use is unlikely going to be available in exactly the size you need so some resizing is almost always going to be required.  If you work with a PC this can easily be done in Paint and if you are a Mac user you can use Preview.  There are also a huge number of standalone programs available such as Photoshop (paid) and Gimp (free).

I work with a Mac and use Preview for all my resizing needs.

Most image resizers give you the option to scale the image proportionally which means that if, for example, you reduce the width of the image then the resizer will calculate and select the corresponding height that keeps the smaller image in exactly the same proportions as the original.

Image File Size

This is the big one (no pun intended) and something you need to pay very careful attention to.

If you download a full-size photograph from, say, a stock photography website there is every likelihood that image is going to have a file size of over 1 MB and quite likely in the 2-6 MB range or even higher.  Even a photograph you have taken on your modern smartphone can come in at over 4 MB.  For normal purposes, that is going to be way too big, particularly if you are going to be using multiple images on your post or page.

So, you are going to need to compress that image down to a more manageable and user-friendly size.  Fortunately, this can now be very easily done using one of the many free image compression services and apps that are available online, such as TinyPNG, Optimizilla, and Online Image Optimizer.  Just check which one best serves your needs because, in particular, some only work with JPEG images and not PNGs (the three previously named work with both file formats).  Also, some of these programs only allow you to upload single images while others allow bulk uploads.

My personal favorite, and the one I use almost exclusively, is Squoosh, which was developed by Google.

squoosh interface

It works with both JPEGs and PNGs, it’s super fast and, with its clean, uncluttered interface is so simple to use.  It currently only allows for single image uploads (this may change in the future) but, for me, this is not a disadvantage because I prefer to work on one image at a time anyway.

So, now you have your selected image, you have adjusted its dimensions as needed (do this before you compress) and you have your compression tool of choice.  Down to what file size should you compress?

This is where many of the ‘experts’ disagree but here are some guidelines:

  • Except for very special situations (see below) consider 350 KB as your absolute maximum for any image while always striving to keep well below this
  • Keep your large (full page width) images below 130 KB
  • Keep your medium (¼ – ½ page width) images below 75 KB
  • Keep you small/thumbnail (less than ¼ page width) below 25 KB

I personally set myself an absolute overall limit of 100 KB for any image and strive to keep my large images below 65 KB, my medium images below 30 KB and my small images below 15 KB.  In my posts, the Featured Image is typically the largest image (both in dimensions and file size) and usually comes in around 45 – 65 KB.  It’s the first image my readers see and I want it to have the most impact.

These, of course, are figures for individual images and if you plan to use multiple images on a post or page you will also need to take account of the cumulative file size of those images.  Here again, there is not a general consensus but you should strive to keep the aggregate file size of all the images in any post or page below 2 MB and ideally below 1 MB.

What if you have a website where maximum image quality is essential, for instance, if you have a photography website and need to display your work on your site?  Don’t worry, you still have options.

Image Type (file format)

JPEG (.jpg), PNG (.png), and GIF (.gif) are by far the most used formats for website images.

JPEG is most commonly used for photographs.  It allows for far greater compression than PNG and GIF without obvious loss of image quality, at least to the naked eye.  JPEG should be avoided in images with lots of text or other sharp lines because compression can cause blurring of those lines.  Also, JPEG cannot be used if you need a transparent background.

PNG is the most suitable format for graphics (particularly those with fine details), text-heavy images, and images where a transparent background is required, such as with a logo. Compression can lead to a serious loss of image quality so PNG images, when used, are typically going to form much larger files than JPEG images.

The GIF format is now most commonly encountered in animations but it originated, and can still be used, for still images.  As with PNG, a GIF image does not compress well and so it is really only suitable for smaller graphics (preferably with fewer colors) and icons, for which it works well.

Total Number of Images (on a post or page)

As long as you are mindful of the individual and aggregate image file size of the images on your post or page, the number of images you include should not be a factor in image optimization.  This means you are free to use as many images as you need to provide a visual stimulus to your readers (and avoid the dreaded ‘walls’ of text) while being observant of the overriding rule that any image you do use should have relevance to the point you are making.

As a very rough guide, think along the lines of one image for every 150 – 200 words of text.

Title, Alt Text, and Captions 

Although they have no effect on a  website’s loading speed, Title, Alt text, and Captions are so important for SEO (search engine optimization), that I would be remiss in not including a reminder to add this information as you upload images to your website.

The Title (or filename) allows Google to know what the image is about (which is good) without seeing it.  It also gives you a searchable reference within your media library.

Alt text provides a more detailed verbal description of the image so that if the image cannot be displayed for any reason, or cannot be seen because of visual impairment, the reader can still get a good sense of what was intended.

Captions can add clarity and/or emphasis to an image.  Also, many people quickly scan an article before deciding to read it in more detail and image captions have been proven to be one of the things that catch such a person’s attention.

Options If you Have to Use Larger File Sizes

Sometimes you may have no choice but to use larger file sizes for your images and/or to include large numbers of images in your posts.  Here are a couple of suggestions if you fall into this category.

Use Lazy Load

In the normal course, when a reader clicks on a link to a post, the reader’s browser attempts to load the entire post, including all the images, at one time and if the post contains images with large files and/or multiple images there will be a delay while those images load into the browser.  If that delay is more than a few seconds your reader will quite possibly quit your website, something we want to avoid at all costs.

With a lazy load plugin installed on your website, your reader’s browser only uploads the images one at a time as the reader scrolls down the post thus giving the impression of a much faster site loading time.

There are a number of lazy load plugins available and a lazy load function is also included in some of the automated image optimizers that are available.

Use a Faster Hosting Service for Your Website  

With hosting, you largely get what you pay for and many of the more economical hosting services simply don’t offer the speed or efficiency (or security) that is available with some of the premium hosting services.  If you have a website that uses lots of high-quality images it may be time to bite the bullet and switch from shared to dedicated hosting.  The cost will be noticeably greater but so should your website’s loading speed.

Automated Image Optimization

I personally prefer to optimize images individually and before I upload them but there are a number of plugins available that, when activated on your website, will automatically compress and resize any image that you upload in accordance with your own pre-selected settings.  Many will not only optimize newly uploaded images but all the images in your media library.

If this option appeals to you then some of the best offerings in this category are Optimole, Smush, Shortpixel, and Kraken.io.  All operate slightly differently so it is important to compare and contrast to find the one that best suits your requirements.   All have both free versions and paid plans with the latter, of course, offering greater functionality.

Final Thoughts

I hope you have found this article on image optimization helpful.  As I said at the beginning, this is intended as a guide for beginners and is not intended as an in-depth, ‘everything you will ever need to know about images’, treatise.  Having said that, if I can help you with any follow-up information please don’t hesitate to ask by leaving your question in the comment box below.

Philip

philip and colette

The greatest years of your life are still ahead!

Leave a Comment