Images account for more than 60 percent of a website’s total bandwidth. Bandwidth is a costly commodity. If your website is image-heavy, it is probably responsible for the majority of your IT costs, including hosting and storage. In addition to the financial burden, you can lose leads and customers because your website takes too long to load. A website that takes five or more seconds to load is 90 percent more likely to be abandoned than a page that just takes one second to load.  

Common Visual Mistakes that Harm Your Website’s Performance

If you don’t currently manage your visual content, it’s time to do so. Here are five ways to get started, with strategy and tips from leading cloud service, Cloudinary. We recommend sharing this list with your graphic designer or IT team, so they can assist you with changes to file formats, browsing performance, and image quality.

Unnecessarily High-Quality JPEGs

You may be surprised to learn that you can significantly reduce JPEG quality settings and not change how an image appears on your website. A lower quality image “weighs” less, requires less bandwidth, and loads faster. For example, a 95 percent JPEG might weigh 34KB. That same photo could be reduced to 80 percent, at 17KB bandwidth, with no visual change. Think of how quickly changing the image quality could add up if all of your website’s images were updated. We recommend trying as low as 50 percent JPEG quality, which could still work well for certain image types and uses.

Incorrect File Types

The three most-used file formats on the web are JPEG, PNG, and GIF. Each format has a very different web-use role. Follow these guidelines to make sure you are using the right file type for the content.

  • JPEG: Photographs
  • PNG: Computer-generated images (charts, logos, etc.) or image overlays
  • GIF: Animated items

A good rule of thumb is to not use PNGs for photographs. You can get comparable quality from a JPEG without spending all that extra bandwidth.

Not Optimizing (Compressing) Images

PNG images tend to be used more frequently than necessary because it is a lossless format. That means it’s built to preserve all details of an image. It’s the preservation of those minuscule details that quickly (and vastly) increases the file size. The good news is that there are two open-source image optimization libraries to compress your PNG file. PNGCrush and OptiPNG both automate the optimization process. In addition, Yahoo’s Smush.it service allows you to manually compress PNGs even further.

Using Images When You Can Use CSS3

CSS3 is the latest version of the commonly-used coding language Cascading Style Sheets (CSS). It provides several long-awaited features that older browsers did not support, such as rounded corners, shadows, animations, and gradients. It also allows new layouts, including multi-columns and grid. Browsers can now natively support all of these features without developers having to add image-based solutions that hurt the browsing experience. Developers and graphic designers should use CSS3 elements to assist this process.

Using a Single Image Size Across All Delivery Mediums

Your website’s mobile-friendly access and design is more than just templates and layout. Typically, developers offer the same images for all device resolutions, which usually end up being either too large or too small for certain devices. A desktop-optimized image is unnecessarily large for a smartphone. Lower resolution images, suitable for smaller screens, are not appropriate for high resolution devices and desktops.

Fortunately, there is a simple solution. First, have a set of thumbnails for each original image available. Then, use an automated Javascript package that will identify your visitor’s device and retrieve the best-fitting image from your server.

Increase Pagespeed and Website Performance with Image Management

Effectively managing your website photography will increase pagespeed, user experience, and overall website performance. At G5, we think of your website as your first leasing consultant and it should deliver high-quality leads directly to your sales team. Design and creative services is just one part of the process. We also tailor innovative marketing campaigns to fit your audience and goals with SEO, Digital Advertising, Web/Mobile, and Reputation/Social Management.

Let us show you how it all works together. Schedule a demo today.