Website images: SEO and WordPress sizing

originally posted July 2, 2021; 
no text revisions to date— 

Search Engine Optimization (SEO) and use of keywords and phrases often enters consideration when writing web page text or content for a blog post. But, it should also be a planned part of selecting, preparing, and posting online images—that’s right: with improvements to the abilities of search engines to identify and analyze images, and their parts, web designers and content writers should no longer ignore images as a part of SEO-related tasks or the overall user experience. However, to count towards SEO without weighing down load times, images (we will not address videos in this post) must be treated in specific ways, with the primary goal being to serve up a balance of

meaningful information,
acceptable quality, and
beneficial metadata,

all while calculating the lowest file size (which will speed up page-load speed) for delivery. This can all be done, of course, but the process takes practice and deliberateness.

An interesting fact: as of November 2018 (the latest wide-ranging study the-website-editor could find), images made up an average of 21 percent of web page weight. That’s not really surprising when we consider that the use of images has become more frequent—some would say even more necessary, given that few people would read a straight-text web page or blog post, and even fewer would buy a product without seeing an example of how it looks—over recent years and that the images used have had to improve in quality.

But, why does any of this matter?

Web page weight, or size, matters because it correlates with load times and, therefore, how quickly visitors can access your content. Other elements that have to also load include HTML data, which includes your page’s actual text content, and all other linked resources, such as your site’s favicon, its CSS and font files, and any JavaScript used; but, images are often the largest part of this equation. By the way, according to research, page size has increased steadily for several years.

So, let’s get into improving load times along with your image SEO, which can be attacked together almost as easily as the chores can be handled separately. Continue reading this post if you want the full scoop as we see it; if several scrolls and more than a few minutes seems too long, just read what you don’t know about by following the links below (you can also print this PDF version and make your own notations while reading at your own pace):

file formats
file size
image size
compression formats
copyright issues
image file name
image title, description, and alt text
lazy loading
image site map

Note that the initial steps should be done before uploading image files to your website.

File formats

First of all, choose the correct file format for the type of image you’re wanting to use. This is an important decision, and, unfortunately, one size, or format, does not fit all circumstances. Basically, the file format depends on the image’s starting type (photograph, illustration, or other graphic) and how and where it will be used on your web page or website. Choosing the correct file type for your images can automatically reduce their weight and impact on load time.

