The constant challenge with images on a website is the battle between the image’s quality and size. With the importance of speed for your website being paramount for success, we look at the various techniques and best practices to ensure your image’s maximum quality in the smallest size possible.

What size should my images be?

When it comes to uploading an image to your website, it is vital that they have been compressed to the minimum size without losing quality. It sounds contradictory because as soon as you reduce the size, you are losing detail in the final image, or are you?
The key is in planning how you will use each image. For example, a thumbnail image doesn’t need to be high quality, but if the image is larger when the thumbnail is clicked, such as in a gallery, the image needs to have enough data to present a professional image for your brand.

The best way to supply your images yo your website development team is in the maximum resolution and size that you have as they will be able to optimise the images in the right way for each purpose. If you’re the one managing the upload – we recommend a file size of less than 600KB and dimensions between 1500 and 2500 pixels wide, for best results.

We strive to deliver sites with images of a crystal clear quality across all devices, ensuring every user’s engaging experience. Our design and development experts have collaborated to put together the following article to help us achieve this aim. Based on the image related questions they receive the most from our clients, it offers some key insights to help you get the most from your images and the website development experience as a whole

Will my images affect the loading speed of my website?

Although it may feel counter-intuitive to reduce the size and resolution of an image, it is critical to remember that your website speed will affect your ranking in search engines and the user experience of waiting for things to load. We have all sat looking at our phones or computers waiting for an image to load on a website fully, so it is essential to minimise as much as possible. This kind of delay can impact your bounce rate as visitors to your website decide they don’t have time to wait and visit your competitor’s website, which has optimised their images.

A quick and free way to check your websites speed is using Google’s Speed Test.

How should I save my image files?

When delivering your image files, be sure your images are saved as either a .jpg (for photos) or.png (for graphics) file, and remember that the following are not web-compatible:

  • .pdf
  • .pds
  • .tff
  • .doc

Image names can act as alt text on your site where no other text is provided and helps search engines determine what the image is about, making it more likely to show up in search results.
The image file name needs to be clear, descriptive, and up to 8 words or less. Try not to use any characters such as question marks, exclamation mark or other special characters as these can cause unexpected problems with your website. For example: if your image name is IMG_00742.jpg, change it to something descriptive such as red-cotton-jumper-01. This process will help your SEO by people searching for images of the product you are selling.

Why have my images been cropped?

Some of the images you display on your website will likely need to be cropped in order to fit the space available. It is particularly relevant when it comes to your mobile website design. For example, a large banner image on your desktop design may be cropped down to half of its original size to fit a mobile screen appropriately.

How should I supply my logo or similar graphics?

Logos and other graphic files should be supplied to your website development team as vector files or as a .png. Vector images are zoom and resolution-independent, which means that will retain quality no matter what size you are displaying the graphic throughout your site.

What to do if you need to compress images yourself?

Many different websites and software are available to help compress large images to a smaller size without losing the quality. We look at the best free top ten Image optimisation Tools for image compression:

1) JPEG Optimizer

JPEG Optimizer allows you to upload and compress your photos online. This simple tool works, as its name implies, only on JPEG files.
What’s useful about JPEG Optimizer is that it allows you to resize your images before you optimise. Resizing your images will save you, even more, loading time, and with this online platform, you don’t have to split your workflow into two steps.
JPEG Optimizer also allows you to select your optimisation level, which lets you control your optimised image quality. This feature is significant for photographers since you’ll want to find the sweet spot between preserving quality and saving space.

2) Optimizilla

Optimizilla manages to reproduce excellent quality in your images with the smallest file size possible. And you can compress both your JPEG and PNG photos with this tool.
Optimizilla also features a slider which shows you the before and after version of your photo. That way, you can preview the quality of your image before continuing. With the slider, you can decide how much you want to optimise your image before experiencing any noticeable quality loss.
This online tool is great for batch processing. Optimizilla allows you to upload up to 20 images at a time and to set the compression level for each photo separately.
Unfortunately, since Optimizilla only works on JPEG and PNG files, you won’t be able to use it to optimise your PDFs.

3) Kraken.io

