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.
I talked about this last week in my Web Dev Speak series on YouTube, but one of the key ways you can speed up your website is by ensuring that your images are optimized.
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 an awesome side benefit to optimizing your images – helping you with your SEO and on-site accessibility. Most of this work happens before you even think about uploading your images to your website.
Optimizing Images When You Save Them
Feel free to watch the full video above, or check out the rest of our recap here below.
Which File Type is Right for Your Image?
The first thing you’ll need to decide when preparing an image for your 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.
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.
This helps Google know what’s in the image, which is great for your SEO. It’s the first signal to Google what is in your image. After all, Google can’t see your images, so it uses this 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.
There’s a lot you can do with image compression plugins to better serve your images on your website, but if you do the steps above, you’ll find your SEO improving, your user experience improving, and your website will be far more inclusive.
Simple steps go a long way in optimizing your website for all of your visitors.
In fact, it’s so simple I’ve created a FREE step-by-step guide for you to use each time you create an image for your website (that includes your blogs!). Just add your email below and get your free download immediately!
