Image file formats for web use

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

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 first installation, you will learn about current image-file formats recommended for use on the web.

File formats

Before uploading image files to your website, the first step is to choose its correct file format for the type of image you’re wanting to use. Unfortunately, this is an important decision, and 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) that 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, each pixel carries a degree of its own raster-based separate coding). That 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 web use; 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, yet, 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.

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 this section or move to the next post.

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 unnecessary metadata—not pieces of the actual image that impact quality but automatically generated informational data that is produced and attached by devices while capturing, and later manipulating, the image. The biggest drawback to this process is that you won’t see 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.

For deeper discussions on compression, the process and its uses, search the internet—technologies in this area are constantly changing (some of this information may already be out of date).

What’s next?

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 with file size and “lazy loading.”

At the-website-editor, we can suggest ways to organize your website and outline locations for information, aid 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 assist with wording for metatags like image descriptions and alt text.

Get in touch and see exactly how we can help with your project . . .

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, feel free to like or share this post
or to leave a comment—all from our growing Facebook presence.

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