Optimising images for the web

Make your site quicker and better

Image optimisation is a handy skill to master for anyone who runs a website, no matter whether they’re producing a blog, promoting a side hustle, or operating an ecommerce store. Image optimisation can help you to drive better engagement with your audience by delivering a better experience on your website.

There are three major aspects of optimisation we will touch on in this article: Optimising images so that they maintain their quality yet download quickly; optimising images so that they are attractive to look at; and optimising the text around your images to help drive better search engine results. There are five tips that we’ll explore:

  1. Choose the right format for the job.
  2. Crop the image to the right size.
  3. Compress the file.
  4. Look at WordPress plugins and other optimisation tools.
  5. Use captions, image file names and alt-text for SEO.

Let’s look at the tips

  1. Choose the right format for the job

 You’ll generally be using three file formats for the images on your website: .jpg, .gif, and .png. Each of them has its benefits and drawbacks, so you’ll want to save your image in the format that best meets your requirements. The website builder  or photo editing programme you are using may default to one of these formats, but it’s best to choose the format yourself.

The .jpg (or JPEG) format is commonly used for photographs on the web because it can handle thousands of colours with a reasonably small file size. Many image editors allow you to tweak file size and image quality to get the results that meet your needs. For example, a wedding photographer might tolerate large file sizes in a gallery of their work, but aim for images on their contact page to download faster.

GIF or .gif is an older format. It offers lower quality than .jpg, but has the benefit of supporting animation. It’s not as attractive for your photographs as .jpg. Finally, there is the .png (PNG) format, which supports more colours and better quality than GIFs. PNG works well for images where you need a transparent background, for example, some graphics and logos. File sizes can be larger than JPEGs.

  1. Crop the image

 A great place to start with preparing an image for the web is by opening it in your photo editor and taking a look at the picture in its full glory. Do you want the entire photograph or image, or would it look better if you crop away the unneeded details to focus on the important elements? The photographer’s rule of thirds is useful here.

Imagine your image is sliced into nine equal squares by two lines running vertically and two lines horizontally. The image will generally be more aesthetically pleasing if the subject or most important details are placed at the intersection of one of the dividing lines or alongside one of the lines. Many amateur designers and photographers make the mistake of putting the key element in the centre.

  1. Reduce the size of the file before uploading

 This is one of the most critical elements of optimising your images for the web. You’ll want your photos, graphics, infographics, logos and so forth to look as attractive as possible, while still loading quickly even on slower connections. In addition to the format of the image, there are a couple of factors that will affect the file size (and hence, how quickly it loads):

 The dimensions: Dimensions of images are generally measured in horizontal and vertical pixels, for example, 1600 x 800 for a homepage image or 795 × 300 for hero product images. A professionally taken photo from a DSLR camera might weigh in at 5184 × 3456 pixels – which is massive and would take longer to download.

You should reduce the dimensions before uploading the image to ensure that it can load quickly. Do bear in mind that you can make an image smaller, but it’s hard to make it bigger and retain its quality. Rather err on the side of making it slightly too big and then adjusting it than making it too small.

 The quality: Most photo editing apps let you adjust the quality of the image along a spectrum that ranges from low to maximum. Each adjustment up or down makes a big difference to the size of the file. In most cases, a setting of high or 50-70% of the full quality will strike a balance between quality and speed to download, In general, a larger and more detailed image will look worse to the eye as the quality is reduced than a smaller or simpler one.

 The resolution: The resolution of an image has a dramatic impact on the file size. Adjusting it can be a good way to bring the size of the image down without a noticeable loss of quality. Resolution is generally measured in dots per inch (dpi) or pixels per inch (ppi). If you were printing a glossy brochure, you would want 300dpi or above to get a high-quality finish. But for the web, a 92dpi or even 72dpi version of the same image would be more than adequate because most monitors can’t display higher resolutions.

A good photo editor like Adobe Photoshop or the open-source GIMP can handle a lot of this work for you with minimal fuss. If you use the Adobe ‘save for the web’ option, you can easily see and adjust settings for resolution, dimensions, and quality. If you don’t have the full Photoshop suite, the Adobe Photoshop Express mobile app is free, but not as rich in functionality. Other tools to consider are PicMonkey or PIXLR. 

  1. Look at WordPress plugins and other optimisation tools

 If you’re running a site that features a lot of images, you might benefit from the many tools out there that can help you reduce manual work of image optimisation. WordPress users, for example, can use the EWWW Image Optimizer or Kraken Image Optimizer to optimise images uploaded to WordPress.

TinyPNG is a web app that allows you to drag PNG and JPEG images into your browser and optimise them all at once. Other online services like ShortPixel and Imagify can be used to compress and optimise the images on your site. They reduce image sizes but also maintain quality as much as possible.

And if you’re curious about how your website is currently performing, you can cruise over to PageSpeed Insights or WebPageTest for a quick and dirty analysis.

  1. Use captions, image file names and alt-text for SEO

 The last tip is to remember to optimise the tags and text that surround your images, too. Naming an image file with the right term can help your search engine optimisation. If you have a photo of a television you’re selling, name the file “Samsung QLED Smart 4K UHD TV” rather than IMG125 to draw in people searching for the product and images of it.

A caption below the photo is another opportunity to use relevant search terms. For example, if you’re selling artisanal baked goods, give it a caption like: “Our oven-fresh sourdough bread”. Also be sure to fill your alternative text in, describing what your image shows. That can also be helpful for visually impaired visitors using screen readers or people who have images turned off.

 A picture tells a thousand words…

 The look of your website  is as important in capturing and keeping the user’s attention as the text. So, you want to make prudent use of images to engage your audience’s interest. At the same time, people will browse away if large images slow them down when they’re trying to see what’s on offer on your site.

Plus, depending on your website host, having a lot of large images on your site can rapidly use up storage space on your account. But with the tools and tips we discussed in this article, you can easily optimise images on your website and deliver a better experience, especially for people who do not have fast Internet connections.

 

Image by: https://www.freepik.com/free-photo/detail-view-young-man-eyeglasses-taking-photos-street_2583944.htm#page=1&query=photography&position=45