Optimizing Images for the Web

[vc_row][vc_column][vc_custom_heading text=”Are your Images Optimized for the Web?” font_container=”tag:h1|text_align:center”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]“Optimizing” images before uploading to the web is something that shouldn’t be overlooked, as it can have a dramatic impact on how long it takes for your webpages to fully load for your site visitors.

The purpose of “optimizing” is to reduce the overall file size of images without sacrificing image appearance quality.

Some Background….

Image file size is determined by the actual length and width of the image multiplied by the number of “pixels” in the image.

Pixels are basically just tiny little dots of color that make up the final image as it’s rendered.

It stands to reason then that the larger (in dimension) the image is, the more “Pixels” it will hold, and the large the overall file size will end up being.

File “sizes” are measured from smallest to largest in KB’s (kilo-bytes) MB’s (mega-bytes) and GB’s (giga-bytes). An image file measuring 1 MB will be roughly 1,000 times bigger than 1 KB, and a GB will be 1000 times larger than a MB.

It is generally agreed that maximum size for images to be published online is not more than 200 KB.

Many of the images that are being uploaded to the web today, are images that are taken with a smart phone, and then are just uploaded without ever thinking about file sizes.

Consider the “average” size of a photo stored on a smart phone today can range anywhere from 2MB to 4MB!

This hold true regardless of the “source” of the images (camera, stock photos, etc.) you are using for your online images.

So what’s the solution?

First things first, reduce the overall image size to be appropriate for where it’s being used.

If you have an image that will stretch across the entire width of a webpage, limit it to a maximum 2000 pixel width. If you are using a small image within the text of an article a 2000 pixel width would be totally unnecessary and a waste of “image pixels,” so limit it proportionately.

Depending on the platform where your website is developed (WordPress, Wix, etc) in many cases the “resizing” of images will be done automatically for you.

However it’s a good practice to start with an image that that has been optimized first for dimensions and compression before it ever gets uploaded to your website.

Compressing an image basically “squeezes” the pixels closer together and eliminates unnecessary space and can reduce the overall image size by as much as 80%!

There are a number of free and paid tools online that will accomplish these types of image optimizations.

One of our favorites is a free one developed by Google called “Squoosh.”

You can access it from any web browser by entering (https://squoosh.app) in the search bar.

It is an easy to use tool that features a simple “drag and drop” or “select an image” function to get your image loaded into the tool from your computer.

Once you have uploaded your image, it will appear with a blue vertical line thru the center of it.

This reflects a “before and after” visual of the image that will reflect the adjustments as you make them.

Optionally using the “Resize” button and changing the dimensions will change the file size, along with the percent of change.

Sliding the “Quality” bar right and left will increase or decrease the overall image quality. Generally, 60-75% is where you need to be.

You can experiment with these settings until you are happy with the displayed results.

Depending upon your final settings, you can expect to see an image that started out at 2MB in size, reduced to about 200KB or less.

Click the blue download button and save your new optimized image to your computer.

(As a side note, best practices would include using the “save as” function, and renaming it to include “opt” in your new file name.  It will make it easy to locate before uploading it to your website.)

After you have optimized images, make sure you have updated your Free Listing on Ourcupboard.com!

[/vc_column_text][/vc_column][/vc_row]

We will be happy to hear your thoughts

      Leave a reply

      OurCupboard
      Logo
      Register New Account
      Reset Password