Need for Speed: Why You Need to Optimize Your Website Images

The experience your customers have on your website directly influences whether or not they choose to commit to your business or products. More often than not, customers browse and buy on mobile devices. Your website, content, and media need to be optimized for mobile users. 

Think about what happens when you visit a poorly designed and functioning website. If the site doesn’t load, do you patiently wait or leave? My money is on leave. Sadly, that means the chance to build relationships and close sales leaves too. A website that is not optimized for mobile use is your money going out the door. 

5 ways to create and maintain a mobile-optimized website for your customers

1. Prioritize speed

Think about how it feels to sit and wait for a website to load. For myself, a lagging website is a suspense film without a payoff or an unsolvable math problem. It doesn’t make me want to buy anything. 

A fast website is a better user experience for internal and external users. It should serve your employees as much as it serves your customers. After all, a website is your most valuable resource and most important salesperson. 

The right website design always considers the people visiting. Slow websites waste data, and in turn, waste money. It’s bad business to waste your money and just plain rude to waste a customer’s time. 

Fast websites sell more products and satisfy your customers. Build a fast website that serves your customers just as much as it serves you.

2. Choose the right format

Why does a website take forever to load? It’s most likely massive file sizes that take up space and waste data. No matter what, always carefully select the right kind of image for the job. It’s all about the right format, and you have two options to choose from: raster and vector graphics. 

Raster graphics

Raster graphics represent an image by encoding the individual values of each pixel. Think photos. There are two universally supported raster image formats: PNG and JPEG. In addition to these formats, modern browsers support the newer format WebP. 

Vector graphics

Vector graphics use lines, points, and polygons to represent an image. Think icons and logos. They deliver sharp results at every resolution and zoom setting, perfect for editing. Vector formats are suited for images that consist of simple geometric shapes such as logos, text, or icons. SVGs are a universally supported vector format.

3. Compress, don't stress

I see it all the time: people use incredibly high-resolution files for small images. But why should you care? Uncompressed images bloat your pages with unnecessary bytes. Bloat means slow, clunky websites that lose sales. 

There are a lot of accessible, simple resources you can use without even opening Photoshop. You can also use plugins directly in WordPress that will compress your already uploaded image files. Here are three resources I highly recommend:

• Squoosh: This is a great online file compressor site that lets you not only compress the image but change its dimensions and limit colors.
• Tiny PNG and Tiny JPG: A quick and dirty way to compress your image files online. There are two separate sites, one for PNGs and one for JPGs.
• WordPress Plugins: The best format for image file compression is WebP. WordPress does let you upload WebPs directly, but the WordPress plugins WebP Converter for Media and Imagify convert photos you’ve already uploaded.

4. Keep it simple and size it down

For optimal website performance, images should be as large as needed to fill your page layout containers. A container is a preset or custom section of your website with a fixed ratio. Your image size directly correlates with the size of your container. If you use a needlessly large image in a small container, your website wastes space and customers experience longer loading times. 

A great rule of thumb: do not upload an original photo to your website without sizing it down. Let’s walk through three simple examples for your website:

• Background images are the largest images on your website. To properly span your website, your background image needs to be 1800-2560 pixels wide.
• Featured blog images are smaller and usually are not the width of the screen. They need to be between 825-1200 pixels wide.
• Tiny logos or icons (so small!) do not need to be any wider than 250x. There is no reasonable situation where your logos and icons need to be wider than 250x.

5. Replace your GIFs

I love GIFs! But, sadly, the graphics interchange format is way too big. Luckily, you can achieve the same effect as a GIF with different—and better—methods: 

• Convert it: SVG images are a lot smaller than GIFs and offer the same, animated result. You can create your animated SVG’s with SVGator and convert existing GIFs with Convertio. Already using WordPress? SVGator offers a handy plugin!
• Create a video element: You can upload GIFs to the backend of your website as long as you embed the GIF properly. If your website allows hard coding, create a video element that repeats like a GIF, but is much smaller in size.

You bring the business, we’ll bring the design

Website design can be stressful. But guess what? You do not have to do it alone. Sauce Marketing will build a fast, secure website that serves your customers, empowers your team, and grows your business. Schedule a call with a Growth Strategist today.