OPTIMIZE – Holly Foster Media

OPTIMIZE

“When we talk about how to ‘optimize’ images for the web, you can think about this in three ways:

1) making images look good,
2) making images load quickly, and
3) making images easy for search engines to index.”

(Maggie, 2019)

So how do you accomplish all three?


Start with a great photo

Choose an image that is clear and well-focused.

This is a photo of the Petronas Twin Towers in Kuala Lumpur, Malaysia. The file type is JPEG — it’s the format produced when you take a picture with your digital camera or cell phone.

The dimensions of the photo are 900 pixels by 1200 pixels. The file size equals 947KB.

“KB” stands for kilobyte, which is a unit of measurement. It’s the number of computer bytes required to store a file.

Make adjustments

Our goal is to produce the smallest file size while maintaining an acceptable image size and quality.

A straightforward way to reduce file size is to change the dimensions. You can do that by:

  • cropping the image, and/or
  • adjusting the height and width proportionally.

In my case, I didn’t want to change the dimensions — so I left the image as is. We can still optimize the image, however, by adjusting the quality.

You can usually reduce the quality to somewhere between 60 and 80 percent and still have an acceptable looking photo. If you have Photoshop, you can use the Save for Web process to make your adjustments.

I used the settings to decrease the quality to: 80% or very high, 60% or high, and 40%, which is considered medium quality.

For this particular photograph, it’s really hard to see any difference, but the file sizes are dramatically different. Click on any image below to view the full size gallery.

If you don’t have Photoshop you can use a free web app called Optimizilla. Using their default settings, the image was compressed to 274KB.

Remove the metadata

Image metadata includes details relevant to the image itself as well as information about its production. Some metadata is generated automatically by the device capturing the image. Additional metadata may be added manually and edited through dedicated software or general image editing software such as GIMP or Adobe Photoshop” (Rouse, n.d.).

Next I used ImageOptim to remove the metadata from my images. As you can see, the reduction was small but every little bit helps when it comes to quick download time.

Don’t forget the alt text

Alt stands for alternative text, and a lot of people forget to include it with their images. Alternative text is important because:

  • it enables visually impaired web visitors to enjoy your site.
  • it provides a description if your image can’t load.
  • it helps with image search engine optimization (SEO).

“While search engine image recognition technology has vastly improved over the years, search crawlers still can’t ‘see’ the images on a website page like we can, so it’s not wise to leave the interpretation solely in their hands. If they don’t understand, or get it wrong, it’s possible you could either rank for unintended keywords or miss out on ranking altogether.”

(Alt Text for Images | 2019 SEO Best Practices, n.d.)

Faster load time

Uploading large images to your website can cause your visitor to experience long lag times. If you’re like me, it’s maddening to arrive at a site and have to wait for it to load. If it takes too long, you’ll probably jump ship and find a similar site that loads quickly.

“According to Kissmetrics, 47 percent of visitors expect a website to load in less than 2 seconds, and 40 percent of visitors will leave the website if the loading process takes more than 3 seconds.”

(Oberoi, 2014)

Optimization = Success

To review:

  • Start with a great image.
  • Adjust the image dimensions (if you can).
  • Reduce the quality as low as you can while maintaining an acceptable image.
  • Remove any unnecessary metadata.
  • Don’t forget to add the alternative text.

The extra steps required to reduce your images are worth the time. Great images and quick load time will ensure that you can deliver the message you worked hard to produce.

until nxt time …

References

Alt Text for Images | 2019 SEO Best Practices. (n.d.). Retrieved from: https://moz.com/learn/seo/alt-text

JPEG (Joint Photographic Experts Group) Definition. (n.d.). Retrieved from: https://techterms.com/definition/jpeg

Kilobyte Definition. (n.d.). Retrieved from: https://techterms.com/definition/kilobyte

Maggie. (2019, February 21). How to optimize images for better web design & SEO | Jimdo. Retrieved from: https://www.jimdo.com/blog/optimize-website-images-for-better-design-seo/

Oberoi, A. (2014, March 20). 5 reasons visitors leave your website. Retrieved from https://www.websitemagazine.com/blog/5-reasons-visitors-leave-your-website

Rouse, M. (n.d.). What is image metadata? – Definition from WhatIs.com. Retrieved from: https://whatis.techtarget.com/definition/image-metadata

The Importance of Images in Web Design. (2010, August 9). Retrieved from: http://www.thoughtmechanics.com/the-importance-of-images-in-web-design/

Written by

0 thoughts on “OPTIMIZE

Leave a Reply

Your email address will not be published. Required fields are marked *