In the modern design world, it is highly suggested to use images in place of words or concepts when the option is available. The fast-paced environment we live in today has people needing information quickly which means icons and graphics to symbolize messages are the key solution. However, these digital images can take up a large amount of memory space on your computer, fill up your inbox, and even take a longer time to load through the web. Who has time for that? Knowing which formats to use when editing these images in graphic software can be your secret weapon to providing both quality and efficient design.
There are three main types of file formats used for web design:
- JPEG – stands for Joint Photographic Experts Group. The best use for this format is when the need for a smaller size overrides the importance of quality in an image. Having a smaller file size means a quicker upload and less storage space. The best uses for a JPEG file include photographs and images with detailed coloring or shading.
- GIF – is Graphics Interchange Format. GIF files can be even smaller than JPEG files because they use fewer colors within an image. Using fewer colors allows for data to not be lost while the image is compressed. Simple images such as small icons and animations are ideal when choosing to use a GIF format.
- PNG – means Portable Network Graphic. PNG-8 files are very similar to GIF. PNG-24 files are similar to JPEG and contain lossless compression which means not a single bit of data in the original file will not be lost after the file is compressed. PNG also allows for transparency which is a key benefit in a graphic designer’s eye. Images in the process of being edited, complex photographs with no file size limit and logos involving transparency or fading are the best candidates for using a PNG format.
Out of all the content on your web page, images take up the most download time. As a general rule of thumb, optimizing your web images will allow your website speed to run at its maximum. Keeping each image to a limit of 12KB will help contribute to keeping your entire web page to the suggested size of 100KB. Following these image formatting guidelines can set you apart from most by producing quality images where it counts, allowing memory space when it’s needed, and having a faster load time than competitors.
SOURCE: Informatics (2017), View Link.