Size Matters….for Web Graphics

How many times have you rushed to the internet to look up something and found yourself waiting for some photos or graphics to load on the page you’re viewing.  What’s that all about?  File size.

When you want to add an image to your website it’s helpful to know what your options are and what kind of a difference it can make for your site’s visitors.

Images for a website can be uploaded in four formats:  jpg, png-8, gif and png-24

If you have a photo or graphic with a lot of color and detail you’ll want to save it as either a jpg or a 24 big png.  These two formats have the largest color palette.  On the other hand if you’re uploading an image with few colors, like a logo or a flat illustration you’ll find that using an 8-bit png or a gif will give you the smallest file size.

As an example this photo is 450 pixels wide and 267 pixels high.

In its original format as a jpg the file size is 352kb

The same image optimized for web at 60% and still uploaded as a jpg is only 43.17kb making it 12% of the original file size.  This makes a big difference in the amount of time it takes for the image to load to your site visitor’s device and when you’re using mobile the smaller files use less of your data plan.  Just as a comparison here are the file sizes with the same image saved in other formats:

On a smaller image such as this one the difference in image quality is hardly noticeable –but many of today’s web designs have larger images that cover the entire screen.   In those type situations it’s even more important to be sure your file is optimized for web viewing to insure your site visitor has a clear, non-pixelated image but one that will also load quickly on whatever device they are using.

There are different software options that you can use to create and save graphics for web use.  We use Photoshop which has a “Save for Web” option and gives you a simple window to view your image in as you work your way through the options to choose which is best for your particular application.  The full version of Photoshop may be a bit more of an expense than is practical for many clients editing their sites.  You can also use Photoshop Elements which offers many of the same features or try a freeware option such as Faststone.