BLOG

Why You Should Optimize Images for the Web

Posted by Brian Hegvold on March 12, 2015

image_optimization

Everyone's been there...and then left. Been where? You know, that website that is soooooo slow. We've all attempted to visit a website that just seems like it takes forever to load!

You literally have 2 seconds to get a website to load without the visitor considering bouncing off to somewhere else.[1] Mobile users are more likely to give you a 6-10 second grace period before they head somewhere else. That means your website better load fast or you could be losing countless website leads and sales.

Website Load Time Affects More Than Visitors

Slow website loading time not only impacts the viewing experience, but your website speed is a metric monitored as part of your ranking in the search engines.[2] 

Slow website loading time can be caused by several factors including the hosting server’s response time and the visitor’s internet or mobile connection speed. These are often beyond your immediate control. But there is one element of your site that you can definitely control to help speed up your website’s load time, and that's images. Google is actually looking to see if you’ve chosen the right types of files for use on the web so that your site will load as fast as possible.

Why Optimizing Web Images Matters

How do you know where to meet in the middle so that Google won’t knock down your SEO ranking and visitors will actually get to see your site with some awesome pictures?

When you click a link to visit a website, the server calls all of the files for the site to load on your screen. Depending on your site, the images could account for the majority of the data that needs to be loaded. That is why it is always important to optimize images for the web. The smaller the file sizes of the images, the faster a website is likely to appear.

That's where image optimization comes into play. Knowing the right file formats and how different formats handle different types of images can help you understand when and where to use the right type to speed up your website’s load time but still give you good quality images.

You also need to be sure your web images look good on high resolution (aka: retina) screens including phones, tablets and now even some laptops. But it’s possible to do this without causing a server meltdown trying to load your home page.

Which File Type to Use for Web Images

These days, there are two main file formats that are most commonly used for images on the internet. Yes, there are .gif files too, but for creating great images for your website, gifs aren’t recommended now that we have PNGs. (Unless you’re animating a dancing emoticon. Then by all means use an animated GIF!)

JPEGs

.JPEG, sometimes seen as .jpg, files are the most common format used by digital cameras and other photographic image capture devices. This file type is best used for images that could include millions of colors.

When optimizing a jpeg, you want to be sure the quality isn’t so low that you get artifact leftovers in the image that make it look poor quality.

JPG_Comparison

PNGs

The Portable Network Graphics (PNGs) format is best used when you’re saving a graphic that has limited colors. Logos and icons are good examples of images on a website that would use the .png file format. Simple graphics with a few colors can be saved as .png files to create high quality images with low file sizes, perfect for use on a website. In fact, the .png formats only purpose should be for use on the internet. The file sizes are so small that typically trying to use a .png image in any print project would produce very low quality, pixelated results.

PNGs are also used when you are trying to create an image with a transparent background. No more white boxes around an image!

PNG_Comparison

The rule of thumb for using PNGs is if it’s a graphic with limited colors or you need to make the image have a transparent background, use a PNG. 

How to Make Images for the Web

In most situations, you need to resize a JPEG photo that you have been given or that you’ve taken. Phones and cameras will give you an image that’s several thousand pixels wide. And you only need one that’s several hundred pixels wide (or so) for a website. About the maximum you'll need is 2000 and those if you're using the image for a full screen width display. Typically resizing the image to the sizes you need for the website before you load them will get you into the right range with good quality.

Adobe Photoshop is our go-to software for image editing. It includes an option called “save for web” that allows you to get a good looking image that works well on the web, even retina screens, without being too large.

If you don’t have Photoshop there are some alternatives.

  • If you have a Mac: Preview, included with your computer, will allow you to adjust the size of an image and the DPI (dots per inch) to get a smaller file size.
  • If you have a PC: Paint comes with the computer and can be used for resizing.

Try to get any photos you’re using on your site to be 70KB or less, unless it’s a full width banner image where 200KB or less should be your goal. PNGs should be in the 5 – 15 KB range but could be larger depending on the graphics size. 

One Last Note on Web Image Optimization

Optimizing website images is one way you as a website owner, can help keep website load times as short as possible. And knowing when to use a PNG will also help you to really reduce file sizes as much as possible making the site even faster. The better optimized your images are, the faster your website will be and the more visitors you will have. Oh yeah, and Google will like you better too. And who doesn’t want that?!

New Call-to-action

 

 

[1] Akamai Technologies, September 2009

[2] Moz.com, August 2013

Topics: SEO, Website Design