You will likely save the vast majority of images as either JPEG (or JPG) or PNG—these two file types are used by 72 percent and 77 percent, respectively, of websites. But, other common file types for web images are WebP, SVG, BMP (Bitmap), PDF, ICO, and GIF. Brief definitions and general circumstances for use are provided below:

  • The key advantages of JPEG (also abbreviated JPG, an older file extension name and acronym for the same format) files are that  (1) the format balances color quality and clarity with a modest file size and  (2) it is supported by virtually every browser and operating system (OS), and by most social media platforms—some that, by the way, automatically turn uploaded image files into JPEGs. The JPEG format is a raster-based file format (sometimes called a bitmap graphic), a type of digital format that uses colored pixels arranged in a grid formation to represent an image. Due to this construction, the JPEG format is, in most cases, the best option for reducing the weight/size of an image file (briefly, redundant pixels are eliminated and combined during the compression process, explained more fully below; any resulting loss in quality is slight, to a point—even unnoticeable—while the file’s weight savings is significant). Though the JPEG format may be preferred for balancing color and detail with the image’s file size and weight, this format should not be used for saving detailed images or for instances like infographics, which tend to have a lot of small text, or tutorial screenshots, where legible text is key. As a side note, you cannot regain any image data that has already been lost during JPEG compression, even by converting a JPEG to a PNG file—if you decide the image has suffered noticeable loss, you have to revert to an original (or raw) version.
  • PNGs are another raster-based graphics format with universal browser and OS support, but—unlike JPEGs, which use “lossy” compression (see below for information)—this file type supports “lossless” compression, which sacrifices some reduction in file weight and size to preserve graphic information that maintains more detail and more contrast between colors. This makes PNG a better choice for drawings, infographics, banners, screenshots, and other graphics and visuals that include text. In general, PNGs should not be used for high-resolution photos as the resulting files might be too large for web use; that said, with proper website configurations, since PNG does use lossless compression, it is sometimes preferred by designers and photographers to showcase high-quality pictures on portfolio websites. In addition, use the PNG format if you want to preserve a transparent background. As referenced above, you can convert a PNG into a JPEG at any point.
  • WebP is a modern, “next-gen” image format that can reduce the size and weight of images over and above both JPEG and PNG compression formats. WebP does so by supporting both lossy and lossless compression. With lossy compression, for example, on a JPEG image, WebP can further reduce the JPEG file size by 25 to 34 percent; with lossless compression and a PNG image, the size can be an average of 26 percent smaller. The problem is that WebP is not yet supported by all browsers and image editors. Because it is not universal, WordPress CMS has not included the format in its base code, either; however, a few WordPress plugins are available through the CMS dashboard. These plugins can be configured to apply the appropriate compression technique and deliver images in the WebP format when possible, while still delivering the appropriate formats to legacy browsers. Watch your technical bulletins for information!
  • SVG files are scalable vector files (unlike raster-based graphics, vector graphics are made up of mathematical formulas that define a path for shaping an object) and are perfect for the fine, clean lines of icons, logos, graphs, charts, and simple illustrations. SVG images are managed using illustration software (though not most image editors), CSS, or JavaScript and can be scaled and resized without losing quality. Supported by all major browsers, SVG files are small and “light” (in weight) and allow loss-free scaling. The SVG format is used by 27 percent of websites.
  • The BMP, or bitmap, format, though supported by all major browsers, is generally considered an outdated image format because it allows little to no compression (in simple terms, that’s because each pixel carries a degree of its own raster-based separate coding). This excess in coding means BMP files can easily become extremely large and impractical to store and transfer. The true advantage of this format is in storing raw images for archival purposes and image processing.
  • While not really an “image” file, PDFs can be used to save and transfer illustrations and photos, as well as text-based documents. PDFs are often the best option for interactive documents, visual reports, or infographics. They are also the perfect solution for assuring that visitors can print web page content.
  • They have other uses in other digital arenas, but in the online world, the ICO file format is commonly used to store a favicon image, a small website logo that may appear in various areas of a web browser—the address bar, a URL bookmark, and a web page tab. The favicon.ico image file must be 16 x 16 pixels and stored in the root directory of a website in order for browsers to find and utilize it.
  • Among the oldest file types—they date to 1987—animated GIF images have made a comeback and are the number 1 choice for sharing animations on websites. GIFs are raster based and use lossless compression to constrain image size to 8 bits per pixel and a palette of 256 colors—a result that can limit image quality but yield small and internet-friendly transfers. Considered amateurish in some circles, at least for website use, GIFs are extremely popular on social media posts.

Just for the record, many file types used to create and manipulate image files are not suitable for direct use on the web; these include TIFF, EPS, PSD (Photoshop images), AI (Adobe Illustrator pieces), INDD (InDesign files), XCF (eXperimental Computing Facility), and any “raw” image formats. In addition, the HEIF (High Efficiency Image File) format, used by some newer phones and other devices to store photos in higher quality than JPEG files, is not supported by any major web browsers at this time, and a new format known as JPEG-2000—while it may be the next best coding standard for digital images—is currently supported only by the Safari browser.

File size

The second consideration (which we alluded to in some discussions about file compression above) 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 above, 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 above 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 your 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 also installed and purchased credits for ShortPixel (a review; not an affiliate link), a plugin that seamlessly and quickly optimizes images automatically during the upload process.

Image size

Resizing an image is another quick and easy way to reduce its 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.

Compression formats

After touching on this step above, I thought a little deeper look at the two types of compression technology might help differentiate them; if you’re not interested, you can skip over this section.

Lossy compression is the greatest way to reduce the file size of an image because the process permanently removes pieces of data that actually create the image; initially, that missing data doesn’t appear to make much of a difference in image quality—if done correctly. However, if done incorrectly or taken a little too far, you will be able to see degradation—a reduction in color quality, contrast, and sharpness—or what some refer to as pixelation. Know that you can’t reverse this process; your only recourse is to start over with the original image file again. As noted earlier, JPEGs and GIFs are both lossy image formats.

The second form of image-file compression mentioned above is lossless. Lossless compression, unlike lossy, doesn’t reduce the quality of an image because the process removes supplementary metadata—not pieces of the actual image that impact quality but automatically generated, unnecessary informational data that is produced and attached by devices while capturing, and later manipulating, the image. The biggest drawback to this process is that it does not result in a significant reduction in file size. PNG images are the most popular lossless files. These files can be saved and resaved with no loss in quality. They can also be saved, in final form, as JPEGs if desired.

Be aware that technologies in this area are constantly changing—in fact, some of this information may already be out of date!

