Image optimization has become the elephant in the room on many of my recent projects. Optimizing images takes time and can easily get over looked with all the competing web design elements on the docket.
With the average user having a high density device screen and web page speeds able to load images much faster, image quality expectations are high. We have come to expect high quality, sharp imagery throughout websites.
But What About Meeting the Core Web Vitals Standard?
These high resolution images come at a Core Web Vitals price. That’s right, SEO i.e. Google is paying close attention, as the Largest Contentful Paint is first on the list of Vitals.
Image optimization is often the linchpin between having a great looking website and one that is loading fast and smooth.
The check list for image optimizations can be daunting, but the sooner we start working out these bugs, the easier it gets.
File format, compression, title and alt tags (technically, they’re not tags, they’re attributes) and what about figcaption‘s is just the start of image optimization.
How We Cut Through the Optimization Clutter
Focus on the top five things that you can do to get your images in shipshape.
-
Files Size
A quick easy rule of thumb is keep images below 70kb.
-
Pixel Size
The length and width should be about 2 times the max css width and height. So if the image slider is 800px wide, I would export for web and devices at 1600px wide.
-
Title Tags
Google uses image titles to extract information about the subject matter.
-
Alt Tags
By using them, you describe what that image is for someone who can’t see it for any reason. Alt’s also helps strengthen your contents message with search engine spiders.
-
File Name
Having relative file names also helps build on SEO, by giving clues about the subject matter.
Conclusion
By addressing these five key image optimizations you can rest assured that your images aren’t holding back your websites SEO.