Kraken.io is another bulk image optimiser. With Kraken.io, you can optimise bulk quantities of JPEG, PNG and animated GIF files.
Unlike other image optimisers on this list, Kraken.io optimises your files for the smallest size. That is, with Kraken.io, you’ll always get the smallest file size version of the image you input. Then, you can download the compressed photos one at a time or in a .zip format.
Kraken.io also allows you to export files to Dropbox or import files from Box, Dropbox or Google drive.
If you’re looking for more advanced features, Kraken.io offers a pro version that comes with a slew of other perks like image resizing capabilities, the ability to input multiple image sources at once, unlimited image size uploads and more.
The free version allows you to compress photo files up to 32 MB each in size and up to a total of 100MB of photos. So really, how well Kraken.io will work for you depends on the initial size of the images you want to optimise.

4) Optimole

Optimole is a popular image compression and optimisation plugin, made by the same people behind ThemeIsle.
It can compress, resize, lazy load and host your images on their CDN.
Of course, the SAAS services aren’t free, but there is a free Optimole plan for you to get started with their system.
The best part is installing the WordPress plugin on your site and efficiently optimising your images without having to do much.
Let it work behind the scenes whilst you do something else.

5) ImageRecycle

ImageRecycle compresses your JPEG, PNG, GIF and PDF images with impressive results. Their drag-and-drop interface lets you drag photos from your desktop to the optimiser for an easy workflow.
The site also offers free website analysis. When you request an analysis, ImageRecycle returns a free report designed to help you understand which images on your site would benefit from optimisation to improve your site’s performance.

ImageRecycle has available a WordPress plugin, Shopify app, Joomla Extension and a Magento extension. If you use any of these other sites, you can use ImageRecycle’s extensions to compress your images instead of navigating to a separate site.

With ImageRecycle, you get access to a 15-day free trial with a 100 MB limit. You can then choose to purchase a paid plan — $10 for 1GB, $20 for 3GB and $50 for 10GB.

6) CompressNow

CompressNow is another easy to use optimisation tool that allows bulk upload. Simply upload your JPEG, PNG and GIF images from your computer, set a compression percentage for the images and download them to use on your site.

7) Trimage

Trimage works well for Linux users to remove EXIF and metadata from images. This image compression tool then compresses your JPEG and PNG images to the highest level possible.
If you’re a Mac or PC user, the other options on this list will be a better bet for your system. Trimage is best suited for Linux users.

8) Online Image Optimizer

Online Image Optimizer, a Dynamic Drive product, helps you easily optimise images of all major formats, so your photos load faster on your website.

This tools also includes image conversion features, which can help you turn your JPEGs into PNGs for use online.

Unlike some other image optimisers, Online Image Optimizer also lets you upload images via URL. That means you can optimise images already on your website! In the long run, that saves you time and the effort of replacing the old image with the optimised version online.

Online Image Optimizer only permits you to upload one image at a time, though, and that image can have a maximum file size of 2.86 MB.

9) Tiny PNG

Tiny PNG is one of the oldest and most popular free image optimisation tools. With tons of possibilities to compress images for your site, this online tool works excellent for JPEG and PNG image files.

It allows you to upload up to 20 images in one go and 100 images a month. The image size for each image cannot exceed 5 MB, but it won’t be an issue for most. After the compression, you can download the compressed images to your computer or easily save them to Dropbox.

Tiny PNG also offers a WordPress plugin and Magento extension, so that you don’t have to go to navigate away from your website to compress your images.

10) Compressor.io

Compressor.io makes sure that you don’t lose the image quality while also achieving the high compression levels.

It’s a fantastic tool known for its flexibility to optimise JPEG, PNG, GIF and SVG files easily. Compressor.io can reduce file sizes up to 90% or more!

Once again, Compressor.io’s downfall comes in its upload restrictions. You can’t use Compressor.io to optimise more than one image file at a time.

Conclusion

Don’t underestimate the importance of the size and quality of the images you upload to your site. Low-quality images on your website can dramatically devalue your website design, brand and services or cause your site to load so slowly that users don’t even make it to the page they were looking for in the first place.

When it comes to your images, taking the extra time to get it right, will help you achieve a professional finish in the long run and a website that effectively converts users into customers.