Today, most websites use images which tend to occupy a large amount of file size of web page. Therefore, selecting appropriate image file format is very important for website performance.
JPG (JPEG), PNG, and SVG are common image file formats used for websites. (GIF is also common, but is not mentioned here because they are used primarily for moving images.) How do these image file formats differ, and for what purposes are they suitable? This article solves that.
JPG image characteristics
JPG is an abbreviation for JPEG (Joint Photographic Experts Group). JPEG is one of the best file formats for color images such as photographs and is often used for web pages and digital cameras. File names have a “.jpeg” or “.jpg” extension.
JPG format images support full 16.77 million colors and are suitable for saving photos and other images with rich colors and fine details. It is possible to save images with a large number of colors in a much smaller file size than other file formats.
This is because JPG is a lossy compression format that moderately discards the color contained in each pixel when compressing an image. When exporting a JPG image from a design tool, you can often choose the compression ratio of the image.
Difference between JPG and JPEG
JPG is an abbreviation for JPEG and there is no difference in the file format itself. It does not matter which extension is used, “.jpg” or “.jpeg”.
In the past, file extensions were limited to three characters, and the abbreviation “.jpg” was used. With the advancement of technology, four-character file extensions can now be used, and JPEG can now be given the extension “.jpeg” according to their official name.
Images suitable for JPG
The greatest advantage of JPG is that it can save images with a large number of colors at an overwhelmingly small file size. For this reason, it is suitable for saving photos and other images taken with digital cameras.
JPG Image
PNG Image
The two images above are the same photo saved in different file formats. In this example, the JPG file is about 1/10th the size of the PNG file. However, it would be almost impossible to recognize the difference in quality between them.
It is basically best to save photos in JPG format because the file size reduction effect is so great.
Notes on using JPG images
The higher the compression ratio, the smaller the file size, but the image quality may be visibly degraded. Therefore, strike a good balance between image quality and file size.
Because JPG is a lossy compression format, once compressed, the original image quality cannot be restored. Thus, conversion or compression to JPG format should not be repeated and should be done only once if possible.
In addition, since this is a lossy compression format, the number of colors is reduced when compressed, and the outlines of the subject tend to blur. Therefore, it is not suitable for images with sharp outlines such as logos.
Another disadvantage of JPG is that it does not support transparency. When an image containing transparency is converted to JPG, the transparent areas will be filled with white or black.
Summary
Advantages of JPG:
- File size can be greatly reduced
- Compression ratio can be adjusted
Disadvantages of JPG:
- Does not support transparency
- Degrades image quality every time it is re-saved
- Subject outlines tend to be blurred
PNG image characteristics
PNG (Portable Network Graphics) is a format developed for handling images on the Web and is widely used on the Web. File names have a “.png” extension. Compared to JPG, it tends to have higher image quality and supports transparency.
While JPG compresses images by moderately discarding the color contained in each pixel, PNG is a bitmap format that completely preserves the color of each pixel. PNG is a lossless compression image format that does not degrade in image quality no matter how many times it is re-saved.
Images suitable for PNG
PNG supports an alpha channel (opacity), which can represent transparent colors in an image. This makes it possible to use an image with a transparent background overlaid on another image, for example.
Also, while JPG tends to have blurred outlines due to its lossy compression, PNG can draw outlines and color boundaries sharply. Therefore, it is suitable for artificial images such as figures, logos, text images, and illustrations with few colors.
PNG Image
JPG Image
In the two examples above, the PNG image will look better with clearer outlines and color borders.
Notes on using PNG images
Compared to JPG, the file size can easily become huge when the number of colors in an image increases. If an image with a large number of colors such as a photograph is converted to a PNG, it can easily exceed several megabytes and become heavy to load.
If you want to use PNG but the file size will be too large due to the large number of colors, consider using the next-generation format of the WebP.
Summary
Advantages of PNG:
- Supports transparency
- Basically higher image quality than JPG
- Sharp outlines can be drawn
Disadvantages of PNG:
- File size tends to become huge
- File size reduction by compression is not effective
SVG image characteristics
SVG is an abbreviation for Scalable Vector Graphics, which stands for vector images that can be freely resized. File names have a “.svg” extension.
While raster images (bitmap images) such as PNG and JPG render images as a set of pixels, vector images render images by a mathematical formula that defines the coordinates of points and lines and color information. Because they are rendered by mathematical formulas, no matter how much the image is enlarged, the image quality will not deteriorate.
Since SVG is an XML-based format (a text-based markup language), it can be edited with a text editor. It is also possible to use CSS to change the colors and JavaScript to dynamically change the shapes.
Images suitable for SVG
SVG is suitable for rendering simple figures (text, icons, logos, etc.) with a small number of colors.
Icon
Logo
Illustration with few colors
For images such as the above, the file size can be kept to an overwhelmingly small amount, less than a few kilobytes, and the image quality is not degraded at all.
Notes on using SVG images
SVG is not suitable for drawing color gradations and complex shapes. Converting a photograph or an illustration with many colors to SVG will result in a huge file size, so its use should be limited to images with simple shapes with few colors, as mentioned above.
When converting an image containing text to SVG, if the font used for that text does not support on the device, an alternative font will be applied and the image will look different. To prevent this, outlining that means converting text to a vector path, is required. Many design tools, such as Figma, allow for text outlining operations.
Color-modified with CSS
SVG can change colors through CSS. This allows the colors to be changed dynamically with CSS without having to prepare multiple images of different colors.
For example, the star-shaped icon below is normally gray, but changes color to yellow on mouse hover.
See the Pen SVGの塗りつぶし色をCSSで切り替える by iwa (@iwa0109) on CodePen.
Summary
Advantages of SVG:
- Image quality does not deteriorate even if the size is changed
- File size can be significantly reduced in the case of simple figures
- Colors can be changed by CSS
Disadvantages of SVG:
- File size becomes huge when shapes and colors are complex
Conclusion
This article has described the characteristics of the JPG, PNG, and SVG file formats used on websites. In summary, each image file format is suitable for the following purposes.
- JPG: Images with many colors, such as photographs
- PNG: Images containing transparency, sharply outlined image such as logo
- SVG: Figure with a few colors and simple shapes, such as icon