This tutorials spells out the steps we took to improve the speed of our website, todhost.com. In the end, the site loading speed is now 1.3s

Article source: https://www.todhost.com/blog/image-optimization-for-the-web.html

Image Optimization for the Web

Optimizing images for a website has become very important to speed up the webpage. Fortunately, there are lots of tools that can further help you reduce the size of your images and help improve the speed of your website. Google has made it clear that speed is a ranking factor and should be taken very seriously.

Google notes that images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space. Google dislikes slow loading websites. Image optimization is therefore very important especially as the speed of a website is now considered to be a ranking index in Google Search Results. In this article, we examine how to optimize images for the web. Before we look at our core objective, let us consider why it is important to optimize the images you use on your website.

Also read: How to create an animated GIF image

Why is website speed important?

Improve Your Load Time: Web images constitute part of the downloaded content when web pages are opened. Even for cached content, images still account for part of the content downloaded. If a website has lots of images, it simply means that more time will be taken to download the page. This is more difficult when the image is not optimized to load faster. So to improve the speed of your website, you need work on your images to make them light for use on a website.
Search Engines Love Optimized Images: When you load an image, you can easily understand the meaning from your visual look. But search engine bots do not. The get to know how to categorize images from the name and alternate texts used in the image description. To get your image to appear in the search engines with the proper name and categorization, you need to optimize them. Again, in doing this, you should be mindful about the filename and like mentioned above, the alternate text also. These are the areas from which search engine bots will be able to understand your image. You will have to avoid the default image name that came after the camera shot the image because that will not be easy for search engines to interpret. You will have to change the name to something readable for the search engines.
Users Love Fast Websites: This is important not only to keep users on your websites but also helps with Google ranking. Google algorithm changes has recently shown that the search engine giant is becoming more interested in user behavior and will reward websites that are more user friendly with higher rankings. One way Google assess user friendliness is to look at the speed of the website. Presumably, Google knows that users will love websites that are fast more than websites that are slow.
Speed Helps Conversion: Speed Directly Correlates With Conversions: Studies have shown the serious impact that a website speed can have on sales conversions. For example, BrandPerfect reports that, after surveying 2500 online shoppers from the UK and USA, that two-thirds of respondents (67%) from the UK and more than half (51%) from the USA stated that a slow website is the main reason for abandoning a purchase that they were going to make. Similarly, Mozilla found that reducing their loading time by 2.2 seconds they could increase conversions by over 15% , leading to an additional 10 million downloads over one year.

IFrame

Image Optimization Tools

JPEGMini

JPEGMini elps reduce your image by up to 6 times the original size while not reducing the image uality. JPEGMini is available for Mac OS X and Windows as a desktop app, available as a free (limited) or a paid version.

To use JPEGMini, simply choose or drag folders to the app for it to optimize each image automatically. It also offers a server package, which enables you to lower your storage and bandwidth costs by reducing the load time of image-intensive web-pages.

Shrink O'Matic

Shrink O'Matic is a free application and can resize your images automatically. It is an Adobe AIR application and works by way of batching and resizing images. It handles JPGs, GIFs and PNGs. Just drag and drop images into the app and they will be resized. You can customize the settings and choose the output sizes, rotation, name, location, format and watermark.

Smush.it

Smush it is a relatively popular tool for optimizing images. It wors as an online service from the Yahoo! Developer Network and uses lossless compression techniques, so the file size is reduced without changing the look or visual quality of the image. Give it a try and you will be impressed about the functionality of this tool.

Smush it supportsJPEG, GIF and PNG files with maximum sizes of 1MB. The optimized results are available for download from a temporary URL, which is valid for up to 30 minutes afterwards.

Image Optimizer

Image Optimizer is great tool for resizing images for the web and truly will optimize your images. Both the free and paid upgrade version are good and are none is functionally advantageous over the other except that the paid version will not include a promo text which appears on the free version.

Image Optimizer is very simple to use and allows you to choose your optimization quality, maximum width and maximum height. It also allows you to compress images in bulk and view the progress of the optimization.

CompressNow

CompressionNow is also a free image optimization service available online. It will help you upload images from your computer, choose a compression percentage and download the optimized image. It supports GIF, JPG and PNG formats. CompressionNow allow you to load up to 10 images and download the optimized format. The maximum individual file size allowed to be uploaded is 3MB.

Shrink Pictures

With Shrink Pictures, you are able to resize pictures, optimized them by choosing the level of compression to apply on your image. Shrink Pictures supports JPG, GIF and PNG. You can select the maximum image dimension, apply special effects, and download the optimized images.

ImageOptim

ImageOptim is free image optimization toll and is great in so many ways. It will find the best parameters for compression and remove unnecessary comments and color profiles, It is used to optimize PNG, JPEG, and GIF formats.


JPEG Optimizer

JPEG Optimizer is easy to use, free online tool to that will help resize and compress your photos and images.

JPEG Reducer

JPEG Reducer, as the name goes will shrink your image the size to make them load faster. To use JPEG Reduces, you will simply upload your image or enter its URL and press "Reduce It." You can then view the compressed images and thumbnails, and right-click the image to save it.

Tips for Saving and Optimizing Your Web Images

Image file formats: The rules and preferences vary but generally, the most widely used are the JPEG, PNG and GIF image file formats.

Here we provide a basic guide to saving images for the web.

Make sure you have saved a copy of the image as a lossless version, meaning that you can come back and edit it again later if needed. For example, .raw, .tiff, .png, .psd file formats to name a few.

If it is a photograph, then select .jpg file format to save the final image. Remember to test several quality and compression settings until you get the perfect balance between quality and load times. If your image editing tool allows the "progressive" setting use that as it will allow the image to "blur" or display gradually as it is rendered on the web instead of line by line. The load time is not improved with the progressive setting, however it does give the image a softer look and feel when rendering on screen. If your editing enables "save for the web" then use this as it will make your image a bit lighter.

Read also: A Guide to Website Optimization for Mobile Devices

If your .jpg image is to be used as a background on the web document then use the Medium or Low compression setting. Otherwise for displayed images keep the compression at High.

If you have the option to adjust the image "quality" then use the settings to make the appropriate change; again, remember to strike a balance between acceptable quality and suitable file size.

Read also: Boosting Your Website SEO with Google Analytics

File sizes: Depending on the use of the image follow these guidelines for optimal file size:

For background images try to keep the file size around or below10KB.
For banners or header images a file size up to 60KB is acceptable.
For high end photographs try to keep them to within 100KB at an absolute maximum.

Final Words

You will by now have understood the critical role of image optimization on your website performance both in terms of search engine ranking, pleasurable user experience and conversions. These are real benefits that cannot be sacrificed for the time it taes to achieve the optimization of your website images. Image optimization for some websites, like news websites, can be very time consuming but it is definitely worth it.

Credit: https://www.todhost.com/blog/image-optimization-for-the-web.html