Copyright issues

Though not necessarily a step in the actual optimization of images, this is, nonetheless, a step you should be aware of working into your process: beware of copyright infringement. Equally important is to make sure you don’t use an image that has become trendy or is in common use!

To avoid either circumstance, use reverse image search tools to identify ownership of images and where they have been used. In most cases, search results will  (1) provide you with avenues for seeking permission and publication rights if needed or  (2) enable you to determine if an image is free to use;  (3) they may also provide you with alternate images that are more relevant and safer to use.

If you post an image that breaches any copyright issues, you may be issued a takedown notice under the Digital Millennium Copyright Act (DMCA); you must comply with that notice as quickly as possible. To avoid any legal issues (or the embarrassment of a recognized stock photo), you should always double-check every image you use on your website—or use only original in-house photos or artwork you have created or hired for contract use.

If you do decide to use stock images, a few sites that provide permission-free, royalty-free artwork are Freerange, Pexels, and Unsplash (for even more options, review this post from Snappa; none of these are affiliate links). Even then, be sure to follow the site’s or image’s guidelines for attribution and, at a minimum, provide attribution to the photographer.

Image file name

Once you’ve addressed the above concerns, you are almost ready to upload image files to your website. The last step is to apply an appropriate and SEO-friendly file name to your image. This step is a simple one, but most people do not make it a part of their process; doing so will provide a definite advantage over your competition.

Before uploading an image to your website, rename the file with wording that is related to the image. Include at least one relevant keyword in the file name; if you know the blog post or web page where the image will be used, add at least one more target keyword that applies to that post or page. For consistency and more assured performance, use only lowercase English-alphabet lettering, “Arabic” numbers (0, 1, 2, 3, 4, 5, 6, 7, 8, 9), and hyphens (preferred over underscores) in the name. Characters from other languages, spaces, and other punctuation and characters can upload incorrectly on occasion and may cause unexpected behavior in gallery-rotating or scripting software, as well as older browsers, so avoid them as a rule. Some people also choose to omit articles (a, an, and the) and short prepositions (at, of, for, by, with, and in, for instance) to help shorten the file name.

One last note: Be sure to change only the part of a file name that appears left of the period—the file extension needs to remain JPEG (or JPG), PNG, or whatever file format was used to finalize the image.

Image title, description, and alt text

As soon as you’ve uploaded an image file, so that you do so before you use it, edit the image to include behind-the-scenes text—this is the SEO text (meta tag data) that search engines will use to index an image. Of these tags, alt text is the most important because browsers will pull this text and display it while an image is loading; additionally, it will stay on the page if an image fails to load at all. That being the case, alt text should reveal the intent of the image—why you chose it, why it is there, how it relates to where you positioned it, what it represents on the page: in brief, it should tell the message you want told in case that image doesn’t display. In general, alt text should not exceed 125 characters in length.

Of secondary importance is the image title, which should, in as few words as possible, briefly state the image focus or content or message.

Lastly, the image description—which may repeat the alt text, if nothing else—should (in 280 characters or less) provide more details than alt text, allowing users to learn more about what the image is doing there, information beyond the message provided in alt text. Options for inclusion, if they are relevant, might include names of people in the image and descriptions of what they are doing, emotions that are being conveyed, objects and surroundings, and any text contained in the image.

All of these elements can be used to rank an image for SEO purposes. But, another increasingly important use for alt text and metadata is to assist people with vision impairments who might have trouble distinguishing images on a screen or who may use screen readers in order to access the internet. Screen readers will read any existing metadata out loud, providing essential information, link URLs, and image details.

“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.

Image site map

And, finally, some search engines suggest adding images to your website’s official site map; others suggest creating a separate site map for images that is linked to the primary website map. Alphabet Inc. doesn’t seem to recommend either one over the other, but the corporation’s Q&A forum does state that images with complete metadata will be indexed more thoroughly and rank higher.

Images and SEO

Given the information and steps above, you should be encouraged to think about using an SEO strategy for online images. Images not only enhance the aesthetic appeal of blog posts and websites, but they can add information and become SEO magnets on their own. Still, remember that they should be used sparingly and they should be prepared appropriately so they do not slow down load times, which can result in fewer engaged visitors. And, if you’re going to do that much work, you might as well add a few steps to incorporate SEO components into your web page text or blog content.

Ultimately, the primary goal of your site should be to serve up meaningful information, to increase conversions, and to make an impression! Do that right from the start with practice and deliberateness. 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