Ensure Your Pages Load Quickly Without Skimping on Image Quality
It is a truth universally acknowledged that a person, when faced with a slow website, will throw their computer across the room in frustration.
But seriously, we’re all familiar with the specific kind of frustration that appears when a web page is taking forever to load, and it’s super annoying. You sit there either impatiently clicking refresh or exiting your browser and trying from scratch because maybe that’ll be faster than waiting for the page to load. So how can you make sure that users visiting your site don’t have this experience? It’s time to learn all about how to optimize images!
Why Fast Web Page Load Speeds are Important
User Experience
A user’s experience on your website can make or break their trust in you as a business. It might seem trivial, but a few extra seconds of loading time for your landing page can take an enthusiastic lead and turn them into a disgruntled one.
Think about how frustrated you get when the load time for a page is moving at a snail’s pace, so you keep clicking refresh in the hopes that it’ll speed it up.
Bounce Rates
A bounce rate is the percentage of people who leave a website after only viewing one page. A high bounce is an indication that something is awry on your site, and a slow load speed is a huge factor in high bounce rates. People are impatient and get frustrated easily, so keep this in mind when building your site.
SEO
Many things factor into SEO, or search engine optimization. In addition to having compelling, relevant content that a user is looking for plus easy readability and indexability for crawlers and algorithms, a fast load speed will help your website climb in the search rankings.
How Images Affect Web Page Load Speed
The two main ways that images can drastically affect page load speed are image size and image resolution. A large image size will take more time to load because it takes up more space on the screen. There are two ways to make an image smaller: cropping and scaling. Cropping an image means cutting some of it out to fit the desired dimensions, but then you lose a chunk of the image.
Scaling an image allows you to keep the entire image but just make the whole thing smaller. When scaling an image, the aspect ratio will stay the same, so this is a good option for when you need your image to stay the same shape, whereas with cropping, you can manipulate the shape of the image.
If the resolution is really high, that can also slow down the page load speed. Reducing the resolution will increase the load speed in exchange for image clarity.
How to Optimize Images without Losing Quality
Run a quick audit of your site and take note of all the image sizes. Decide on a standard size or small range of sizes (to accommodate for varying image shapes) and resize and scale your images accordingly.
It is also advisable to run your images through an image compressor. Image compression minimizes the size in bytes of a graphics file without degrading the quality of the image.
Because the file size is now smaller, storing it takes up less disk/memory space meaning you can store more compressed images in the same amount of space it took to store one uncompressed image. It also reduces the time required for images to load on a website and be downloaded.
What is Alternative Text?
Often shortened to alt text, it is the text in HTML that describes the images on web pages. Google crawlers can’t read images, so descriptive alt text is beneficial to SEO. Visually impaired people or others who use screen readers will hear the alt text read aloud.
You should always make sure your alt text is a clear, concise, relevant description of the image it is attached to. Avoid keyword stuffing as this is bad for SEO and makes the alt text useless for people who use it for accessibility purposes.
Best Free Tools for Image Optimization
GTmetrix.com
Running your site through GTMetrix will help you identify which images on your site need to be optimized. It’s helpful and convenient because it takes the guesswork and manual sorting process out.
ImageCompressor.com
A site that lets you upload multiple images at once and compresses them for you. You can redownload the files in a zip format.
TinyPNG.com
Image compression specifically for .PNG file types.
TinyJPG.com
Image compression specifically for .JPG file types.
CompressJPEG.com
Image compression specifically for .JPEG file types.
Preview
If you have a Mac computer, Preview is the default image-viewing software, and you can resize, scale, and crop images on it.
Pixlr
A photo editing site that allows you to edit, crop, resize, and scale images directly in your browser.
Screaming Frog
One of the free features on Screaming Frog is identifying which images on your site lack alt text. Once identified, you can add alt text to the images to enhance your SEO and site accessibility.
