According to early research by Google and SOASTA, if your website loads just 2 seconds slower, it can affect your bounce rate by as much as 32%.

One of the main aspects of images that can slow your website down is images, and this aspect is directly related to the types of images you use on your site.

How do you know what type of image you’re uploading to your site? Image file extensions hold the clues. Find out more about the types of image file extensions, the kinds of images that go along with them, and how they affect your website’s performance. 

Image Basics

There are two main categories of image types, namely vector and raster image files. 

Raster images comprise pixels arranged to form an image. They’re the most common types of images on the internet and usually have JPEG, PNG, or GIF file extensions. 

You can’t resize these images without degrading their resolution, so it’s important to save them in the exact dimensions you need.

Vector images consist of proportional formulas instead of pixels, which makes them a lot more flexible. You can resize vector images to any dimension without losing the quality of your image, so they’re ideal for graphics that you resize often.

The most common image extensions seen on these files include EPS, PDF, and AI.

Image Resolution

This term refers to the density of pixels in an image i.e. dots per inch (DPI) or pixels per inch (PPI). If you’re using an image for print, you need at least 300dpi, but website images work just fine at 72dpi.

So, if you take an image of the internet and want to use it for a print project, you must make sure it has a high enough resolution for the job.

Resolution applies to all types of images. 

Common File Extensions for Images

While designing your website, you might use a variety of different image types. These all have different file extensions which can help you know what you’re working with before you open the image.

These are the image extensions you’re likely to encounter: 

RAW Images

RAW images are original unprocessed images. When you capture an image with a camera, this device saves it as a raw image.

It only changes its format when you download it to your computer and save it in the desired format.

These images capture every detail of an image, but you’ll need to change them to one of the raster or vector file types before you can use them for your purposes. 

There are multiple types of raw image files you can use to create images. These are the extensions usually seen with RAW images:

• .CR2 – Canon RAW 2 based on the TIFF file type
• .PEF – Pentax Electronic Format
• .NEF – Nikon Electric Format
• .CRW – from older Canon camera models

Almost every brand of camera has a unique RAW file format.

Image File Extensions Related to Design Programs

You can edit RAW images, or most images, in certain graphic design programs which allow high degrees of manipulation to help you create the perfect image for your project.

While working on these images, you can save them and make adjustments later. You can track down these image files by looking for the following extensions:

Portable Document Format (.PDF)

This Adobe product works well for capturing and reviewing information from any application. It’s ideal for sharing information across any platform with anyone in the world.

You can view a PDF without any design editing software, but you can’t make changes to it. 

Photoshop Document (.PSD)

Photoshop’s a universally acclaimed tool for working with raster images. You can create images in this program using layers that allow you to alter almost every aspect of the original image.

When you’re done editing your image, you flatten the layers and save it in the desired format and size. 

Adobe Illustrator Document (.AI)

This file extension works well for all types of projects, in both digital and print formats. It’s great for creating images from scratch and creates vector artwork. 

You can also save your final work with all the usual image file extensions used for print and digital. 

Adobe Indesign Document (.INDD)

Adobe Indesign works well when you’re creating large publications like magazines, e-books, or newspapers. You can combine files from both Adobe Illustrator and Photoshop while working on these projects.

With Indesign, you can experiment with very content-rich designs featuring:

• Advanced typography
• Text content
• Embedded graphics
• Sophisticated layouts and formats

Encapsulated Postscript (.EPS)

Most design software can create EPS files. They’re vector images used mainly to produce high-res graphics for print projects. 

It’s similar to a PDF in that you can open these files using any design software too, not only Adobe products.

Apart from PDFs, you can’t use the above image types on your website until you’ve saved them into a web-compatible format. 

Common Image Extensions for Digital Use

The most common file type for internet use is the Joint Photographic Experts Group image (JPEG or JPG). The trouble with these images is that image quality depends heavily on image size. 

You can use JPEG files for almost anything as long as you ensure that the file size and resolution work well in the desired format. These are some of the other often-encountered file extensions online:

Portable Network Graphics (.PNG)

PNGs work very well online, but they’re unsuitable for printing. You can edit these images without losing quality, and use them with transparent backgrounds too. 

Graphics Interchange Format (GIF) 

Animated GIFs are well-known online. GIF isn’t the best format for images though, since you’re limited to 256 RGB colors when working with these images. 

On the plus side, fewer colors mean a smaller file size and faster load times. 

Tagged Image File (.TIFF)

TIFs are large raster files. They never use quality no matter how much you manipulate, compress, copy, or re-save them. 

They’re very slow to load on a website, though, so avoid using these types of images online.

High-Efficiency Image File Format (.HEIF)

This is a type of container file format that works well for storing multimedia files. It’s a much faster alternative to JPEG files since it uses multiple coding formats to decrease file size without reducing quality.

As such, it’s mainly used to store images on your device before uploading them to the internet, but you’ll need to convert them to a usable format first. 

You easily do this using one of these converting HEIC to JPG Mac hacks or convert the files to JPEG in Windows Explorer.

Boost Your Website and Your Business

Armed with this newfound knowledge of image file extensions, you’re in a better position to take your website to the next level. A faster website can increase your page load times, your conversions, and your cash flow. 

Would you like some more top tips? Browse our website for the latest business and tech-related topics.