The Importance of Optimizing Website Images

The speed that your radio station website loads matters – maybe more than you realize.  Overall, we have grown increasingly impatient with the amount of time we’re willing to wait for things to load. In fact, many studies show that about forty percent of people will click off a website if it takes longer than three seconds to load. This can have real, tangible impacts on any business whose website is underperforming in the speed department.

A few years ago, Amazon calculated that if their site experienced a one-second slowdown (meaning it takes one second extra to load), they would lose roughly $1.6 billion per year.

There are many different factors that can affect your site speed like your hosting plan and the code that makes up your website.  Optimizing these factors is often too technical and daunting for the average person. However, image size can play a major role in website speed, and just about anyone can quickly learn how to optimize images for their website.

Image optimization doesn’t have to be an intimidating process, but it can be a hard sell when it comes to what takes priority on your site. Even if image optimization isn’t the highest priority item on your list, it still matters and should be done.  And if you have content creators on your team that are not on board, it’s time to drop the hammer and make it mandatory.

What is Image Optimization?

Optimizing images is a process of editing high-quality images to the right size, dimension, format, and resolution or quality, all while keeping the smallest possible size.  The process of image optimization should always be done before uploading them to the website.  Your website may optimize them further based on the content management system and application.

What Image Size and Dimensions is Best?

This depends on your application as well.  A photo directly from your camera might be 4000 pixels wide.  However, on most web pages, you’ll rarely see an image over 900 pixels wide.  Most large images are around 600 pixels wide.  If we were to upload the 4000 pixels wide image, the image would appear no larger but be a much larger file for your visitor to download.

So, the first step in optimization is bringing the image down to the proper dimensions.  Some cropping may be required to get the image to the proper size that your website requires.

It’s likely that your content manager knows the proper sizes that all images should be.  This should be passed down and followed by everyone who creates content for the website.  If your website uses the same images in multiple layouts that could change dimensions across devices or page sizes, then let everyone know how important it is to put the subject of your image in the middle so that nothing gets cut off when layouts change.

Which Image Format is Best?

Choosing the best image file format depends on the type of image and your end goal.

Let’s start at the top of your site with your station logo. You will probably have a background in your header that you want to show through the logo, so the logo has to be transparent.  That rules out JPEG because JPEG images cannot be transparent.  That leaves PNG, GIF, and SVG.  A GIF file might work if your logo only has a few colors, but it will not be as sharp as the other options.  That leaves you with PNG and SVG.  If your content management system allows it, choose SVG because the small file size will load much quicker.  If it doesn’t support SVG, choose PNG.

Other, more modern image formats like WebP and AVIF are options that support transparency.  However, some content management systems have been slow to allow them.  These will likely need a converter of some kind since they are not easily exportable from many image editors.

Regularly featured image photos that accompany blog/news posts should use a JPEG file.  For now, do not use WebP and AVIF images as “featured images” because in our testing we’ve found those not able to be sharable within Facebook and other social media channels.  So, when you share the image on Facebook, the image will not accompany it.  This should change in the future as these newer formats are more widely adopted.

Here is the best application for each image format:

JPG: Best overall use and widely accepted but optimize them to their smallest file size without sacrificing quality.  Does NOT support transparency.

PNG: Typically, file sizes are 2-3 times larger than JPG files.  A major plus is that they support transparency, so they should be reserved for that use.

GIF: Small file size due to limited color palate.  GIF file support animation.  However, animation of GIF files has been disabled in some modern browsers and shown with a play button.

SVG: SVG is a vector format that works better for logos.  SVG files can be sized to any dimension, and you’ll never see pixelation occur.  SVG files do not work well for photos.

WebP/AVIF: These newer/modern image formats are better at image compression and have been designed to have small file sizes.  Both allow for transparency.  However, some browsers, content management systems and applications are slow to adopt them.  (This should change though.)

Which Image Resolution is Best?

When exporting or converting your scaled-down images to any of the previously mentioned formats, there are some extra settings that will need to be tweaked to ensure your image is the smallest file size while looking clear.

In Photoshop, for example, when you choose the “JPG” format, there’s a quality slider where you can adjust the compression settings of the image.  100% will be no compression added and the image will be saved if you took it at the size you’ve chosen.  Always adjust this down though and notice the file size decrease as the quality value gets smaller.  Also, notice the image preview.  A low value might give you the smallest file size but an image that is hard to look at.  Pick a reasonable value that provides the smallest file size and image quality that will look good to your audience.

Since every image is different, there’s no one set value here that will work best for every application, so plan to adjust this with each image you edit.

Saving Your Optimized Images

It’s important that every image you upload to your radio station website be saved without spaces.  Spaces within filenames can cause problems with some content management systems and applications.

Ensure that you add image meta to every image you upload.  Let’s say you’re uploading a flower image to your website.  You may name the file “flower.jpg”.  This is perfectly fine.  However, a screen reader being used by a handicapped person cannot convey what the image is.  It’s becoming more important for legal reasons, that you include “title” and “alt” tag information, so they are included in the code that displays the image.

An example of a title and alt tag for the flower.jpg image might be, “Yellow rose in a field of green”.  This additional information allows persons with disabilities to see the image in their minds.

Adding image meta tags will be vital in years to come and more legislation gets passed to better allow people with visual disabilities to better “see” the internet.

Image Optimization vs Content Optimization

Having all your images optimized should not give you free rein to include more images on your web pages. Each image you include on your pages adds to the overall weight of the page.  Heavy pages simply take longer to load and that adds to the load time.

Wrapping Up

Optimizing photos for your site isn’t always easy and will likely take some experimentation and testing. But once you get your image optimization process down, your website’s speed will improve as well as your overall user experience.

If your content creators are slow to get on board with this, it’s time to motivate them to act.

Need help with your radio station website?  We’d love to help.  Please reach out to us.

Jim Sherwood serves as the chief creative, brand strategist, lead developer, meticulous project manager, and station collaborator for all Skyrocket Radio sites and projects. Jim is a 30+ year radio veteran with a resume spanning several small, medium, and large markets including roles as Digital Content Manager, Program Director, Production Manager, and Morning Show Host.