Why Image Optimization is So Important

One of the first things you notice on a website are the visuals. They catch your eye and grab your attention better than any other element on the page. But they can also take up lots of space and slow down your site’s load speeds, something that will turn away customers faster than anything else. Images can also be used to attract search engines if optimized correctly. Let’s take a look at some of the things you can do to prepare your images correctly to drive more traffic to your website, and keep them there.

Understanding How Images Load

Without spending a lot of time going through the technical details of how a website’s page loads, suffice it to say any large elements will delay a page from fully displaying all of its content. Research shows that if it takes longer than 3-5 seconds for a page to fully load the probability of a visitor leaving your website ranges from 32-90%. The smaller your images are, the faster they will load. There are a lot of ways to get there and it takes all of these tactics to succeed.

Special Note: Image size refers to the file size as expressed in KB or MB. Sometimes this gets confused with the image dimensions (for example: 5" x 7"). Both are important but the image size has the larger impact on page load performance.

Balancing Quality and Speed

While you want your images to be small in size you can’t sacrifice quality altogether. The ideal mix is the largest dimensions that nets the smallest file size. You want to ensure that your images are crisp and clean, devoid of pixelization or color bleeding. The nice thing about the digital world, as opposed to the offset print world, is you can see the results right in front of you on your screen. Trust your eye to tell you whether the quality is good enough.

Image Sizing

The optimal dimensions (expressed in pixels) should not exceed the width size of your site’s container (you can control this setting through your Theme). If you have an image that extends the entire width of your page then figure 2500 pixels is the best setting. Technically you could double that to 5000 pixels for the new retina screens but consider what percentage of your audience actually views your content that way. Honestly, dependent on your niche, most of your audience will engage with you on their phone or tablet. A quick check in your Google Analytics (Audience/Technology/Browser & OS/Screen Resolution) will let you know how your visitors are viewing your content.

Are You Ready to Start Your First Blog?
Click Here to Get Your FREE 5-Day Course!

Reducing Image File Size Options

There are a number of ways you can reduce the file size of your images (otherwise referred to as “compression”). One of the more traditional ways is in Photoshop, or some other image editor, but I’ve found that none truly excel at this final compression stage. There are plugins that specialize in image compression like WP Smush, EWWW Image Optimizer or ShortPixel but there is a cost to use. The best solution we’ve found are with the free online solutions whose only task is image optimization through compression algorithms. This gives you more control over your final images and is very convenient (and FREE!).

Our recommendation is Optimizilla which we use to compress our images prior to importing them into WordPress. This online image optimizer uses a clever combination of the best optimization and lossy compression algorithms to shrink JPEG and PNG images to the minimum possible file size while maintaining an acceptable level of quality. They display a before and after rendering of each image that you can control in addition to handling batch loads (multiple images at once).

Image Format Options

There are a number of image formats that have come and gone over the years like .TIF or .BMP that had a nice shelf life but didn’t translate well for website development. Following are the only formats we would recommend considering, each for different uses.

JPG – the most common web image format is Joint Photographic Experts Group (JPG). It consistently provides the best combination of file size and quality. You need to be mindful that over-compressing JPG files will lead to what is called “artifacting” where areas of the image become blurred. All you need to do is adjust your level of optimization to avoid this.
GIF – Graphics Interchange Format (GIF) is very popular if you have simple, low color, images like charts and graphs. GIFs can only hold 256 colors so they don’t display complex images well but they produce small files that load quickly. GIFs are also very popular for displaying 5-10 second videos with no sound.
PNG – Portable Network Graphics (PNG) are relatively new to the website world. They were intended to replace GIF but with the full 15 million color capability. PNG don’t reduce in file size as well as JPGs but they also suffer no degradation when optimized. Another benefit is their ability to incorporate transparency layers allowing images to be laid over a color background seamlessly.
SVG – the latest entry into the image format space is Scalable Vector Graphics (SVG). SVG images are vector files (as opposed to pixels) which is derived from shapes and curves that are compiled mathematically. The primary benefit is that resizing the dimensions has no impact on image quality. This is the same technology used in Adobe Illustrator and CorelDraw!

Special Note: When compressing (optimizing) an image file, always do a Save as . . . and rename the file. This way the original file remains available should you accidentally over compress the image. It’s a good idea to have a cloud account where you can store original images so they don’t take up valuable hard drive space on your computer.

Naming Your Images

One of the cardinal sins committed with website images is not changing the default file names. Most photos have alphanumeric file names assigned upon creation. Search engines don’t just crawl the text on your webpage, they also crawl your image file names. So you need to create descriptive, keyword-rich file names so the search engines understand the content of your images. For example, a picture you took of your car might have a name like IMG_5026.JPG. This means nothing to Google’s bot spiders but a rename to 2012_Honda_CRV_Blue.JPG allows them to match your file name to those keywords.

Special Note: It’s best to create a common nomenclature you follow for naming each of your files. When coupled with a clear folder structure allows you to easily keep track of all your content while developing and later, when searching for a source file you created years before.

What is Alt Text?

Alt text appears when a visitor either cannot view your image or when they hover over an image. More importantly adding appropriate alt text to your images, that include your keywords (just don’t overdo it) can improve your ranking with search engines. In particular, alt text is a great way to promote any product images you have for e-commerce. The Media section of WordPress makes is easy to add Alt Text to each of your images after you’ve imported them.

Images are a powerful, and very necessary element of your website. They add beauty, context or just plain entertainment to any text-heavy content. Take care of them and they will take care of you!

FREE 5-Day Course to Start Blogging

You’ve always wanted to start a blog but just aren’t sure where to start . . . no worries.
This FREE 5-day course is the perfect place to start and get your feet wet.

Start with our 5-Step Checklist for Starting Your First Blog then move onto . . .