Which Multimedia File Types to Use on Your Website

Here are a few best practices for keeping your website loading quickly and running smoothly. Learn when to use web-specific images and file types below!

1. webp

You should use .webp for ALL images on your site if possible, including:

• photos
• transparent graphics
• animations
• etc.

2. jpg

If for some reason you can’t use .webp, .jpg is your next best bet. Use .jpg for any static image, like a graphic or a photograph.

3. png

.png files should really only be used in one very specific instance: if you need a transparent background on a graphic — and you can’t use a .webp for some reason. A .webp supports transparency as well, so it should always be used before a .png.

4. svg

.svg files are fabulous for anything that is vectorized, meaning, it keeps graphics looking clean and crispy, regardless of their size.

.svg’s are perfect for things like logos and icons.

5. pdf

.pdf files might seem weird to put on your website, but they are great for sharing things such as:

• multi-page documents
• slide decks
• price lists
• e-books
• downloadable assets
• etc.

Reminder of best practices

• Keep EVERY website file 500KB or less(whether they are a webp, png, jpg, svg, or pdf)
• The smaller file size, the better for your website’s speed and user experience
• Keep images at 1800px dimensions (or less if they are not going to be used as a full width background image)
• Never upload a video file directly to your website! Instead, upload all of your videos to YouTube or Vimeo, and embed there from there.

Additional resources:

• Compress images for web with Photoshop: https://websitewizard.dev/saving-images-for-web-using-photoshop/
• Compress images and PDFs: https://www.compress2go.com
• Convert images to WEBP: https://cloudconvert.com/webp-converter

This post was last updated on July 3, 2024.