Using the correct formatting and compression for your website’s images can help improve its performance and loading time. This guide will help you understand the different types of images and the basic concepts of compression so that you know how and why your web site designer chose a certain format to use for your images.
Basic Image Types
There are different image formats, but there are two fundamental types of images: bitmaps and vectors. Bitmap images are like mosaics of colored pixels, which look like a unified, smooth image when viewed from a distance. Zooming in on or scaling a bitmap image up will reveal these colored pixels.
My profile photo is saved in PNG format, which is one type of bitmap file format.
Vector images are composed of a fixed set of shapes and lines, which are retained when the image is resized. Vector images typically don’t require compression, while bitmap images always do.
This illustration/self-portrait was created using vectors.
Lossy and Lossless Image Compression
Compression is necessary to convert image data into a more efficient form. There are two methods of image compression: lossy and lossless. “Lossy” compression gets rid of some information from the original image to reduce file size. Lossy file formats include JPG and GIF images.
“Lossless” compression retains all the original data the image contains, but results in larger file sizes. Lossless file formats include EPS, PSD, TIF, and PNG (although TIF and PNG images can sometimes be lossy).
Choosing the Right Image Format
Choosing the right format for your image requires you to consider what kind of image it is, where it will be used, and what size it will be displayed in. High resolution images are usually reserved for print but today’s display technology, such as Apple’s Retina Display, have made high-res images necessary for websites as well. Images used for online purposes are typically saved in one of three formats:
- GIF – GIF images’ limited color palettes make them unsuitable for photos, but they’re ideal for animated images, line art, or smaller images that require support transparency.
- JPEG – JPEG is a popular format for a large variety of images, and is ideal for photographs.
- PNG – PNG is another versatile and popular format for website images. You can use it to save graphics with photos, but PNG is best suited for computer-generated images like logos or charts. It’s also great for images that require multiple levels of transparency (GIF will be better suited for images that require only a few pixels to be completely transparent).
Great website images will be useless if it slows your loading speed down, and improving loading speed should never be an excuse for using low-quality, over-compressed images on your site. You need to balance your image quality and file size by choosing the correct format and compression to save it with. Talk to us to get a beautiful, functional, and fully-optimized website through our web design services that get you more traffic and better rankings.
Oliver Gacosta is a senior web designer with seven years of experience in graphic design and web development. He is a proud husband and father who describes himself as a man who loves Jesus and the Bible. When not designing beautiful websites, he spends his time songwriting and playing the guitar.
