How To Optimize Your Images For Blazing Fast Event Websites

header 2.png

They say a picture’s worth a thousand words— maybe even a million when it comes to event websites.

Pictures give your audience a feel for what they can expect; think speaker headshots, venue images or highlight images from previous conferences. Imagery can instantly convey an event’s tone, purpose, and benefits— as long as they’re actually appearing for your audience.

Screen Shot 2019-05-29 at 12.17.19 PM.png

Despite visuals being super important, they are also among the worst culprits when it comes to slow page load times (aka. the time it takes until your website is visible to the end user)

And if you think your page load time doesn’t matter, it’s time to think again.

A one-second delay in page load times yields, according to Moz, 11% fewer page views, as well as a 16% decrease in customer satisfaction and a 7% loss in conversions / registrations

Tl;dr: Speed does matter.

Fast-loading event sites perform better on all fronts: better user experience, higher conversions, more engagement, and higher search rankings.

And site speed matters even more on mobile devices; no one wants to download a 5MB website on their smartphones.

But what does that have to do with images?  

Easy— images are one of the few site speed factors you can actually control.

While most of the event site speed depends on factors that you can’t influence, you can take action to make your images a little more snackable for everybody’s bandwidth.

Plus, they’re super easy to optimize.

In this post, I’ll show you how you a few tricks on how you can make your event website blazing fast.

What Image File Types Should I Use To Make My Event Site Load Fast?

When considering images for your event website you basically have three options - jpg, png & gif.

They all come with their own advantages and disadvantages, so it’s very important to keep these in mind when using images on your event site:

JPGs For Your Event Site

JPGs (also known as JPEGs) are among the most popular file types for the web.

They are perfect for photographs and complex images containing loads of colors, shadows and gradients. JPGs can be saved in low or high quality or anywhere in between.

Use Case for Event Professionals: JPEGs are the most popular file format and are great for Homepage hero banners & event pictures.

PNGs For Your Event Site

PNGs are also very popular on the web. Although, they can handle transparency, they have a very limited color palette of 265 colors which make the image smaller.

Use Case for Event Professionals: PNGs are usually best for event logo because they are high quality and can handle transparency. And typically, your logo won’t require as many colors as event pictures.

GIFs For Your Event Site

GIFs were popular many years ago. They are still an option for small image sizes where you only need a few colors. They are also restricted to 256 colors so should never be used for pictures.

Use Case for Event Professionals: Gifs can be used for logos, but aren’t as popular as PNGs and should never be used for event pictures.

How To Save Images Properly

As mentioned above, large images take longer to load. When I say large, I’m referring to the file size rather than the image size (although the latter is equally important).

According to a report from Kissmetrics, 40% of people abandon a website that takes more than 3 seconds to load. You can see how important it is to keep your images small to ensure a speedy event site.

TIP #1: SAVE THE RIGHT DIMENSIONS

When viewing or editing the image in Photoshop, Gimp, or Sketch, make sure you always view the image at 100%. This allows you to view the image at the exact size it will be displayed on the computer monitor when you save the image for the web.

TIP #2: COMPRESS IMAGES FOR THE WEB

Image compression apps are the easiest way to reduce file sizes of images. The tools typically remove hidden metadata (like geolocation of where the image was taken) and color profiles.

When using compression tools online, you’ll come across a variety of compression levels. So before we jump in, here is everything you need to know about it:

Lossy, Glossy, Lossless - what does that all mean?

Lossy compression is the best option for most. Images processed with Lossy algorithms result in the smallest optimized images you can get which is crucial for fast site speeds.

Glossy compression is the best choice if you still care about sight speed but you believe that a slight decrease in page speed is acceptable for a slightly higher quality image.

Lossless compression are pixel-by-pixel identical with the originals. They offer only a limited size reduction compared to Glossy or Lossy. If you want your images to remain untouched, select this option.

What Image Compression Tools To Use?

There are a variety of different (often free) tools & services available online that can perform image compression for you:

ImageOptim
Available for Mac (free) or as web service

Screen Shot 2019-05-29 at 9.22.27 PM.png
Screen Shot 2019-05-29 at 9.27.01 PM.png
Screen Shot 2019-05-29 at 9.29.02 PM.png
Screen Shot 2019-05-29 at 9.38.33 PM.png
Screen Shot 2019-05-29 at 11.08.11 PM.png

There you go. Many free tools at your disposal to compress your images in a breeze.

Conclusion

  • Before uploading images to your event website, decide on the file type. PNGs and GIFs are great for logos. JPGs are great for images where you have many colors, shades & gradients.

  • When editing images, always use the 100% view.

  • When saving images, choose the right size that you need on your website. You don’t want your browser to do all the re-calculating for you as it will have a negative impact on page speed.

  • Compress your images before uploading them. There are many free tools available online that don’t require any download.

Carsten Pleiser