Wanna know why optimizing your images is so important?
Because humongous, full-resolution images are usually the worst offender when it comes to slowing down your website!
So allow me to get on my web designer soap box: This is me begging you to stop uploading giant image files to your website. I’m here to show you how to optimize your website images to ensure your site doesn’t get bogged down by those gorgeous photos of yours.
Why is this so important? Because page speed (which is how fast your website pages load) is one of Google’s top ranking factors! The speed of your site *directly affects* how well you rank on search engines. And not only that, but snappy load times are also key to keeping visitors engaged. If your website takes too long to load (we’re talking more than 1–3 seconds, max) your potential clients are gonna bounce right off. #buhbye
One of the most effective ways to speed up your site is to optimize the images across your entire website and blog (which benefits you across both desktop and mobile). But don’t fret, because I promise it's not super techy or complicated. I’ll even show you how to tackle your image SEO in the form of alt tags.
Ready to optimize your website’s photos? Here's my simple 3-step process to compressing and optimizing your images before uploading them to your website or blog.
Before we dive in…
What Do “Compress” and “Optimize Your Images” Mean?
The phrase "compress your images" is just a fancy way of saying "make your photos smaller". The first way to do this is to reduce the actual dimensions (pixels/inch) of your photo. The second way is to bring the file size down. File size is measured in “bytes” and refers to how much data the file contains (which affects how much computer storage it consumes and how quickly it loads!).
Optimizing your images refers to the compression step above, but also taking this a step further by optimizing your images for search engines. Yep, SEO applies to your photos, too! We’ll tackle this part in Step 3.
Step 1 → Reduce The Size Of Your Photos
The goal here is to reduce the size of your website images without sacrificing the quality. It’s doable, promise!
The file size of each image on your website should be in the KBs – not the MBs! To accomplish this, make sure your photos are no larger than 1500–2500px on the largest side, max. (I only recommend the higher end of that spectrum for big splash images that span the width of a website).
A good rule of thumb is to make images around 1.5x larger than they'll actually appear on your website. So if you want an image to display on your website at 600px wide, resize the original image to around 900px wide. Once you get it onto your website and resize it to 600px, it will be clear, crisp, and gorgeous.
I normally make photos smaller by reducing the image size in PhotoShop, but you can also use Preview > Tools > Adjust Size if you're on a Mac. There are also free image resizing tools available online, like this one from Adobe Photoshop Express.
Step 2 → Compress Your Images For Web
Now that you’ve made the actual dimensions of the photo smaller, you'll also want to further compress the file size of each image for web – which removes any unnecessary metadata that bulks up the file size.
I recommend using PhotoShop or with a free website like tinypng.com. The great thing about these tools is that they'll reduce file size without sacrificing quality!
Step 3 → Optimize For Search Engines
Image File Names
Give your website images a short-yet-descriptive, keyword-rich file name. Google "reads" the file name of your images, so it's great for SEO! It also ups the chances your photos will be served up in the results of a Google Image Search, which is #goals.
So instead of your photo file names being something like img205.jpg, name the file something descriptive. This will help add context to your images so that Google can better understand and rank them. It’s also a good practice to separate the file name words with hyphens to assist Google even further in picking up what you’re putting down.
- Example: colorful-visual-branding.jpg
Image Alt Tags
You’ll also want to optimize the alt tags of each image in your website builder. What exactly IS an alt tag? Alt tag is short for "alternative text" and it is the text we use on the back-end of a website to describe the images displayed.
Why do we need this descriptive text? A few reasons!
- It is primarily used for accessibility: to help visually-impaired website users better understand the content of an image via screen readers.
- It’s used for SEO: to better help Google and other search engines understand the context of an image so they can index and rank it for the right search terms.
- It serves as a backup for the times an image file fails to load. In lieu of a photo, the alt text may be displayed.
You’ll need to figure out where exactly to put the alt text in your website builder (simply Google something like, “where to put alt text in squarespace”), but here are some best practices:
- Keep it informative yet concise! Alt text should be limited to 100–125 characters max.
- Describe the image, but use your own targeted keywords where it makes sense. Oftentimes I'll use a pipe character after my alt text description followed by my company name. This ensures that I'm describing the image, but ALSO optimizing my work for relevant or branded searches.
- Example: Colorful visual brand identity for a wedding videographer | Absolute JEM
- That being said, avoid keyword stuffing. Yes, you can put your company name at the end of your alt text, but don’t fill the alt text with keywords that don’t apply to the image.
⬥
This task may sound overwhelming, but I promise that every little KB saved can help boost your site speed, boost your search engine ranking, *and* improve your user experience. #triplethreat
Break up this project by just tackling one section of your website at a time. You got this!
