If you’re new to photo editing or website design, you might be wondering why there are so many image file extensions and which ones are the best for an optimized website.
We’ll go over several file extensions, what they mean, and when they are best utilized.
Types of image file extensions
- JPEG (JPG) – Joint Photographic Experts Group is the most common type of file extension used for images. These kind of files are “lossy,” meaning the quality of the image decreases as the size of the file decreases. You can use these type of files on the web, but you need to pay attention to the file size and resolution when you do.
- PNG – Portable Network Graphics are perfect for website work and interactive web items. They are low resolution, but they are “lossless” so you can edit them and shrink the file size without losing quality. It can also have a completely transparent background, making it the best file type for logos.
- GIF – Did you know Graphics Interchange Format files aren’t always animated? It’s true. The reason this type of file was introduced was it only uses 256 colors in the RGB format so it loads much more quickly. However, it sacrifices some image quality. You’ll rarely, if ever, want to use this type in web design work.
- TIFF – Tagged Image File images are another form of “lossless” files that never sacrifice quality no matter how many times you manipulate the file. However, this is another type of file type you’ll want to use sparingly, if at all, when building a website because they are large files that load slowly.
- RAW – Raw Image Formats are typically the file extension given to the image when you first take it with your camera. Your file extension may be different based on your camera, but it is still essentially a RAW image. Because they are least-processed type of file, it keeps even the smallest detail captured by your camera. That’s great and all, but you’ll eventually want to change it to a different type of file so it isn’t a massive file that is slow to load online.
OK, but which type of file is best for an optimized website?
Calm yourself, Iago. I was getting there.
In most cases, you’ll be using exclusively JPG and PNG files for your website because of their smaller sizes.
The speed of your website is an incredibly important factor for user-friendliness and SEO purposes.
Yup, Google and other search engines check your website speed and use it as a ranking factor.
Furthermore, more than half of mobile web users say they will leave a website if it takes more than three seconds to load. So, it’s better no matter which way you’re looking at it.
Usually, you’ll use JPG for photographs. You’ll want to go with PNG for graphics, logos, screenshots, and pictures using some sort of effect or containing text.
If you’re going to use an animated graphic, make it a GIF.
How to change the file type
If you’re wanting to optimize your images for your website, you’re obviously going to need a photo editor.
Not looking to get Photoshop or any of the other paid editors? Canva has a free version that has most of what you’ll need.
Whatever you use, when you go to save it you’ll look for format or file type and change it to the appropriate extension. That’s all there is to it!
There’s also all kinds of websites that advertise they’ll optimize (or simply shrink) your images for free. If you use WordPress, there’s also many free plugins that will do it automatically.
Hopefully, this blog has helped you understand the image file types described here and which ones are appropriate for each task.
