Optimizing Images On A Website

Oct 30

**An AI Generated Image Of An Engineer Optimizing Images For A Website**

Starting a new website brings with it an opportunity to try new things and refine old things - including the processes that you use to build that website.

Here is how I recommend optimizing your images for the web:

Use unique images. I like using Pixabay.com for stock images, but shooting or creating your own unique images is a great way to help your website stand out.
Image size. An iPhone 11 shoots photos in 4032 x 3024 pixels. If you need a thumbnail image, or even a website banner image, this is far too large. Search your website documentation for recommended image sizes (for example, Squarespace suggests that a high-quality banner image should be between 1500 and 2500 pixels wide) A thumbnail might only need to be 100px square. You can use the page ruler browser extension to see how many pixels your images display at on a screen. I’ve just started using this, and I’m going to be testing if the measurements are the same across different computers and screen sizes. So far they seem to be.
Image format. JPG or PNG is probably best. Some websites will let you use different formats such as webp, svg, tiff that may or may not be smaller or higher quality. But, these can be difficult to produce. I like jpegs for photos and png for illustrations.
Image file size. Websites don’t need 300dpi images. Shrink the file size as much as you can while still maintaining good quality. Photoshop has a ‘save for web’ option, but some other tools might be crush.pics, squoosh.app, or imagecompressor.com. Using a tool like websitegrader or GTMetrix will tell you if your images are too large and slowing down page speed.
Image file name. - the file name should be reflecting of what’s in the image. “tree-g828614642_1280.jpg” is a beautiful photo, but “beautiful-sunset-behind-tree.jpg” is more search engine friendly. Separate words with hyphens like you would in a URL.
Alt tags. - Make sure to use these. In addition to the search engine benefits, these tags are also used for accessibility purposes. An alt tag should describe the image, not just reinforce keywords.
Geotagging. - You can use https://www.geoimgr.com/ to add geotag locations to your photos for local SEO purposes. Use the location of your business, if appropriate.
This has been debunked as an ‘SEO hack’ so I wouldn’t suggest this for EVERY photo on your site (geotagging the race car photo from this blog post as being from Regina, Canada would likely hurt rather than help), but I would definitely do this for any photos of your physical location. For example, an exterior shot of your business, or interior shots of your gym business, doctor’s office, retail store, etc.
While you’re at it, don’t forget to also add those unique photos to Google Maps.
Links. - Make your images clickable. If the link takes someone away from your website, don’t forget to make it open in a new window so you aren’t giving your traffic away.
Pinterest. Pinterest can be a secret weapon - load unique and relevant images to Pinterest and link them back to the appropriate pages on your website.
Sitemaps. - Make sure that you’re using sitemaps and submitting them to Google. If you don’t know if you are or not, explore Yoast SEO for WordPress and dig around in your website documentation. For example, Squarespace makes great sitemaps out of the box. And don’t forget to link them to your Google Search Console.
Add structured data to images. This is more advanced, so I recommend checking out Google Search Central for the details.

Do I do all of these? No. Should I? Yes.

If you’re a wizard with the right-click ‘view source’ function of Chrome, you may notice that I haven’t always followed these rules. Sometimes it looks like I flaunt the rules on purpose. And that leads me to what is perhaps the biggest hack for improving images on the web:

Take your time. Slow down, think things through, make a plan, and execute. The best quality content, the best pictures, will not perform as well as good quality content that is promoted thoroughly and thoughtfully.

Now, if you’ll excuse me, I need to fix all of the images on my site.