File formats

Are you using the right ones on your website?

What is the difference in a jpg, a png or an svg file? 

All compress media (make the file size smaller) for the web. 

The jpg format is best for photos. 

A png file has a transparent pixel channel which is great for a graphic with a transparent background. 

Both jpg and png must be sized correctly in order to look their best on a web page while not slowing the page load speed down. This can be a fine balance with various screen sizes in use.

An SVG is a scaleable vector format that can have transparency and looks good at any size – its great for logos and icons. And it is a super small file size. So is a preferable format to use on a web page for crisp looking graphics while not slowing down the page loading time.

Have you ever seen a logo on a website surrounded by a white square background? It doesn’t look very professional does it? That’s usually a jpg file. 

OR maybe you’ve noticed a logo that is fuzzy or soft around the edges – this is a jpg or png enlarged on the page from it’s original size. 

In both cases if an SVG was used, it would be crisp and able to float on a colored background. These basic design mistakes make a website look unprofessional.

Paying attention to details like this is part of building a website well.

What format is your website logo?