Using Digital Images—Which Format is Best?


 
In the Graphic Arts Industry we use a variety of digital image formats. Perhaps you’re already familiar with some of the more popular ones: PNG, JPG (also spelled JPEG), EPS and more recently SVG. But do you understand their inherent characteristics and what makes them different? Knowing this will give you an advantage when optimizing images for online use.

For starters, all image formats fall into one of two categories. They are either raster-or vector-based. Let’s take a closer look at each.

Raster-based images (also referred to as continuous tone or bit-mapped):

Raster-based images are made up of pixels which is a unit of measure for digital images. PNGs and JPGs are both raster-based image formats. Raster images can range from low-to-high resolution. Resolution refers to the amount of color information stored in an image. A low-resolution image will lose clarity and sharpness as the size of it increases more quickly than a high-resolution image. The higher the image resolution, however, the bigger the file size and the longer it will take to load on a user’s device. (It’s important here to distinguish between image and file size. Image size refers to the width and height an image will display; file size refers to the amount of space required to store an image.)

All photographs taken with a digital camera—such as a smart phone—are raster-based. Shown below is a photo of a flower saved as a low-resolution JPG. On the left the photo is shown close to its original size and looks pretty good. However, as the size of the image is increased (shown right), the image starts to blur. You can actually start to see the individual pixels that it’s comprised of, particularly around the flower’s edge, which becomes jagged.

Vector-based images:

On the other hand, vector-based images are created using a graphics editing program such as Adobe Illustrator. Mathematical equations are used in drawing these images. These equations translate into points which are connected by lines or curves to create shapes. The shapes are then filled with color. Because of how they are created, vector images can but be scaled up to any size without losing quality, while still maintaining a small file size, both advantages for online use. EPS and SVG are vector-based image file formats. The flower below was created as a vector image. The image in the middle displays the points and lines (in black) which make up the various shapes of the flower. The flower shown right demonstrates how the image remains crisp and the edges sharp even at an enlarged size.

How the Web handles images:

As the Web has matured, so have the many devices we use to interact with it. On any given day we might access the Web using a laptop; tablet; smart phone, watch or even a TV. Think about all those devices and their viewports, it’s a vast array of sizes in which our digital images will appear and need to look good.

For this reason, when posting an image online—whether for a website, mobile app or even a social media ad—optimizing it can be a balancing act between having an image that has a file size that’s small enough to load quickly on a device but still look sharp even on a large-scale monitor.

Having said that, start by answering these two questions:

  1. Is the image a photograph or one that was digitally created?
    If it was digitally created, as is the case with many logos, export it as an SVG file. This vector format will be lightweight in file size and will look great on any monitor large or small. The other vector format mentioned earlier in this article—EPS—is not recognized by browsers and therefore will not render online.

    If it is a photograph, export it as a JPG or PNG. To decide between these two formats, answer the question below.

  2. Is the photograph one of many on a page or will it take up a lot of space on a page such as a web banner or background image might?

    If the answer is yes to either, a JPG is likely the better choice. JPGs typically have a smaller file size; while PNG files tend to have a larger file size. This is due to the way these files handle image compression. When a JPG file is reduced in size some of the color information will be discarded—this is called lossy compression. When an PNG file is reduced in size the quality of the image is maintained—this is called lossless compression. Thus, saving to a JPG format will result in a smaller file size, but a loss in image quality may be noticeable. PNG images will often look better but have a larger file size. Therefore, if an image is one of many on a page—such as a photo gallery—or is displayed quite large—file size will be more critical.

Remember, when optimizing your images for the Web it’s a balancing act that you control. Don’t be afraid to experiment with exporting an image several ways before you strike upon the best quality versus file size ratio.

 
 

Resources:

Why You Should Be Using SVG on Your Website

JPG vs PNG for Web

What is the difference between Dots Per Inch (DPI) and Pixels Per Inch (PPI)?

What are Vector Graphics

SVG 101: What is SVG? (and what is it actually good for?)
 
 

By Donna DeLeo, ETMG Graphic Designer