4 Tips for Creating Optimized Web Images

By Laura Rives — Tuesday, November 10th, 2015 at 11:00am

4 Tips for Creating Optimized Web Images

Optimized images not only improve the look and feel of your website, they also reduce site load time and boost organic search engine traffic. So, since images are oftentimes the most downloaded bytes on a web page, it’s critical to master the art and science of image optimization.

Here are four simple tips to get the most out of your website images.

Tip 1: Choose the File Type That Matches Your Need

There are three primary file formats used for web images, each with its own set of pros and cons.

Portable Network Graphics (.png)

  • Supports levels of transparency

  • Works well with large fields of color

  • Ideal for smaller images like logos (big images = big file size)

  • Two versions: 24 bit for flat graphics and 8 bit for images with few colors

Joint Photographer’s Group (.jpg)

  • No transparency

  • Handles thousands of colors

  • Ideal for large photographs and complex images

  • Two formats: baseline for rendering images in the quality used and progressive for rendering low-res images and progressively enhancing quality (choose one for your entire site)

Graphic Interchange Format (.gif)

  • Allows one color to be transpareny

  • Limited to 256 colors
  • Used for flat color graphics and animated files
  • The fewer colors you use, the smaller the file

Tip 2: Find the Balance Between File Size and Resolution

When an individual visits your site, you only have a matter of seconds to render content before the threat of the visitor bouncing becomes imminent. If you can decrease the size of image files and increase page load speed, fewer visitors will click away.

So, how large should files be? A good rule of thumb is to keep your images at or below 70kb. One way to accomplish this is to use the “Save for Web” command in Adobe and adjust to the lowest file size acceptable for your quality standard. Also, it’s important to remember that computer screens display at 72dpi, so any resolution higher than that will only increase the file size.

Finally, consider cropping your images to remove unnecessary space and better align the focal point within the frame. While this technique might not reduce your file size, it will certainly help make your picture or illustration more impactful.

Tip 3: Be Thoughtful With Your Naming Convention

In addition to helping with organization, better file names help search engines recognize your images and load them in search results. A good habit is to think about how customers search for products and the naming patterns they use. Use analytics tools to find the most common search phrases, and apply that logic to your image names.

Similarly, be mindful of alt tags to give the viewer context if the image doesn’t render and associate keywords with images for SEO value.

Tip 4: Experiment to Find What Works Best for Your Organization

In most cases, the only way to optimize your website image strategy and boost conversions is to test. Reduce the number of images per page, present more images, show subjects at different angles, and scale the number of category page listings up and down.

How about you? How do you ensure your website images are optimized and boosting SEO standings?


Subscribe to our blog via RSS Download RSS

Hannon Hill Corporation

3423 Piedmont Road NE, Suite 520
Atlanta, GA 30305

Phone: 678.904.6900
Toll Free: 1.800.407.3540
Fax: 678.904.6901


GSA Contract Holder