built with Readz
RESOURCES TO BOOST YOUR ONLINE CREATION AND PUBLISHING PROCESS
Stay in the know
Actionable advice on how to create better content & design, delivered to your inbox.
No charge. Unsubscribe anytime.
< BACK TO OVERVIEW
Create Content Experiences.

Better. Faster.

/ / newsletters
/ / white papers
/ / magazines
/ / content hubs
/ / annual reports
/ / brochures
closebuttonblack
NO COMMITMENT REQUIRED - IT'S FREE !
Hi, we really should talk!
We'd love to introduce you to Readz, the publishing platform used by IBM, Nike, Deloitte, Aon, and many more. Hop on the phone with one of our publishing consultants and get customized advice on how to get started.
best image format for the web

Guide: Best Image Formats For Web Pages

What works best? PNG, JPEG, SVG,...
And what about WebP and the likes?

Images play an important part in web design. The purpose of using images on web pages ranges from conveying information, communicating a message, storytelling, and illustrating a point to evoking emotions and fostering a connection with website visitors. Because there are many different use cases and various types of images web designers might want to include, there is more than one way to prepare images for web pages. In essence, the best image format for web pages comes down to first choosing the right file format and then optimizing the images. This enables you to achieve the best balance between quality and file size to keep the load times low and round out the user experience. In this article, we look at five image formats for websites:
  • JPG
  • GIF
  • PNG
  • SVG
  • WebP
We’ll introduce the various file formats with their properties, advantages and disadvantages, and best use cases. We’ll also address best practices and show you how to optimize images. But first, let’s clarify some basics!

File Formats For Website Images

Basic Terms

Vector image (left) vs. raster image (right) (source).
Quality settings when saving a JPEG within Adobe Photoshop.
Any raster image consists of dots, which you’ll also know as pixels, arranged in a grid. Within this grid, each pixel has an assigned color. The size of the grid relates to the size and the dimensions of the image, which means raster images depend on the resolution. They exist at the one size at which they were created or originally recorded, in the case of a photograph. Transforming a raster image means shrinking or enlarging the grid. Blowing up a raster image to larger dimensions is done by stretching the grid. This results in larger individual pixels, which is why the image becomes blurry or “pixelated”. Manipulating the size of a raster image always incurs a loss: downsizing will drop individual pixels, upsizing will stretch them, reducing quality in both cases. Raster images are, therefore “lossy.”

Raster Images

A vector image is inherently a digital artwork defined by points, not by pixels, which are connected through lines and curves. These can be calculated and assigned styles such as color, thickness, or stroke. In that way, shapes represented by mathematical equations then become visible on a screen or can be used for printing. The points, lines, and curves defining a vector image are all relative to each other. When you stretch such an image, the individual distances stretch as well, maintaining proportions. This makes vector images independent of the resolution: they can be created at one size and displayed at another without loss of information or quality. The render of underlying data will always be crisp and perfect, making these image formats lossless.

Vector Images

Eliminate Unnecessary Images

Only serve an image in your design when it’s the best way to achieve the desired effect at the best performance level. You can eliminate any image when typography, CSS effects or animations work just as well. A particular case is always text in images, which delivers a poor user experience and creates accessibility issues. Text encoded in an image cannot be searched, doesn’t scale, and cannot be selected.

Vector vs. Raster Images

Let’s recap: vector images are resolution-independent and work well with responsive design. They’re ideal for geometric shapes and user interface elements. Raster images are the best choice for photographs and complex images with many shapes, high in detail, or many colors.

Optimizing Vector Images

The best format for serving vector images is SVG, which uses a markup language to describe the image. This description can be “minified” and compressed to reduce the size. The markup can be placed in a file or embedded directly in the page’s code. Minifying SVG images removes unnecessary information in the code, metadata consisting of layer information, comments, and empty namespaces, all of which are not required to display the image. Compression achieves a lower size for transfer by “zipping” the plain text drawing instructions into a smaller package.

Optimizing Raster Images

