originally posted July 9, 2021;
no text revisions to date—
As you know by now, unless you’ve just arrived at this post out of the blue, the information in this post is just one part of a larger, more in-depth look at Search Engine Optimization, or SEO, for images (not videos) to be used online. As part of that discussion, the-website-editor divided the process into these following steps:
file formats and compression
file size and “lazy loading”
image size
copyright issues
image metadata: file name, image title, description, and alt text
with image site map
To learn more, refer to those links or read on. In this installation, you will learn about the importance of image-file sizes and how to make adjustments.
File size
The second consideration (which we alluded to in some discussions about file compression) for optimizing image files before uploading them is to officially reduce each image’s file size. Keeping file sizes small and light allows faster page-load times and can entice website visitors to explore a site instead of punching the go-back arrow to search elsewhere.
No hard and fast rules define the perfect image file size. However, we’ve found it is generally best to keep all images under 100 kilobytes (abbreviated kB or KB) if possible; anything more than a few hundred kB, especially if a page contains more than one image, can slow down your web page load time—and even fractions of a second can make a difference to today’s visitors.
As you learned earlier, JPEGs are, in general, the best choice for saving a majority of images because the format most often provides the best quality for the smallest file size; but use the additional guidance provided there and experiment with alternatives to discover which format indeed yields the best quality for the smallest file size and fastest load time. If you do not have access to an image editor of your own, subscribe to Canva (an online, web-based editor; this is not an affiliate link), upload an image, do any edits you wish, and resave the image for download—this will trigger a menu for saving as a JPEG, PNG, SVG, PDF, or other format. Once the image has downloaded, you can see the file size and tell if you need to try another format; if necessary, you can upload that image file more than once and resave it for download again.
Other online compression services we use on our websites and can recommend are (and none of these are affiliate links, either)
- Optimizilla online image optimizer;
- Image2Go, which has other online image editing solutions as well as its own image compressor; and
- TinyPNG, which can actually compress JPEG, as well as PNG, images and save transparency on PNGs.
Be careful of ads on some of these websites—they can look to be deceivingly complementary to the service site! On the WordPress back end, we have also installed and purchased credits for ShortPixel (links to a review; not an affiliate or company link), a plugin that seamlessly and quickly optimizes images automatically during the upload process.
“Lazy loading”
Lazy loading is an optional page-loading technique that allows web page text and “above the fold” images to load as usual but delays the rendering of other images, videos, and GIFs until a visitor scrolls to the part of a page (“below the fold”) where that element is actually needed. By postponing the loading of these elements until a page visitor scrolls to its location, lazy loading helps pages load faster. And, remember: when your website appears to load faster, visitors have a better user experience; in addition, lazy loading can provide an SEO boost, partially because it forces alt text to load.
Up-to-date versions of WordPress CMS include lazy loading as part of the core program; before that, the attribute was only possible with installation of a plugin. Two free plugins that Kinsta web hosting recommended were a3LazyLoad and LazyLoad (by WP Rocket); both of these still provide additional functionality to the core installation.
Physical (or virtual) image size
As mentioned in the opening paragraphs, this post is only one part of our larger discussion about image SEO practices; venture to that longer post or download this PDF version; or, to read somewhat sequentially, continue and learn about the impacts of image size.
At the-website-editor, we can suggest ways to organize your website and outline locations for information, assist in developing individual web pages, and help you craft text, primarily for content blocks. We no longer do much with design of the site or image research, but we can aid with wording for metatags like image descriptions and alt text.
Did we miss any details or forget to add something? Let us know . . .
Stephen, the-freelance-editor,
where we work with our clients to help them say
what they want to say to the audience they want to reach.
Contact us, even when you just think you might be needing us!
And, please like or share this post or leave a comment—
on any of our growing social media outlets.
the-website-editor and the-blog-editor are divisions of the-freelance-editor.com.
image information: Featured image made from scratch by the-freelance-editor using Canva, Optimizilla online image optimizer, TinyPNG/TinyJPG, and tools in the WordPress Media Library
