Are you new to image optimization? We have prepared a few tips on how you can get started!

 

You might ask:

“Why would I optimise images before uploading them on to the website,

they are already good as they are, so what is the extra hustle for?”

-Well, they are not good for your website and let me explain why.

 

They say – “Size doesn’t matter”, well it does. Especially when it comes to images.

Many people don’t realise how negatively, big and unedited images can affect the website loading speeds. Usually, the size factor of the images is not taken into consideration. While uploading new content on to the website, we naturally choose images with the best quality. But it’s not the best practise.

 

Don’t lose your visitors

Most of the people don’t like to wait for the website to load up. You are probably one of them. Well, I am for sure!

At the beginning of this year, Google released as a result of the research where they stated:

“The average time it takes to fully load the average mobile landing page is 22 seconds. However, research also indicates 53% of people will leave a mobile page if it takes longer than 3 seconds to load.”

This study clearly shows that if the website is not optimised, there is a big chance that a visitor might lose an interest while waiting for your website to load and go somewhere else to find similar information, product or service. That is why it is so important to use the image optimization techniques.

To demonstrate it on the graph:

average bytes per page

 

The right approach

We don’t want that to happen, that’s why at SlickBears, we advise our customers on what is the best for their needs. Sometimes it might be hard to compromise when it comes to the size of the images, but it doesn’t always mean that the images will lack the quality. Unless your website is a gallery, where you showcase your best pictures in 4k, it’s better to resize most of the images, to fit their purpose.

Remember: do not upload a large image and change its dimensions via the CSS (source code)! The images size will not change, so the page will load longer. Try to avoid it.

 

So, what is Image Optimization

The image optimization is a technique where a user simply changes the size of the picture. High-quality images are resized to fit their purpose. The format, dimension, resolution and size are changed to achieve the best results (keep the good quality of the picture) and reduce the file size to as small as possible.

 

Hardware limitations

Of course, we must mention that even the greatest, the best tailored and optimised website, hosted on the fastest server will not load in less than a second on an old device with slow internet connection. So always keep in mind – who is your targeted audience and what hardware and software do they use.

 

Useful tip

Before we begin, you can check the size of the image that you are working on, simply:

PC – Right click on the image and select Properties > Details.

Mac – Press Ctrl + click and select Get Info

 

File types

The most “web appropriate” file extensions are: .jpg, .gif and .png formats.

There are many other formats such as TIFF, BMP, and a few more, but the most common ones (and the best for you) are highlighted above.

Photo editing software can save your image in any format. So, let’s have a look at which one will suit you best.

JPEG

(.jpeg or .jpg file extensions) is frequently used as a method of compressing images for not only a web purpose. The compression method is called “lossy compression”, it is because some of the compressed data is lost and cannot be restored what can affect image quality. It doesn’t support transparency. It is, and old technique presented in 1992 but was improved over the years and is still used because of its effectiveness. JPEGs are saved as relatively small files with a decent quality of the image.

GIF

(Graphics Interchange Format) is only capable of displaying images with up to 256 colours, but it supports animations – and that’s what it is usually used for. Just like the JPEG, it doesn’t support transparency. The overall quality of the picture is not as good as JPEG or PNG.

PNG

(Portable Network Graphics) was created for the internet purposes. It supports lossless data compression, so all of the original image data remains unchanged.  Also, it allows saving graphics with alpha channel (transparency) that are commonly used on websites. PNG files are commonly used, but the file size is slightly larger than JPEG.

To summarise:
  • JPEGs are great for small and big images. They allow the images to have relatively small size compared to its quality. (One of the best options for your use).
  • GIFs can be used for animations or thumbnails. We wouldn’t recommend them for other purposes.
  • PNGs have good file sizes, they support transparency and are a good alternative to JPEGs or GIFs.

 

File size

When it comes to images for the website, usually the smaller the better. Most of the modern photo/image editors such as Adobe Photoshop, GIMP or web-based Canva, give users options to compress images to save a few more kilobytes.

Photo Editor software

Not everybody needs or can afford Adobe Photoshop package. There are other alternative products on the market that can be used to optimise your images.

We would like to demonstrate our top 3 best Photo Editor Software:

  1. GIMP

In my opinion, the best FREE open source photo editor that offers a range of options and tools that potential user can think of. It is very similar to Adobe Photoshop and it can be used for domestic as well as professional use. There are tons of videos, tutorials and guides about how to use the program or how to achieve the desired effect.

  1. Canva

The second one on our list is Canva. Great online based tool to create and edit graphics. Built-in features allow users to quickly design or edit their images. Easy to use and also FREE (to some extent).

  1. Autodesk Pixlr

And last but not least Pixlr. Another fantastic way of editing pictures online. Pixlr can be operated from the web browser or can be downloaded as an app on your mobile device. It is easy to use and FREE (basic version) however, it is not as advanced as other photo editors.

 

Use appropriate name for your images and use alt attributes

It might sound silly, but a relevant description of your pictures is important for a good ranking in the Google’s organic search.

If for some reason the browser can’t load the picture, the alt attribute will be used to describe what kind of the content should be displayed in this place.

It also helps for your website accessibility or for the text reading software.

Another great feature is that the correct alt attributes can positively affect the SEO and increase the ranking of your website. It all comes under image optimization techniques. Hopefully you are not surprised by now.

Always remember to:

  • Use plain language
  • Describe the image accurately
  • Don’t use too many keywords
  • Check your images by hovering over them or viewing the source code to make sure that all of them contain alt attributes

The good practice

There are a few tricks that can be applied to load your webpage faster and keep a good quality of images.

The loading time of the website relies on a few factors:

  • Large image file sizes
  • Slow internet connection
  • Poor web hosting provider
  • Outdated browsers/apps and plugins
  • Slow hardware

To speed up the loading time of your website always remember to:

  • Use correct file types (JPGs. PNGs)
  • Use web fonts rather than images with text on them
  • Try out different settings for each format to suit your needs
  • Remove images that are not optimized yet
  • If possible save your images as “optimized for web” (depending on photo editor software)
  • Save your images in the appropriate dimensions – to reduce scaling them by CSS
  • Use CSS to help you with effects
  • Always add an alt attribute to your images
  • You should remember by now to always use all of the image optimization techniques mentioned in this article

 

If you have got any questions, please contact me at tom@slickbears.co.uk

 

Did you like the content? Share This!

Share this post with your friends!