Remember that a raster image consists of a grid of pixels with color and transparency information. If these bits are stored individually, they quickly add up to large file sizes. A small picture of 100 by 100 pixels consists of 10,000 pixels, after all. Image compression works by saving less information, for example by reducing the number of colors in the palette. More sophisticated encoding compares neighboring and nearby pixels to find similar color values and just record the difference instead of the full information. As the distance between “neighbors” increases, the blocks become bigger; the algorithm can then use different settings for different blocks. At a high-quality level, this remains invisible, at a lower quality level, it can result in the typical JPEG blocks or compression artifacts. The take-away for you as a designer is that there is no single best format or quality setting for all raster images but rather a unique result for each image and applied compression. But for nearly all images, at least some pixel data can be discarded, resulting in a lower file size. Use your own judgment to choose between aggressive lossy optimization, high fidelity, and optimal load time.
  1. Do you need animation? GIF is universal for animation, but consider using the newer APNG.
  2. Do you need high-resolution images with fine details?
    • Use PNG, which does not apply lossy compression beyond the size of the color palette. You’ll get images of high quality at the cost of larger file sizes.
    • For high-quality geometric shapes and lives without raster image information, SVG is the format of choice.
    • PNG is better than JPEG for text-only images, but reconsider using web font typography instead.
  3. Are you serving a photo or a similar image? Use a JPEG file with its combination of lossy and lossless compression to achieve an optimal file size. Try several quality levels to find the tradeoff.

Choose The Right Format

Effective image optimization for the web also means serving images at the intended size or at least close to it. If you transmit a large image only for it to be resized in the browser to a smaller version and displayed at a lower resolution, you are wasting pixels. Serving unnecessary pixels creates overhead, both during the transmission as well as a CPU load during the browser-based resizing. For example, serving an image of 810 by 810 pixels to display it at 800 by 800 pixels already created 16,100 “unnecessary” pixels.

Scaling

Each design case and webpage is different, but there are widely used image formats and established optimization techniques to achieve optimal load times. In summary, keep the following in mind when working on website images:
  • Prioritize vector formats where possible. Because they scale and don’t depend on resolution, vector images are perfect for responsive and device-independent design.
  • Compression for vector assets: SVG files can be compressed and “minified”, and metadata by drawing applications can often be removed.
  • JPEG is still the photography format, so use that format for photographs of large dimensions and rich in color.
  • Use PNGs for screenshots, text-heavy graphics, and images with a transparent background.
  • Don’t be afraid to experiment with quality settings for raster images and limit yourself to a quality setting you consider “safe”. Where often, a lower quality setting still yields excellent results at much lower file sizes.
  • Raster image metadata such as camera and geolocation information can mostly be stripped for use on the web.
  • Scaling: Resize images on the server and serve pictures at a “display” size close to the “natural” size. Large images always account for the highest load, either in transmission or in prior scaling.
  • GIF is an obsolete format, so treat it as such.
  • Don’t use WebP images at the moment if you cannot implement a compatibility check and backup solution for incompatible browsers.
  • Automate your processes for preparing images for the web as much as possible and ensure all assets are optimized equally.

Checklist: Image Formats For the Web

In the following, we’ll define some properties and terms regarding images so you can easily distinguish different types.
Pixelation is a visible loss of quality when enlarging a raster image.
Many images on the web are raster images: photographs, artwork, banners, logos, ads, social media content, and graphics inserted into emails, for example.
Vector images are scalable and maintain their appearance when enlarged.
Vector images are commonly used for logos, icons, illustration, or lettering. On the web, diagrams, interface elements, infographics, scalable logos, and sometimes interactive graphics or illustrations use vector images.
A scaled image where individual pixels become visible (source).

Scalability

Scalability means you can resize an image with acceptable results. Since vector images exist as a series of drawing commands and data, they can scale to any desired size. By contrast, raster images can be scaled, even ad-hoc upon rendering a web page, but not without the downside of loss of quality. To address this issue, web designers often include various sizes of an individual image, for example as a thumbnail, medium, and large.
Left to right: A PNG of 16M colors, 128 colors, and 32 colors. Complex photos require larger palettes to avoid artifacts, but a large palette for just a few colors is a wasted resource (source).

Compression

The complexity of a vector image is defined by the number of individual points and elements required to render, not by its dimensions. For a raster image, larger dimensions mean more pixels with individual color attributes, therefore higher complexity and larger file size as well. Vector images tend to be of comparably small file size because it’s possible to simplify the required drawing instructions. For raster images on the web, designers might want to reduce the total file size while maintaining the dimensions. This is called image compression.
Above, we already mentioned lossy and lossless image formats. These correspond to the two methods for compressing images:
  • Lossy compression reduces the image file size by discarding data, altering the image: the decompression version will be different from the original, so there is a loss - hence the name. The discarded data is often in the invisible or barely visible range, resulting in an acceptable ratio between quality and compression. The advantage is that you can achieve dramatic file size reductions. On the downside, the decrease in picture quality eventually becomes visible and some images are more suitable for compression than others.
  • Lossless compression is able to reduce an image’s file size without affecting quality. In other words, the decompressed image is the same as the original. However, it’s harder to achieve a significant file size reduction with this compression method.
