Skip to content

Web Design – How To Optimise Images

How to Optimise Images for Website Performance

Importantly without losing quality

In this web design article we will look at why and how to optimise images before they are uploaded to WordPress can make a significant difference in the speed of your website?

Many businesses only upload full size photographs without optimising them for their websites, and these huge image files can slow down your website.

We have seen numerous websites where they have originally been created with optimised images. But when the company gets involved in adding new pages or posts incredibly large images get loaded directly from the camera.

You should always use picture optimisation best practices and techniques as part of your website content activities to correct this.

There are a number of ways to optimise images for quicker online performance without sacrificing quality and we will cover the most common.

Web Design - How To Optimise Images Blue Dolphin Business Development Ltd website design peterborough

Image Optimisation

What is it?

Image optimisation is the process of compressing and delivering photos in the shortest file size possible. You can do this while maintaining image quality.

The procedure appears complicated. But it is pretty simple these days. You may automatically compress photographs by up to 80% without sacrificing image quality. You can do this by using one of the various image optimization plugins and tools available.

How does it work?

In layman’s terms, picture optimisation uses compression technology. Such as “Lossy” and “Lossless” to assist in reducing file size without sacrificing quality.

What does “optimise images” imply?

If your WP hosting support or a performance test program has ever advised you to optimise images. All it means is that you should lower the file size of your photos by optimizing them for the web.

Importance and benefits of Image Optimisation

There are many advantages to optimising your images. But, the following are the most important ones to be aware of:

  • Increased webpage speed
  • SEO rankings have improved.
  • Sales and lead conversion rates are higher.
  • Limited storage and bandwidth (reduced hosting and CDN cost)
  • Backups of websites are now much faster (reduced cost of backup storage)

Images are the next heaviest component on a web page after the video. According to HTTP Archive, graphics account for about 21% of the total weight of a webpage.

Image optimisation is something that any business website must undertake. Especially if they want to flourish online. We know that fast websites rank higher in SEO and have greater conversions.

You may now be wondering how much of a difference image optimization may make.

According to a Strangeloop study, a one-second delay in website load time can lose you:

  • 7% in sales
  • 11% in pageviews
  • 16% in customer satisfaction

If these reasons are not enough for you to. Know that search engines offer faster-loading websites’ preferred SEO treatment.

This implies that by optimising your photos for the web, you can enhance the speed of your website. You can also improve your WordPress SEO ranks.

Optimising images for without losing quality

Website visitors will quickly lose interest and leave your website if it takes longer than 3 to 4 seconds to load. Online retailer Amazon identified that every second their pages take to load costs them one billion dollars in sales.

Your website might be downloaded from the clouds, but as an impatient species people want your website to load at the speed of light. Reducing and Optimising the size of images on your website can you speed up your website without losing sales?

Check that your images aren’t too large!

There are a number of factors that go together to create a fast loading website. One of these crucial factors is image optimisation. As most websites have lots of imagery there is significant potential to reduce file sizes.

In our image driven world high-quality photographs are essential. With the constant development of digital cameras great pictures, that are huge are now easily taken.

Unfortunately enormous images, result in massive files, which then slow down your site. Just one uncompressed image can substantially slow down your entire site and irritate the search engine optimisation gods. An example of how an oversized image impacts on your site is when you can see the image gradually appear line by line on your monitor or device.

Fortunately, there are a lot of techniques to reduce the size of your images without sacrificing image quality.

Resizing images for the web

The first step is to resize the image to the appropriate resolution.

If you’re going to use an image as a full-screen backdrop or a hero image, we would recommend making it approximately 2000 pixels in width.

Keep in mind that general website content is typically 900–1200 pixels in width when sizing an image for your page.

On a Mac: To adjust the size of your image, go to Preview > Tools > Adjust size.

On a PC : Picresizer is a useful software that allows you to resize images you can do either single or multiple images. No need to download anything simply drag and drop the images you want to optimise . You will have many options for resizing and manipulating your photos.

Make sure you choose the correct file format

