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.
A quick easy rule of thumb is keep images below 70kb.
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.
Google uses image titles to extract information about the subject matter.
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.
Having relative file names also helps build on SEO, by giving clues about the subject matter.
By addressing these five key image optimizations you can rest assured that your images aren’t holding back your websites SEO.