RGB is short for red, green, and blue. This color model is based on light and is used in screen design, which is for web pages and screen applications. CMYK The letters stand for cyan, magenta, yellow, and key (black) and CMYK is a four-color printing process. As a color mode, it's less suitable for web images because the CMYK colorspace is smaller, and converting web images to it results in a loss of information. 

Color Mode

Best For
Still images, colorful photography, generic and low-detail images, low file size. Avoid For
Text only images, diagrams, or charts, some logos due to likely visible compression artifacts.
PRO
CON
Millions of colors, great for photography on the web
Limited scalability
Considerable file size reduction possible, therefore fast load times
No transparency but always solid color background
Compatible with nearly all internet-enabled devices
Visible compression artifacts
A JPEG image with visible compression (source) (CC BY-SA 3.0)
Name: Joint Photographic Expert Group Format: Raster image Extension: .jpg, .jpeg, .jfif, .pjpeg, .pjp Compression: Lossy, but 10x reduction possible without visible loss of quality Scalability: Limited, workaround through various sizes Browser compatibility: Chrome, Edge, Firefox, Internet Explorer, Opera, Safari The name of this image format comes from the Photographic Experts Group, the technical team that developed it. This raster image format features lossy compression, which works quite well for photography. Web designers use JPEG for images with complex colors and shadings like paintings, photographs, and 3-D objects like flowers. Thanks to compression, faster load times and page rendering are possible with JPEG images. The sliding scale compression method can decrease file size considerably, but high compression rates result in increased artifacts, pixelation, and blur. Graphics, drawings, logos, screenshots, or text-heavy images which require sharp lines and definition are less suited for the file format. The JPEG compression works by discarding fine details, controlled by a quality factor, less quality, and less detail. JPEG codifies red, green, and blue in blocks of 8x8 pixels. For photography, a lot of the discarded data is not visible to the human eye (similarly to how audio formats discard data the human ear cannot distinguish). JPEG compression often achieves a file size reduction by a factor of 10 without visible artifacts.

JPEG 

Two versions of the same image on a red background: The JPEG (left) features a visible pink background, while the PNG (right) is fully transparent.
Best For
Screenshots, transparency, logos, icons, UI elements, more scalability than JPEG, text-only images, and small color palettes. Avoid For
Photography, large color palettes, large dimensions due to higher file size.

Transparency
PNG is the format to use when you need high-quality web graphics with a transparent background. The image format has two color modes for this, grayscale with an alpha channel and RGB color with an alpha channel. The alpha sample indicates an opacity for each pixel, so any degree of transparency (think: “see-through”) is possible.
PRO
CON
Transparency
Larger file size
Most widely used lossless image compression format on the web
Not for photographs
Great for graphical elements and screenshots without compression artifacts
Images with a large palette cannot be compressed as effectively
Both images appear identical, but the web PNG saves bytes by removing metadata (source).
Name: Portable Network Graphics Format: Raster image Extension: .png Compression: Lossless and lossy to provide more efficient compression Scalability: Limited, better than JPEG thanks to lossless compression Browser compatibility: Chrome, Edge, Firefox, Internet Explorer, Opera, Safari The Portable Network Graphics format or PNG for short produces raster images. It was developed specifically for screen design and to replace GIF images with an open format with a larger possible palette. PNG uses lossless compression and supports transparency. It lends itself to complicated artworks and can maintain sharp contrast and lines without producing artifacts. PNG is the format of choice for screenshots, diagrams, logos, icons, and other graphical elements. The lossless PNG compression works by mapping pixels to a simple palette. The fewer individual colors an artwork uses, the higher the compression rate which can be achieved. On the flip side, saving photography in PNG format produces larger files.  PNG images feature two possible color depths: 8 bit and 24 bit, or PNG-8 and PNG-24 in short. Complex images with a large palette might require a color depth of 24 bits per pixel, but for most use cases on the web, PNG-8 is optimized for simple colors.

PNG

Best For
Backward compatibility, animated GIFs, small elements, thumbnails. Avoid For
True color images and photography, large dimensions, mostly anything.
PRO
CON
Transparency (on or off)
Only 256 colors
Virtually compatible with all devices and browsers
Maximum dimensions of 65,536 by 65,536 pixels
Lossless compression
Obsolete image format
Through interlacing, GIF can store pixels out of order and images can be displayed at a lower quality while the rest is loaded. This feature was particularly important during the times of slow dial-up internet connections. GIF is an open format, though the LZW compression was covered by patents. Since 2004, GIFs may be used freely, but the format is now obsolete. For all use cases, PNG has succeeded GIF, even allowing for lossless animations through the APNG or Animated Portable Network Graphics format. The most important advantages of PNG over GIF in terms of web design are:
  • Better compression than GIF with as much as 25% difference in file siz
  • File format actively maintained by the W3C
  • Completely lossless compression
  • Real alpha transparency
