Is Your Website Loading Slow? Start With Optimizing Images

Page speed load time is one of the most important factors  Google looks at   when ranking websites. It has only become doubly critical as Google started to index mobile-first, meaning your website must load quickly for smartphones if it hopes to rank well.

What is Page Speed?

A website's page speed is the average time it takes for it to load the content. We've come a long way since the days of buffering videos. We don't even use that word anymore! Technology has done an incredible job speeding up the internet so we can watch the next YouTube video without waiting.

There are many parameters that affect the speed of a site - layout, code, images, plugins, hosting. There can be several options for delay, so it is worth improving the speed parameter in aggregate.

Average website page load speed - 2-3 sec. However, for highly loaded web applications, the optimal speed may differ. In such cases, you need to conduct a speed test and calculate the average load time of competitors' sites and focus on it.

Why page loading speed matters to Google

Always think about what Google wants to do when someone makes a search query. It intends to serve the best, most relevant results quickly. The keyword here today is quickly.

Study after study has shown that our patience has dwindled. If a web page takes even half a second too long, you can lose many visitors as they click the back button. You can lose visitors before they even loaded the page.

Amazon's sales are directly affected by page speed. If even they are a second slower, they potentially lose nearly 2 billion dollars a year. That is how vital speed is on the web.

There are many ways to improve load times.

Minify files, employ a CDN, enable GZIP compression, and deleting unused (or bloated) plugins are a few ways to start improving page speed. Note that they all have something in common.

They either lower the amount of information the browser has to read or reduce the work it takes for the browser to read a page's files.

Business owners need to consider all the options, but I believe starting with optimizing your website's images is never a wrong place to start.

In my experience as a website developer, images are most often the biggest culprit to a slow website. I've seen photographers upload and use their photos directly from their cameras. The horror! So yes, I'd bet that most websites could benefit from image audits.

But why start with images? What's wrong with them?

Master Website Creation: Enroll Now!

Transform your digital presence with our comprehensive Website Creation course – start your journey to becoming a web expert today!

Enroll Here

Let's go back to my example to the camera since it's a perfect illustration of why images need optimization. Photographs from cameras are not web-ready.

Cameras start you off with the raw, detail-heavy files. They are usually incredibly large files with meta information and extreme details a user appreciates on a screen. It's way too much information to be practical for the web. The internet browser does not need meta information (the information about the photo itself).

If you want your website to be mobile-friendly, then give it as little work as possible. It is a lot more work to load a 28MB file than to load the same file, but now it's only 210KB.

A step by step process

I'm going to show you how I minify files for websites. Follow along my easy process, and you'll be able to do this yourself.

Record your page load time

We'll put this process to the test. Copy the URL of the page that has the images you'll be optimizing. Then visit any of the websites that will record the time it takes to load. A good website to bookmark for this is  Google Page Speed Insights.   Paste that URL and run the test.

You'll get an overview of your score (for mobile and desktop) and give you suggestions on what to fix. Save your results by writing it down or taking a screenshot.

Take it one image at a time and follow these steps.

• First, I want you to define the purpose of your image. Is it a decorative image that doesn't communicate anything but is purely aesthetic? Is it informative where it conveys an essential cue like Bookmark this page? Or is it an illustration or photograph that adds to your content? Knowing this gives you insight into how to treat your photo.
• Knowing the purpose of the image, assess the largest size it needs to be on a wide desktop monitor. If it remains the same size, no matter the screen size, you only need to resize it to that dimension. If it needs to grow or shrink responsively, you will want to take the mid-to-higher end of its largest potential size. For example, if I have a sizeable full-screen banner on a responsive website. I may size the photo at 1500px wide at a good quality file type. As it fluidly shrinks or expands, it should perform well. I may also have a second image, more appropriately sized, just for mobile.
• It's time to export your resized image. There are  many apps you can use to edit and export files.   Here's a quick brief explanation of what file types you want to use for what. If your image is acting as a background or complementing content photo, export it as a .jpg. Unless it's an incredibly important picture, I usually select the 75% quality range. If the image needs to be crispy clean, higher quality, or needs a transparent background, use a .png file type. If it's an illustration image- like an icon or decorative flourish- save as an SVG.
• Now we're taking an extra step further by compressing it. There are two types of compressions to know: lossy and lossless. Remember all that metadata cameras like to save? Lossless compression will get rid of that, so the browser doesn't have to worry about it. At the very least, use lossless compression. I like to choose lossy compression. It will remove some information from the picture itself, and if done poorly, you'll notice a decline in quality. So if unsure, keep a copy before using lossless compression. Usually, you will not be able to see any difference, and it is most effective in reducing file sizes. You can download an app such as ImageOptim, a website like  tinypng.com,   or a plugin to perform the compression for you.
• Reupload and replace your images.
• Run your site through the page speed tester again and see the results. Depending on your website and the test website itself, you should see some improvement. Your results may vary. I've personally achieved impressive gains by image optimizations alone.

When it comes to page speed, image optimization should always play a role.

However, it should not be the only action in your strategy. It's a great place to start in ensuring a speedy, mobile-ready website. It's essential to have pictures that do not slow down your website.

Google has made it clear how important it is to them, and therefore, every website needs to be proactive in its management. Business owners, take note and apply this to your digital strategy.

Pauline, Pink Pursuits

I’m a website developer with 5+ years in the advertising industry under my belt. I’m also a handmade seller and the blogger behind Pink Pursuits. I write about marketing, Etsy, and the topics in between to help other creatives.