Optimizing Images for A Website

Optimizing Images for A Website

(Last Updated On: 15th February 2019)

Using and Optimizing images for a website for the Modern Marketer

Optimizing images for a website is essential to any online business when hoping to increase potential buyers with an engaging visual display.

But Image optimization will also have a great bearing on website load time, a big ranking factor in search engines.

Optimised images will allow the marketer to present products and services effectively while keeping their website loading times to a minimum.

Have you ever wondered why certain product images on your site are not displayed in the search results?

Or wondered what the differences are between PNG’s, GIF’s and JPEG’s?

It all boils down to the details of image optimization and how they contribute to or detract from your online marketing efforts.

This following article will contain some valuable pointers on optimizing your images for optimal efficacy:

1. Image dimensions and product angles

Your potential customers will make their decisions about your products or services based largely on the quality of images they find on your site.

Lighting, multiple-angle shots and quality images will go far in making a good impression with your audience.

Of course, all this will do no good if your image is not loaded properly or can’t fit the dimensions of the web page on which it is displayed.

Make sure your images have been properly sized and suited to the website so your clients can enjoy them across all devices  platforms, and browsers, especially mobile devices

2. Reducing The size of your Images

Speed is the name of the game in the online markets and an image that takes longer than a couple seconds to load will not be tolerated by the fastidious online consumer.

A recent statistic for a large online business showed that for each second a page takes to load, that business stands to lose $1.6 billion each year.

So if your image is taking a long time to load, you need to consider the customers you are shooing away with prolonged loading times.

So, what can you do to reduce this time?

Smaller images take less time to load and this reduction can shave valuable milliseconds off your overall page loading time.

Images can be resized easily using a number of image compression/resizing tools.

Photoshop is a very popular choice.  By using the “Save for Web” command you will have an image that is small in size but satisfactory quality for online use.

Other Image Optimisation Tools

There are plenty of other tools that can be used if you don’t want to subscribe to Photoshop software.

TinyPNG which is a plugin that can be used with WordPress and supports the compression of image files ( .jpeg and .png).

Contrary to its name, it can upload massive image files from 5 to 20 MB with a simple drag and drop action.

It also provides the option to make lossless compression, which maintains the quality of the image, and lossy compression, which can compress images considerably but bear in mind it will also reduce the quality of the image.

Resize Photos is a free to use tool for compressing images and provides a variety of file saving sizes.

Kraken is a WordPress plugin and was among the first tools for compressing and resizing images.

WP Smush is another WordPress plugin that does a very good job of optimising images at source.

3. Choose the Right Type of Image File

file_type_comparison

The most common types of images uploaded online are PNGs, JPEGs, and GIFs.

JPEG is the go-to format when using digital images from a camera.

The file size is somewhat smaller in the eventual outcome.

JPEG is a lossy format that will give you a higher compression rate than that of a PNG. for quality and has become the gold standard for online images as it can be compressed easily without loss to quality.

Because GIF  compresses images to a maximum 8-bit color depth, it should not be used if you are looking for high-quality photographs.

GIF  can be used where transparency is needed on an image and can also be used to store simple animated images.

GIF is of a lower quality version of the JPEG. and therefore is used for decorations, icons, and animations.

PNG is a lossless compression type. It is high quality

PNGs are becoming more and more popular because they can contain a greater color spectrum than GIFs and can suitably replace both GIFs and JPEGs.  PNG format is also used for transparency.

You will want to select the format that best suits your image and site requirements

4. Handle Thumbnails in right manner

Image reduction

 

Image reduction

 

Thumbnails are smaller versions of Images you may use on your website and make scanning over menus, inventory, and products at a glance easy and time efficient.

They can also add attraction to your page/post to make a site full and aesthetically pleasing.

Using thumbnails as a prelude to your product can be a crucial moment in the purchasing process, so make them relevant and attractive.

Never forget how important loading time is to make a good impression on customers and encouraging them to return again and again.

So your thumbnails should have the same attention in optimisation as any other image.

Alt Text

Search engines do not read images, therefore it is paramount that your all your images have an explanation.

Alt Text is displayed in place of the image in browsers where an image file has not been loaded or if the user has chosen not to view images.

In some cases where your content is read by screen readers for the visually impaired, Alt text will explain the content of the image.

It will also provide a description of the images which can be read by search engines and determine the content of the image.

This is where Alt Text becomes important. If you can use your keyword in the text all well and good but either way make your text relevant to the image.

5. Avoid Decorative Images

Decorative images are images that are not directly related to the product being sold on the site.

A website will usually have a large variety of images which will include backgrounds, borders, and buttons.

While these images do add a measure of artistic appeal, they can also contribute to the overall loading time of the pages.

Be sure to closely observe the amounts of decorative content added to keep the loading times to an absolute minimum.

You can also use GIF or PNG files to further reduce loading times.

6. Compress Image

Compression is the best way to optimize images for web use.

Compression decreases the size of the image and also removes much of the information that the naked eye is not able to see.
You can compress images in two forms:

Lossless  Creates digital files without losing quality and can be reversed to original uncompressed status.

Lossy Creates digital files by removing some of the data, leading to loss of quality. This compression cannot be reversed.

7. Progressive Loading

Progressive loading is another option for galleries and pages with multiple images.

What this does is postpone the loading of an image until it is actually be needed.

There are many plugins and websites can apply this to your media file.

Final Verdict:

In the end, it comes down to the professionalism of your website and the impression you hope to make with your target audience.

If you are looking to come across as an authoritative site with professional business ethics, the images you choose and the way they are presented will go a long way.

Kick the 9-5 Habit

Enjoy and remember if you have any comments or questions about my page please free to leave your contribution in the comment box below.

Thank you

Print Friendly, PDF & Email
>

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close