Images for the Web - types, formats and optimization
Table of content
Images are a very important part of a website so in this article we will provide you with basic information about image types, the difference between different file formats, and we will share some basic image optimization techniques.
The raster image consists of pixels, each of which has a different color arranged to display an image. The bitmap pixels do not save the original colors when their size increases - for this reason, when you increase the size of a raster image it looks blurry.
Raster images can show countless colors in one image and allow color editing as opposed to a vector image. Raster images can not be magnified without sacrificing quality.
Vector images are composed of individual objects (curves, rectangles, circles, etc.) that are described by the program as vectors (mathematical formulas). The advantage of these charts is that their sizes can be changed without changing their quality.
Vector images are scalable so that the same image can be projected once and resized endlessly for any size - from business card to billboard. Vector images can not show the natural qualities of the photos.
Raster images are often large as file size, while vector images are relatively small. Raster images are used in web and print, vector images can not be used in electronic format - they must first be rendered in raster format.
Raster file formats
JPG/JPEG (Joint Photographic Experts Group) is the most popular raster graphic format that uses effective compression algorithms that allow you to achieve a small file size without loss of quality (or acceptable loss of quality).
When saving a JPG file, you can select a compression level by adjusting the ratio between image quality and file size.
GIF (Graphics Interchange Format)
GIF limits the color palette to a maximum of 256 colors, making it a bad choice for saving images (for comparison JPG supports a full 24-bit with 16.7 million color palette). As a result, GIF is the right answer only when animation is required.
PNG (Portable Network Graphics) is a raster graphic format that supports lossless data compression. PNG is created as an improved GIF replacement and is the most widely used image compression format on the Internet.
PNG supports palette-based images (24-bit RGB or 32-bit RGBA colors) with or without alpha transparency channel as well as grayscale images.
PNG does not apply loss-compression algorithms beyond selecting the color palette size. As a result, it produces images of the highest quality but also of size much larger than the other formats.
TIF/TIFF (Tagged Image File Format)
This format is used primarily for printing. Unlike JPG, the TIF files use only loss-free compression, which means that their size is usually much larger. Instead, they contain much more information (paths, alpha channels, comments) that are used in printing industry.
The basic raster format, which is now rarely used. In practice, this is a clean raster map, ie. a list of pixels whose colors are defined and with minimal compression. BMP files are unnecessarily large and they are not displayed on all Internet browsers.
Vector file formats
EPS (Encapsulated PostScript)
Versatile format supported by most vector graphics programs. Visual identification elements, such as logos, are best suited for saving in this format.
AI and CDR
Frequently used vector files created by two of the most popular vector graphics programs, Adobe Illustrator and Corel Draw, respectively. Latest versions of programs can import files to their competitor.
SVG (Scalable Vector Graphics)
SVG images are defined in XML text files and can be searched, indexed, scanned and compressed. As XML files, SVG images can be created and edited with any text editor or drawing program.
All modern web browsers - including Mozilla Firefox, Google Chrome, Opera, Safari and Microsoft Edge - support SVG images.
Almost all popular raster programs create their own formats, the most commonly used format of this type is PSD, which is used by the most popular raster graphics program - Adobe Photoshop. Other popular formats are PSP (Corel Paint Shop Pro) and XCF (Gimp and some other programs).
PDF (Portable Document Format) - on the one hand, it is more a document type than a graphic format, but on the other hand, it can include both vector and raster elements and is also very flexible. That's why it's often used for digital printing.
Some tips and techniques to keep in mind when working on optimizing your images:
- Using vector formats: vector images are independent of resolution and scale, making them ideal for multifunctional sites and sites with high-resolution graphics.
- Minimizing and compressing SVG files: XML markup (file code) often contains unnecessary metadata that can be removed; make sure your servers are configured to apply GZIP compression to SVG files.
- Select the best bitmap format: specify your functional requirements and choose this format that matches each image individually.
- Experiment with the optimal quality settings of the bitmap formats: do not be afraid to reduce the quality settings, as the results are often very good and the saved resource is significant.
- Removing unnecessary metadata from image: many raster images contain unnecessary metadata: geographic information, camera information, etc. Use appropriate tools to remove it.
- Use scaled images: resize the images on the server and make sure the size of the displayed image is as close as possible to the natural size of the image. It is a good idea to upload different sizes of the same image to be loaded depending on the browser resolution using CSS media queries.
- Use CSS3 effects where possible - CSS effects (gradients, shadows, etc.) and CSS animations are independent of the resolution and use little resources.
- Use web fonts instead of embed text in images - web fonts allow beautiful fonts to be used, while retaining the ability to select, search, and resize the text.