Being Freed logo

Image formats

JPG, PNG, WebP: which type of image file is better for your website? Which one has the smallest file size or offers transparency?
A graphic with various media file suffixes: .WebP, .jpg, .svg, .png, and .RAW

Digital images for your website

Image speed and quality are important components of website SEO, and by selecting an appropriate format, you can use media to improve your SEO.

Of the dozens of image file formats out there, I’ll focus here on the common extensions we might use in your website, and why we may choose one over the other in a particular instance.  Note this article is about still images, not movies, gifs, or Lotties.  But first, a little vocabulary…

Digital images are either vectorized or rasterized

Vector images are drawings based on points and paths, and they can be resized without losing quality.  These can only be edited by certain apps/programs such as Adobe Illustrator and are often used for logos and similar graphic elements.  Vector images are saved as .png or .svg for use on websites.

Rasterized images are pixilated, so need to be sized properly for the context.   Many of us understand the basics of PPI, or pixels per inch of a computer screen:  pixels are tiny dots organized into a grid that, together, trick our eyes into seeing a picture.  Changing the number of pixels per inch makes the picture sharper or more grainy. 

PPI is similar in theory to DPI, or dots per inch, which refers to how many dots are used by paper printers.  A typical office printer uses 300 dpi, whereas for website images, the standard is 72 PPI.

Seagull graphic shown as a vector image and a 150 ppi image
Seagull graphic shown in 72 ppi and 40 ppi

Types of image files

These pixel-based files are smaller in size than others, but they use “lossy” compression so image quality decreases when you zoom in on them.  For this reason, it’s important to size them appropriately for where/how they’re placed.  JPGs, along with PNGs, are the workhorses of image files on the web.

PNGs are pixilated files but they use “lossless” compression, so image quality is maintained when zooming in.  PNGs have a larger file size compared to JPGs, but they can be transparent or have no background.  This is convenient for websites where we may have overlapping graphics or we want a cut-and-paste type look with edges that contour the subject.  Because PNGs retain detail, they are often used for graphics such as logos, so they can be scaled without losing quality.

RAW images are pictures that are uncompressed, so they contain all the information possible in their data.  Many phones and cameras allow you to take RAW images, and because they contain so much detail, these images are good for editing later in another app.

SVGs are vector-based drawings: good for graphics, charts & illustrations because you can scale them up or down without losing details.  Zoom in to your heart’s delight!  One thing that makes SVGs good for charts and graphs is that search engines can detect keywords within the chart, which helps with SEO.  Emojis are often saved as SVGs.  See Adobe’s excellent article on SVG files here.

WebPs have better compression than .png or .jpg, and supported by all the major web browsers.  These images help keep websites smaller and load faster.  They’re newer on the scene than JPGs and PNGs, but they’re taking over quickly.

So what's the best image file type for your website?

The moral of the story is that in different places on your website, we’ll want to use different formats.  We’ll also decide what size to save the file based on how large we’ll view it.  Larger files mean slower page load time.  Slower page load time costs us viewers.  Like so many things in life, it’s a balance. 

To learn more about images, check out some of my other posts...

Vocabulary

Bitmap image – An image made up of pixels which contain data.

Lossy compression – a method of file compression which makes the file smaller but sacrifices image quality.

Pixel – a dot which contains data and appears as a color defined by that data.

Pixelated – used to describe an image that has been broken down into pixels.

Raster image – a pixelized image where the file’s data describes each pixel.

TIFF – Adding this here informationally: TIFFs are used primarily for printing photos, so you generally won’t see them on websites.

Vector image – a drawing that is built on points and lines, not pixels.

Interesting Links

Like my posts? Toss me a tip!

digital nomad hiker drysuit diver queer woman sober ukulele player scorpio Tough Mudder goofball

Freed with her ukulele while scuba diving

All content © by Freed

Want to know more about what I do?  When I have a new post?  Where I’ve been lately?  (I do get around.)  Sign up for my mailing list below.  I promise to not fill your inbox with junk.

Did you know I'm Mailchimp Certified?

I’ve completed Mailchimp’s Fundamentals training, so you can feel confident about my skills with contact hygiene, templates, customer journeys, and other Mailchimp mysteries.  In coming blog posts I’ll elaborate on various aspects of the marketing platform such as tags, segments, and groups.  I’ll go into depth about customer journeys and why it’s important to design forms such as sign-up and update user preferences.  I’ll talk you through templates and how they can save you time and help reinforce your company branding every time you send a campaign.

Mailchimp Certification

Did you know I'm Mailchimp Certified?

I’ve completed Mailchimp’s Fundamentals training, so you can feel confident about my skills with contact hygiene, templates, customer journeys, and other Mailchimp mysteries.  In coming blog posts I’ll elaborate on various aspects of the marketing platform such as tags, segments, and groups.  I’ll go into depth about customer journeys and why it’s important to design forms such as sign-up and update user preferences.  I’ll talk you through templates and how they can save you time and help reinforce your company branding every time you send a campaign.

Mailchimp Certification