Improve Your Website By Optimizing Its Images

Improve Your Website By Optimizing Its Images

We as website owners, all love images that provide splashes of color and in-depth detail of the visual we are trying to present to our audience.  Unfortunately, these images can do more harm than good if not appropriately optimized.  You may have heard of the term “image optimization.” In this post, I’m going to explain what image optimization is, how the process works, why it is important and what tools you can use to optimize your images.

What Is Image Optimization?

Image optimization is the process of reducing an image’s file size while keeping its visual quality, saving the image in a web-friendly format, and removing trivial metadata. The metadata is fundamentally the information entered into an image’s file by either the user or by cameras and scanners (EXIF data). This data can add unnecessary bulk to the picture causing it to load slowly on the site. In addition to the components I mentioned above, proper image optimization requires using the right name for the image, and including an alt tag for it.

How Does It Work?

There are various components you can manipulate to make your images optimized.  The first is saving images in a web-friendly format.  I’m sure you’ve heard or have seen pictures ending with .jpeg, .gif, or .png.  These formats compress and standardize images to work on a variety of programs and applications.

Using The Proper Image Format

The JPEG format makes pictures smaller while allowing the image to display over 16 million colors.  JPEG uses the lossy compression. It delivers the smallest file size of all the other formats.  However, lossy compression affects the quality of the image.  Over time the picture’s quality denigrates each time the user saves the image.  Nevertheless, the JPEG format is the preferred format for photographs.

Next, is the GIF format.  It only allows for the display of 256 colors and uses lossless compression.  Lossless compression reduces the file size without affecting the quality of the image. The disadvantage of using this format is the file size stays relatively large after compression. Also, due to the use of a 256 color palette to render the picture, the color quality is limited. This format is best for icons, and web graphics/animations.

In addition to the JPEG and GIF formats, there is the PNG format.  PNG’s is a format that has properties similar to both JPEG and GIF.  However, the file size is more prominent because it uses the lossless method of compression. An advantage of using this format just like the gif format, you don’t lose quality each time the picture is compressed.  PNG’s are suitable for transparency usage (logos) or when the need for a faded image occurs.

Properly Naming The Image

The next component of making your images optimized is giving them a name that describes what the picture is conveying. For example, take a look at the image below:

three-white-flamingos-in-the-water

I could name it flamingos.jpg., however, it doesn’t give a descriptive name.  You may be thinking. Why do I need a descriptive name?  A descriptive name helps your images gain better indexing with search engines.   The proper way to name this image would look like this: three-white-flamingos-in-the-water-2018.  You can also use this name for the alt tag.  An alt tag utilized by screen readers, browsers used by the vision-impaired individuals to convey what the image is.  Since search engines can not see pictures, it utilizes the alt tag to index the site’s images.

Why Is It Important?

Image optimization is essential to the growth of traffic to your website for various reasons.  First, large images can slow your site speed.  If your site loads slowly, visitors may not stick around or return after the initial visit to the site.  Also, slow websites do not rank well with search engines causing your site to be hiding from your target audience when they search for what you may offer.

Optimization Tools For Your Images:

There are a lot of image optimization tools available to help you compress images for the modern web.  I’ve selected a few tools you can use online, desktop or via a plugin (WordPress).

Online

01. Kraken.io

Kraken is a free optimizer that compresses images up to 1 MB.  If you need optimization for bigger file size, you can sign up for their pro version.  The free version uses the lossy compression and if you have any issues their customer support is available seven days a week.

screenshot-kraken.io-2018.06.19-12-28-11

02. Optimizilla

Optimizilla uses the lossy compression algorithm to reduce JPEG and PNG images to the smallest possible size while maintaining the quality at a set level. You can upload 20 pictures at one time for compression.

screenshot-imagecompressor.com-2018.06.19-12-30-49

03. PNG to JPG

Converts PNG images to JPEG images by applying compression methods suitable for the process. You can convert up to 20 .png pictures at one time, and the maximum file size is 50 MB.

04. Imagify

Imagify is excellent because you can either optimize your images or your pages.  The image and page optimizer, you tell it the level of the compression you would like.  Besides, the file size upload limit is 2 MB, and the optimized pictures are available to download for 24 hours.

screenshot-imagify.io-2018.06.19-12-37-28

Desktop

Mac

01. ImageOptim

ImageOptim is a great free image compressor to use on Mac when you don’t want to upload images to a Web application.  ImageOptim works with JPEG, SVG, GIF, and PNG.

screenshot-imageoptim.com-2018.06.19-12-40-5

 

Windows

01. Riot

Riot is a free image optimizer that allows you to tweak the compression parameters.  The program gives you a preview of the optimized picture before settling on the compression parameters.  Also, you have the power to control the number of colors, the metadata settings, and the image format (JPEG, GIF, or PNG) outputted.

riot-image-optimizer-2018.06.12

 

WordPress Plugins

01. ShortPixel

ShortPixel uses both lossy and lossless optimization.  The formats supported are JPG, GIF, PNG, PDF, and WebP.  Also, this plugin does batch image optimization (you get 100 images a month for free, which is great for websites not image driven), and the option to save the original image is available for later.

wordpress-shortpixel-image-optimizer-plugin

 

02. WP Smush

WP Smush is considered the number one WordPress image optimization plugin.  It offers a crisp image resizing feature where you can set the max height and width for the picture.  WP Smush also works with some media library plugins to optimize images to make your site run faster.

wordpress-wpsmush-image-optimization-2018

03. EWWW Image Optimizer

EWWW Image Optimizer offers automatic resizing, unlimited file size, all images whether they are used in a slider to a blog post gets optimized to the best size possible.

wordpress-ewwwimageoptimizer-image-optimization

 

Summary

Image optimization is a critical aspect of growing and maintaining a target audience via your website.   Images by nature are large files.  Every time your site is displayed, those pictures are as well. These images will cause your website to load slowly.   As a consequence, you can lose visitors who don’t like their experience on your site.  Also, your website will not rank high with search engines, therefore causing you to miss out on reaching more people in your target audience.  If you have any questions or need help in optimizing your website, feel free leave a comment below or contact me.