If you’re not worried about the page speed of the sites you’re building, you should be. Most of us won’t wait very long for a site to load – research says we have about 3 seconds before our users will go elsewhere.
One of the key ways you can speed up your website is by ensuring that your images are optimized properly.
That means your images are the right size – both dimensionally and are the correct file size – and ensuring that you use the right image types. There’s also an awesome side benefit to optimizing your images – improving your SEO and on-site accessibility. The key thing here though is most of this work happens before you even think about uploading your images to a website.
Let me walk you through 4 easy steps to optimizing your images every time.
Optimizing Images When You Save Them
Which File Type is Right for Your Image?
The first thing you’ll need to decide when preparing an image for a website is what format it should be in. There are two main web-friendly options you can save out of Photoshop or other image editors – JPEG and PNG. But how do you decide which you should save your image as?
A simple rule of thumb is whether or not your image needs to have a transparent background. For instance, if you want something to appear as if it is cut out, floating on top of a background – and have the ability to change that background color on your website – you’ll want to save a PNG. One of the most common PNGs you’d include on your website would be your logo. However, if you’re uploading an image that is a rectangle or square shape where the background is included, you can save the image as a JPEG.
The main thing to keep in mind with PNGs or with JPEGs is how you’re going to use the image. Even if your image is a circle with the background, you’ll need to save it as a PNG because images need to be four-sided. Transparent background means you save a PNG. Otherwise, you can use a JPEG.
If you’ve run a website you’ve built recently through Google PageSpeed, you’ve probably seen them recommend next gen formats like WebP to improve your page speed. The problem with WebP is that Apple, notably Safari, doesn’t support or recognize them. You also can’t upload a WebP image to a WordPress media library. However, you can use a plugin like ShortPixel, Imagify, or Optimole to serve a WebP version when it will work and serve the PNG or JPEG as a fallback when it won’t. Kinsta has a great article taking you through the advantages of each plugin that you can check out if you want to dig more into WebP.
Choosing the Right Image Size
Now that you know what to save your image as, and how, what size should you make it? I see clients frequently struggle with this, uploading the full size image of 4000 pixels. The problem with that is it becomes so huge that generally your website will try to shrink it to fit, which makes your website load slowly.
One trick I teach my clients is if you’re replacing an image on your website, find the image you’re replacing in the media library, and double check that size. However, if you don’t have an image that you’re replacing, how do you know what size to make it?
Most desktop monitors won’t be a lot larger than 2000 pixels wide, so depending on my market I size images that I want to stretch across the full screen to be about 2000 pixels wide. If you want the image to stretch across half the screen, then 1000. That’s a good place to start and helps you get the images down to something much more manageable for your website to load and shrink. This is also great for responsiveness, because while your phones are serving a much smaller image, you’re not forcing the browser to load an image at 400 pixels wide that started at 4,000.
What You Name Your Image Files Matters
When you’re saving these images out, I want to point out that it’s super important what you’re naming these files. You don’t want to just stick with DCIM-0138.jpg. You want to name that image file something descriptive of what is in the image, and include dashes between separate words.
The file name is literally the first signal to Google of what is in your image, which is great for your SEO. After all, Google can’t actually see your images, so it uses the file names to “see” them and serve the correct images up as search results.
When you name your images correctly, it also makes it super easy to create your ALT text when you load your images into your website.
Optimizing Your Images on Your Website
Once your images are saved correctly, in the right format, with a good filename structure, you’re ready to upload them to your website.
The first thing you should do with that image, whether you write the code yourself or use a Content Management System like WordPress, is to add the ALT text.
ALT text is a simple part of the image tag that is meant to describe what is in the image and what it’s about. For instance, if you’re uploading an image that is a red Ford F-150, you’d want your filename to be red-ford-f150.jpg and your ALT text to be Red Ford F150. ALT text is the secondary thing Google reads to know what is in your image, and ALT text is also a great way to get some appropriate keywords into your website. However, don’t get tempted to keyword stuff those; they need to make sense! Don’t add a bunch of keywords for the sake of it.
Just like Google can’t see, ALT text is super important for accessibility. When you get a browser who is visiting your website using a screen reader, the screen reader will “read” what is in that image to your user from the ALT text. The worst thing you can do is not have any at all, but just as bad is to not be descriptive with your ALT text.
Take it One Step Further
There’s a lot you can do with image compression plugins like those mentioned above to better serve your images on your website. Images, after all, can be one of the first things that drag down how fast a website loads and Google does care about your page speed when it’s factoring your on-page SEO results.
If you don’t use WordPress or don’t want to install another plugin, those 4 steps above will improve your SEO, your user experience, and make your website far more inclusive.
Simple steps go a long way in optimizing your website for all of your visitors.
Want to make it even easier? Grab my free Image Optimization Checklist!