An animated GIF (source).
Name: Graphics Interchange Format Format: Raster image Extension: .gif Compression: Lossless Scalability: Scaling results in pixelation Browser compatibility: All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari The provider of online services CompuServe introduced the Graphics Interchange Format in 1987. GIFs are raster images with 8-bit color depth and lossless LZW compression. GIF and XBM were the first graphics formats supported by HTML. GIF supports only 256 colors, so converting a photograph or true-color image to GIF always results in loss of quality and dithering or color banding. Despite the low color depth, photography in GIF format can still result in large file sizes. One color of the palette can be designated as transparent, so GIF images can have on-off transparency, in that case with a palette of 255 colors. The features for which GIF is widely known are animations or animated GIFs. An initial full-size frame is followed by a series of images that contain only the changes for each frame, thus achieving a sort of compression and faster load times.

GIF

Best For
Scalable diagrams, icons, line art, vector images, user interface elements, interactive designs. Avoid For
Photography and raster images.
Lossless compression
PRO
CON
Scalability
Not for bitmap information/raster images
Not for photography
Possibility for interactive designs

Scaling is not an issue with SVG as the image will scale smoothly to any desired size. You, therefore, don’t have to know the final render size of the image and SVG is ideal for responsive design. Through altering the drawing instructions, users can even interact with SVG graphics on the web.
An SVG is a range of shapes, lines, and points described in markup language (source).
Name: Scalable Vector Graphics Format: Vector image Extension: .svg Compression: Lossless Scalability: Fully scalable to any dimensions without limitations Browser compatibility: Chrome, Edge, Firefox, Internet Explorer, Opera, Safari SVG is a vector image format that can be scaled to any dimensions without loss of quality when it contains only vector graphics. To understand that better, picture SVG files as text files containing source code or drawing instructions. When these are interpreted by software or the browser, they create shapes, lines, and points and apply colors, filters, and more. In layman’s terms, an SVG file is a recipe for an image, not an image itself. SVG is the most popular vector format for the web. It is ideal for diagrams, icons, lines, logos, and all sorts of digital illustrations and artworks. SVG images begin life as digital art, though it is possible to include bitmap information, meaning raster images, in SVG files.

SVG

Best For
Versatile use cases, mobile solutions, fast load times, high-quality images, animations. Avoid For
Use cases where a fall-back solution cannot be implemented, situations where backward browser compatibility is required.
PRO
CON
Good compression
Not fully supported by all browsers, thus requiring fall-back solution
Full transparency
Maximum dimensions of 16,383 by 16,383 pixels
Animation possible

WebP images currently have limited browser support and neither Internet Explorer nor Safari can display the format. Support by other browsers varies with the features (animation, lossy and lossless compression). Implementation of the WebP format, therefore, requires a fall-back solution to serve JPEG or PNG images if the browser cannot handle WebP.
Lossless WebP compression uses color cache coding: pixels are reconstructed from already-seen image fragments (source).
Name: Web Picture Format: Raster image Extension: webp Compression: Lossless and lossy Scalability: Limited, better than JPEG thanks to lossless compression Browser compatibility: Limited, Chrome, Edge, Firefox, Opera The Web Picture image format is pronounced “Weppy” and was developed by Google to address all use cases of images on the web. Google aims to eventually replace JPEG, PNG, and GIF images on the web with WebP, but the format currently lacks universal support. WebP images combine lossless and lossy compression for a reduced file size compared to JPEG without loss of visual quality. The format supports transparency and animations, which can combine lossy and lossless images as frames. At equivalent or comparable quality, WebP lossless images are up to 26% smaller than PNGs and up to 34% smaller than JPEGs. You can adjust the degree of compression to your needs and achieve an individual trade-off between file size and load time as well as image quality.

WebP

Practical Tips For Color Design

Image processing software (such as Adobe Photoshop) will give you control over the quality settings or provide a “Save for Web” dialog. Go as low as you can on the file size while maintaining a visual result that’s still acceptable to you and fits well within your overall design.
Web image file format decision tree (source).
Readz-logo-navy
Start publishing online newsletters like Deloitte, IBM, and Nike.

Get a demo of Readz today - and never look back.