originally posted July 9, 2021;
no text revisions to date—
Unless you arrived at this post from another website, blog, or search engine, you know that the information in this post is only 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
Refer to those links or read on to learn about the impacts of an image’s appearance size and how to adjust to different configurations.
Image size
In addition to using the correct file format and compressing image files, resizing an image before uploading it is another quick and easy way to reduce file size—but don’t expect a large savings. As a rule of thumb, you should make sure all original images uploaded for use on your site are only as large as they need to be. According to many web designers, that means if your website’s maximum margin or screen-presentation width is 1200 px, you need no images wider than that. In general, find a happy medium, perhaps two or three times your website’s column width, for most of your original images; or, if your CMS theme has specified sizes for certain types of images or for certain image locations on a web page, note those. (On the other hand, if images are more important to your site, if you want to supply images for retina-class displays, or if you just want more detail into this process, you might want to follow more closely the measurements and advice given at this more technical page of FloThemes for WordPress; the page also discusses using Adobe Lightroom for image manipulation.)
But, how will adjusting image size help minimize page-load times and enhance the user experience?
The answer to that question requires a look at behind-the-scenes technology. You see, once an original image file is uploaded to a website and then called up for use, browsers will try to adapt it and present an appropriately sized version of that image to a visitor’s device. WordPress, to use this CMS as an illustration, serves up appropriate sizes by having a variety of sizes readily available in the Media Library—in fact, by default, the CMS creates three different sizes of every original image each time you upload a file to the library (and remember, this step would follow your basic optimization steps). In reality, then, you end up with four images in the library for every one image you upload:
the original “full” size image file (see above);
a thumbnail (a square of 150 px by default);
a medium size (with a maximum width or height of 300 px by default); and
a “large” size (with a maximum width or height of 1024 px by default).
WordPress creates all these different sizes so that it can serve, or display, an image in the most appropriate size for each visitor, based on that visitor’s browser and device. If that visitor is using a desktop and full-size monitor, for example, WordPress will serve up the large version or the full-size original (as a side note, “large” versions are often used as the Featured Image on a desktop); if a visitor is using a tablet or iPad, the medium size will likely be called; and if a smartphone is being used, the thumbnail, or smallest version, of an image will be called up for display.
Since those three variant sizes will be based on your original, it should be uploaded at the best size and the best resolution possible. And that is why you should make every effort to upload original images in the largest size you will need. Doing so means this process works optimally, and the image that is presented has the best possible resolution. Two ways to change an image’s actual size:
- scaling, or “shrinking” it—changing the physical dimensions proportionally; and
- cropping, or cutting out, permanently, a portion of it.
These actions are best done as part of the optimizing process, before images are uploaded to a website. At the-website-editor, we generally use Canva or Image2Go (not affiliate links) over other image manipulation programs. While best done before uploading image files, a degree of scaling and cropping can be accomplished in the Media Library of WordPress, if that is your CMS of choice, after uploading.
Preparing to upload images
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 image copyrights, permissions, and royalties.
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