There are a number of file formats and each file format has advantages and disadvantages. Knowing which one will be most suitable and to use, can make a significant difference in the performance of your website. The following provides a summary of the three most common picture file types on the web, as well as what they’re best used for.

JPEG (Joint Photographic Experts Group)

  • This is the most common file type on the internet.
  • It is the default setting / format for most digital cameras to output
  • The large colour palette that it provides makes it ideal for pictures and complex visuals.

PNG (Portable Networks Graphics)

  • High resolution, and with more colours and depth, the file size of a PNG can quickly balloon.
  • PNG has the ability to deal with transparency, which makes it great for logo files
  • Colours in flat patches of colour are rendered quite well.

GIF Graphics Interchange Format

  • GIF files tend to be really large.
  • Animations are allowed.
  • Unless you’re making short animations, not a good idea to use GIF.

Compress your images

The second step in image optimisation is compression.

This method passes your image through an algorithm. The algorithm dramatically reduces the size of your image file. For picture compression, we recommend some online programs. Although they all do the same thing, you may prefer to use one over the other. There are various levels of complexity and ease of access. We suggest you try a few of these!

  • TinyJPG | TinyPNG
  • Compressor.io
  • Kraken
  • ImageOptimizer

As a general rule,

  • Website images should never exceed 1MB in size.
  • Image file sizes should be in the 70KB to 400KB range. (1000 kilobytes = 1 megabyte)
  • If your image is larger than 1MB when it comes out of the compressor. Check your image size choices or try a different file type (see above).
  • To put things in perspective, the average size of a simple eight page website is only 4MB, so make the most of your limited space.

Make sure you use a descriptive filename. (IMG1234 isn’t good enough)

When your digital camera stores a picture it automatically creates a default sequential file name e.g. img1234, img1235, img1236 etc

It’s all too easy to fall into the trap of using this default file name from a camera or image download (e.g., IMG 1234). But this isn’t a good idea for a number of reasons.

When it comes to Search Engine Optimisation (SEO), it’s critical to choose relevant keywords. These Keywords will ensure that your site ranks higher in search results. Not only does Google crawl your website’s text, but it also looks for keywords in the file names of your images.

Use a Content Delivery Network to serve images.

Another wonderful option to improve image quality and site speed is to use a CDN to serve your images to a user.

CDNs use a network of globally distributed proxy servers to serve your cached images to users. They use real-time image optimisation. They do this by loading images from cache/proxy servers that are nearest to the users.

This provides users with a faster loading experience by relieving your server of the stress of supplying images. CDNs also use device detection to assess the size and type of images shown to different devices.

The hosting that we provide for all our web design includes CDN that offers the same edge caching features as paid CDNs from providers like Cloudflare

To optimise your images for the web, consider using vector images.

Scalable Vector Graphics (SVG) are visuals that you can scale to any screen resolution without sacrificing image quality. Vector pictures are ideal for the web since they speed up the page load time. You may easily include these as responsive photos on your website.

It is more suited to images with forms, curving lines, and colours (e.g., icons, logos, and illustrations) SVG is not suitable for detailed visuals such as digital photography and painting, the SVG file format.

Page size and load time are crucial components to user experience and should be priority considerations when developing and maintaining a website. One of the simplest ways to improve and maintain your site’s load time is to focus on image optimisation.

How to Optimise Images – The Best Image Optimisation Programs & Tools

Most image editing software includes image compression and optimisation settings.

There are numerous free image optimisation applications that you may use besides image editing software. All are usable in the matter of a few clicks.

As part of your website build and ongoing site development, we would recommend utilising these tools to improve your pictures before uploading them into your website media library.

As you carefully check each image, this strategy helps you conserve disc space for your WordPress hosting account. It also ensures the smallest images with the best quality that load the fastest.

Want to pick up the phone and speak to us about your Strategy, Website, Marketing or Business Development project?
Call us on: 01733 361729
Email: solutions@bdolphin.co.uk

Adobe Photoshop

