Optimizing Images and Site Speed Ramifications

We’ve talked about the importance of high-quality imagery a number of times. By now, you’re likely aware of how great imagery and video can make or break a website design. But, have you thought about the “dark” side of website imagery? Have you considered what happens when all that high-res imagery is added to the website a little at a time? Answer: the site speed goes down.

As we’ve talked about in this post, page speed is very important for three main reasons: bounce rates, SEO and PPC. That’s why, in this day and age, we can’t stress enough the importance of optimizing images for website use. It’s so important that we’re writing a full blog post on optimizing images and site speed ramifications of not doing so…

Optimizing Images and Site Speed Ramifications

First, let’s talk about the size of images. Why are they so large anyway? Most – if not all – of the images used on websites these days started out as high-res images. High-res images are giant in size, sometimes even 13 or 14 MB. But, they’re exactly what we need when we’ll be playing around with the size of the image and cropping to needed specifications. Additionally, it’s much easier to go from a very large image and shrink it down. The reverse – taking a small image and making it large – results in a grainy, pixelated image. Another item to note: high-res images are required for print. While digital, web-based images can get away with not being high-res in some situations, that doesn’t work for print. Thus, imagery starts out as high-res so that it can be used for a variety of functions.

When images aren’t optimized before uploading them, the media library on the website gradually gets larger and larger. As time goes on, the entire website slows down, since the un-optimized images needed to be called and shown to the website user on every page. To summarize: not optimizing imagery has a cumulative effect.

Site Speed Ramifications

A website’s site speed as an enormous impact on its overall performance. If your website has a terrific design and fantastic imagery, but takes a longer-than-average time to load, the function takes away from the form. People want a beautiful site to look at, but they don’t want it at the cost of sitting and waiting for it to load. What’s the average load time these days? According to research done by MachMetrics, most sites have an average load time of 8-11 seconds. Let’s take a look at more statistics from NeilPatel.com.

• 40% of people abandon a website that takes more than 3 seconds to load.
• A 1-second delay in page response can result in a 7% reduction in conversions.
• If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year. 

If you take one thing away from this post, let it be this: site speed matters. Make it a priority.

How to Optimize Images

The easiest way to optimize images is to “Save For Web” within Photoshop. That’s the technique we use here at RedMoxy, but there’s additional tools at your disposal, too. Try using https://tinypng.com/ to compress your high-res images online. Another option is https://compressjpeg.com/. Try both of these out to figure out the best option for you and your website.

One last note: don’t use a .png format or a .gif format when a .jpg will work just fine. Why? Because a .jpg is an inherently smaller file size. Whereas PNGs and GIFs support transparency, JPEGs do not. If you don’t need an image with a transparent background, such as on a typical blog post, don’t use that file type. Learn more about choosing the right file format on Moz.com here. 

How to Improve Site Speed

This topic can be very in-depth, but today we’re just going to scratch the surface. We’re focusing on how you can improve the website’s site speed, specifically as it pertains to images.

Step 1: Pull up Page Speed Insights by Google and enter in your website’s domain.

Step 2: Review the results. Scroll down the opportunities section.

Above is an example of opportunities that Google has found for RedMoxy.com. (Click to enlarge.) Notice how many of these suggestions are related to images? At least 4 of the 7 suggestions! Click the down arrow to reveal more detail.

Google will give you suggestions like the below (click to enlarge), which includes an assessment of how much savings you’ll receive through implementation:

With step-by-step advice like the above, speeding up your website’s load time isn’t mysterious at all. Work with your website developers to accomplish the most rewarding, impactful suggestions first, and then work your way down the list.

If you’d like RedMoxy to take a closer look at the images on your website and make an assessment of our own, reach out to us at [email protected]. Plus, learn more about the services we offer here.