When it comes to designing for the web there are several common image formats. However, are they really the best choice for the job? Let’s take a look at some of the common and uncommon image formats that can be used in your next web design project. Which one is the best one for the job? Well that just might depend...
.png is a very common image format that's used on the web. .png is a lossless image format. While this is great for image quality, it can come at a price: file size. Large image file sizes can slow down websites, especially when viewed on mobile devices. The good news is .pngs can be optimized to have smaller file sizes. .png also supports transparent backgrounds, making them a great choice for icons or other graphics that overlay other site assets.
.jpg or .jpeg
Good old .jpgs. They are a mainstay of internet images. This lossy image format generally provides smaller files sizes than .pngs and provides many different options to optimize file size. Unfortunately, this can come at quite a severe reduction in image quality.
From dancing icons, to .gifs of your favorite television show, movie, or funny animal doing adorable things .gifs are the go to option for easily bringing movement to a site. Unfortunately due to their complexity .gifs can have quite large file sizes and take far too long to load even on devices with a fast internet connection. This can be overcome, but often at the expense of image quality and/or size.
Typically .svg isn't thought of when mentioning common internet image types. However, with the increased reliance on responsive design and the focus on responsive images .svg becomes a viable alternative. Vector graphics are inherently responsive, and do not require multiple images of various sizes to meet the needs of different screen sizes. This can save load times in responsive designs. Complex vector images can have large file sizes, so vectors may not always be the best solution.
Which Image Format is Right for Me?
If you need a transparent background or a lossless image format...choose a .png.
If you need motion...consider a .gif.
If you want a smaller file size...consider a .jpg.
If your project is responsive...consider a .svg.
What if my Images Still Have Huge File Sizes?
Fortunately, there are a number of different programs available to help compress images to reduce file size. For starters Photoshop's "Save for Internet" option can help optimize images for the internet. This won't necessarily give you the smallest file size possible, but there are other options.
Smush.it (Web Based)