One of the most common questions people ask me as a web designer is: “How do I choose the right image type for my website?”
This is a great question because the size and file type of images can greatly affect a website’s speed and overall appearance.
There are many different options to choose from when it comes to image formats. But the most commonly recommended are JPEGS, PNG’s, and GIFs.
Choosing Your Image File Type
Here are the best types of files and when you should use them:
JPEGs
JPEGs are best for all photographs, especially those with a lot of colors. For example, if you have a photograph of a flower or a scenic sunset. JPEGs will express these images with the most detail. A JPEG can also be highly compressed without losing image quality. When a JPEG is compressed optimally it doesn’t noticeably lose any quality, but the image will load faster.
PNGs
Next we have PNGs. PNGs are great for logos, vectors, screenshots, and images with sharp edges between colors. PNGs also support transparency, which is important to keep in mind as JPEGs do not. PNGs are much smaller in terms of file size for these kinds of images, which makes them faster to load as well.
So in summary, which is more efficient, PNGs or JPEGs? It depends on the image type. JPEGs allow for smaller files for photographs, whereas PNGs are smaller for icons, logos, vectors, and screenshots.
GIFs
Finally, we have GIFs. GIFs are for moving animations. PNGs and JPEGs do not support animations, so GIFs are your best option. However, GIFs are notoriously slow to load because of their file size. So you’ll want to use them sparingly.
Optimizing Image Size & Image Compression
Once you’ve chosen the files you’ll be using for your images, it’s time to resize and compress them.
Resize
Typically, you want to make sure that your images are not scaled too large or too small. If you scale an image too far from its original dimensions, the quality will be reduced. One more thing to keep in mind is that images for your website should be no larger than 2000px wide (for a full-width image, even smaller if it’s not going to be used full width.
Compress
Once you’ve decided on the size of your image, it’s important to compress them. There are various programs available on the internet for image compression. The one I personally use is https://tinypng.com/ – this website works for PNGs and JPEGs. Once you’ve run your photos through there, you can upload them to your website.
Hope this helps!
