Resources.

Image Optimization

What is Image Optimization?

We often know when images are not correctly optimized for websites.  You see this when you visit a webpage and it takes more than few seconds for the images and pictures to load.  Then when they do load, they start causing the text you are already reading to shift to new places.  Or perhaps the images load quickly, but you can tell that they are pixilated, distorted, or otherwise “not right”.  These are just a few examples of when images have not been optimized, and it is important to address such issues.

What to Consider

When selecting images for websites, it is important to use the correct file types, file sizes, and file dimensions. PNG and JPG file types have different attributes, and it is important to know when to use which.  Furthermore, it is important that the total file sizes of the images be manageable.  It is not uncommon to run analytics on websites and find that half, or more, of the total load process is dedicated to loading images, which is not good.  It is not advisable to simply upload camera pictures or generic stock photos to a website without first compressing them.  Otherwise the result is the slow load times discussed above. In addition, if the individual viewing the site is on a mobile device over 3G/4G data, they will be shocked (and irritated) to see how much data they used visiting the non-optimized website.

Be careful, however, when reducing the overall file size that you don’t reduce the image quality to a level where it becomes pixilated or otherwise not sharp.  This is a common mistake for inexperienced development teams and can deter website visitors.

 

Height and Width

In addition to file size, different areas of websites require different file dimensions.  There is not a “one size fits all” dimension.  When images of incorrect dimensions are used, the resulting presentation can be skewed and awkward appearing.  As time goes on, people expect to see higher quality websites, and distorted images and issues therein can quickly deter individuals from your page.

 

Other Considerations?

There are other aspects of images that need to be worked when adding them to a website.  While the image’s “title”, “alt text”, and other attributes don’t have to be completed when uploading them, doing so can help with search engine optimization and assist with other build considerations.

Finally, don’t forget to optimize image thumbnails on your website.

These are just a few image optimization concepts to keep in mind when developing a website, and therefore it is important to work with a team experienced in these matters.  Click here to contact us today to see how we can help you tell your unique story online.

(Bonus reading: If you want to deep dive into image optimization, check out this article from Google.  Be warned, it isn’t “lite” reading).