Adobe Photoshop is a paid program. It includes a feature that allows you to save images that are optimised for the web. Simply open your image and select “File » Save for Web” from the menu.

This will bring up a new window. On the right, you may choose from a variety of image formats. Different quality settings are available for the JPEG format. When you choose your selections, the file size will be displayed on the bottom left.

adobe photoshop how to optimise images web design blue dolphin website design

GIMP

GNU Image Manipulation Program is an open-source and free alternative to Adobe Photoshop. You can use it make your photos web-friendly. The disadvantage is that it is not as user-friendly as some of the other options on our list.

To begin, open your image in GIMP and then choose File » Export As from the File menu. The save file dialogue box will appear as a result of this action. After that, click the export button and give your file a new name.

This will bring up options for exporting images. You can choose the compression level for jpeg files to reduce file size. Finally, save the optimised image file by clicking the export option.

gimp how to optimise images web design blue dolphin website design

TinyPNG

TinyPNG is a free web software. It reduces the size of your PNG files using a sophisticated lossy compression approach. You simply need to go to their website and upload your photos (simple drag & drop).

They’ll compress the image and send you a link to download it. TinyJPG, their sister website, you can use it to compress JPEG images.

They also have an Adobe Photoshop extension. You can use these in our image editing process because it combines the best of TinyPNG and TinyJPG inside Photoshop.

They have an API for developers to convert pictures automatically. They also have a WordPress plugin for beginners that can do it automatically

tinypng max 5mb how to optimise images web design blue dolphin website design

How To Optimise Images – Can You See The Difference

tinypng comparrison of images how to optimise images web design blue dolphin website design

JPEGmini employs lossless compression. This decreases the size of images without compromising their perceptual quality. You can also compare the original image’s quality to the compressed image’s quality.

You can either use their free web version or buy the program for your computer. They also offer a premium API that allows you to automate the procedure on your server.

jpegmini pro how to optimise images web design blue dolphin business development website design

Best Image Optimisation Plugins for WordPress

We would always recommend optimising your photographs before uploading them to your WordPress website. If you have a multi-author site or need an automated solution. A WP image compression plugin will be helpful.

Listed below are some of the best WP image compression plugins:

  • Optimole – has a unique setting that will automatically watermark your images for you from £19 per month
  • EWWW Image Optimizer from $7 per month
  • ShortPixel Image Optimizer – we use the paid version
  • Imagify: It is a plugin developed by the well-known WP Rocket plugin team.
  • Compress JPEG & PNG images – created by the team behind TinyPNG
  • reSmush.it – offers bulk optimisation of older images

You can speed up your website by using any of these WordPress image optimisation plugins.

How to optimise images – Conclusion

If you’re not already saving photographs that are optimised for the web, you should start today. This simple process will make a significant difference in the speed and SEO performance of your website.

There are several ways to optimise images for website performance, including:

  1. Compressing images: Use tools like TinyPNG or Kraken.io to reduce the file size of images without compromising on quality.
  2. Resizing images: Make sure that images are no larger than they need to be for their intended use on the website.
  3. Using the appropriate image format: JPEG is best for photographs and PNG for graphics/icons with transparent backgrounds.
  4. Using a Content Delivery Network (CDN): A CDN will distribute images to multiple servers around the world, so that they can be loaded faster for users in different locations.
  5. Lazy loading: Defer loading of images until they are in or near the viewport.
  6. Using next-gen image formats like WebP and JPEG2000 which can reduce image size significantly.
  7. Optimising image alt tags and file names for SEO.

By implementing these techniques, you can reduce image loading times and improve the overall performance of your website.

is your website losing you sales talk to Blue Dolphin for a free website audit

FREE Website Performance Check

  • Speed plays an important part in website performance how well does yours perform on desktop and mobile?
  • Is your site mobile responsive if not how many customers are you losing?
  • Is your site HTTPS?
  • With GDPR in place is your site legally compliant?
  • Find out about loads more website performance issues
is your website losing you sales talk to Blue Dolphin for a free website audit
Back To Top