Large Images Make Your Website Slow
Why is my website slow?
Why is my WordPress site loading slow?
Website taking forever to load?
Why is my Website so SLOW?
If you’ve been asking any of the questions above, chances are that you’re website is really slow because of large images.
Large images are a huge deal, and even highly polished, professionally designed websites will often be loaded with a great deal of massive imagery that might look nice, but it tanks your website load times.
Slow Websites are Frustrating for your End User
Do you remember the days of dial-up internet? Any website that had an image would slowly load – section by section.
As I say that, I can still hear the AOL dial-up tone and the classic “You’ve got mail,” sounds coming through my Packard Bell computer speakers.
If you’re a small business and you have a website, you should know that Google is rewarding fast websites.
The number one factor that causes a site to be slow is the use of large images rather than optimized images with small file sizes.
Most of the time when a small business builds their own website, or even if they work with a graphic design agency, they have a tendency to use large, beautiful images that have file sizes larger than 200KB.
Images larger than about 180KB are going to slow down your website, especially when you have more than one of them.
Part of maximizing your search engine optimization efforts is considering the user experience of your website.
When somebody clicks on a link or finds you on Google and the page takes 25 seconds to load because the images are huge, that’s a bad experience for the customer. Because of that bad experience, Google has placed a high value on page load times when considering their search engine results.
I want to show you how you can identify problem images and replace them so that your small business website can provide an excellent experience for your prospective customers.
Three Steps to Make Your Website Faster for SEO
1 – IDENTIFY LARGE IMAGES – Use Google Page Speed Tools to Identify Large Images
To Find the Google Page Speed tool, simply head to Google and search for “Google Page Speed Tool.”
Where are the Large Images? They are often difficult to find, but watch out for large featured images that a widget might use.
Google Pagespeed will help you identify the images that are large or uncompressed, but it’s often hard to find the images once you’ve done this.
Some Places Where Large Images can Really Get you:
Some of the hidden places where images pop up is where blog posts are shown with their featured images. The blog archive page or sidebars that show images are both notorious places for large files to bog down your website. In fact, I’m realizing that we need to go and clean up our own featured images right now! These widgets in a footer, or in a blog archive page, can be pulling up dozens of images that are very large.
Opt for WordPress blog widgets and recent article widgets that do not show the featured image – this will help you speed up your website drastically.
If your website is slow – there’s a chance you’ve got large images all over the place.
FROM NOW ON – TAKE TIME TO REDUCE THE SIZE OF IMAGES BEFORE UPlOADING!
You can take each web page that you have and drop it into this tool to identify different areas of opportunity that will help your page and website load faster.
Most websites are going to score very poorly on this, and even highly optimized pages usually only rank in the 70s or 80s – because there are some things that are very hard to change in a content management system like WordPress, Squarespace, Wix, or other web builders.
What you should pay attention to here is the warnings regarding large images.
What to Do After You’ve Found Large Images:
- Remove the image or reduce its size
- Use image compression plugins on WordPress
EWWW WordPress Image Compression is a great plugin that has been kept up to date for some time. When you upload an image, it works behind the scenes to optimize that image and reduce its overall size by compressing it.
Compressing these images help them to load faster.
2 – Ask Yourself if Images are the Best Option
Images add a ton of value to your website, but you also want to make sure you don’t overdo it.
Too many images will slow down your site, and it can also make web pages look scattered and cluttered.
If a background color can be used, consider that alternative. Backgrounds that are color-based will load much faster than any image.
3 – Reduce File Sizes When Appropriate
When you identify that you do want to use an image in your website, there are two ways to reduce the file size:
Reducing the physical size and reducing quality.
The larger the image will be on the website, the higher quality and larger the image should be. That sounds like common sense, but it also means that small images should be kept as small as possible and with lower quality.
Low-quality images are hard to spot unless they are stretched out across the screen. It’s kind of like when you used to buy a digital camera: the conversation would always be whether or not you wanted to take pictures and enlarge them. The more you enlarge the photo, the more it exploits the quality of the image.
Two Ways to Use Small Images in WordPress
When you’re using WordPress, every photo that you upload has multiple versions of it behind the scenes.
If you navigate to the Media tab in your Dashboard and then click on a picture, depending on your theme, you’ll be able to see the various versions of each image by clicking a link that looks like this.
So when you upload a photo, there is a full-size, large, medium, small, and thumbnail version of the image available. You can use the thumbnail or smaller versions of these images on your page, but many different website builders and themes do not allow you to choose the smaller versions or to insert the URL of the small version.
When it’s difficult to copy and paste the URL of the smaller version of the image, you will want to do some behind the scenes work to create the proper size and quality for the image.
Remember that you will want to use as small of a file size as possible – so you will want to consider how the image is being used. You can use Adobe Illustrator, Lightroom, or Photoshop to export your image in the proper dimensions and quality.
Personally, I like to reduce the file size of larger images by using Lightroom. I especially love Lightroom in cases where I’m working with a large batch. You can import all of the photos that you might’ve taken or downloaded from websites such as Pixabay into a folder. You can then import the folder into Lightroom, select all the images, and then export them with settings that reduce the image size down to an appropriate dimension – keeping in mind that 1920 x 1080 is probably going to be big enough for even the largest images.
After reducing by a percentage the image size, you can then choose an image quality reduction by percentage with this slider:
You might have to try to couple times, but this is the best way to reduce a stack of images all at one time.
Another way that I like to do it is to open a new Adobe Illustrator project, drop the photo in, and adjust the artboard size to fit the photo. After this, I click “Export for Web” and reduce the quality and the image size to its appropriate levels.
If you don’t have the Adobe Creative Cloud or any of the programs that I mentioned above, do note that YouTube has an array of different walkthroughs on how to reduce image size with various tools – whether you have the Adobe Creative Cloud suite or not.