We use cookies to enhance your experience on our website

Read more
Shoot us a message via Whatsapp

Message us on Whatsapp about our services.

Don't show anymore

Why you should ditch PNG and JPG and start using SVG for websites

Posted on 24-07-2018 at 11:29 by Stan Bankras

We have been using JPG and PNG images in web design ever since they existed, as they simply cannot be missed out. However, a big amount of website owners is still stuck in the belief that their PNGs or JPGs are the best way to display their images on their website. I can tell you in advance that your website can improve a lot in visuals and loading speed by replacing PNGs and JPGs as much as possible with SVGs.

 

What defines the different types?

We certainly see different image types have their own use. The main thing to be improved on by most is when to use a certain filetype and when not to. The most common mistake (even I make) is that you export every image just as a png file as this is the type that just works most of the time. Sadly, this mistake can cause multiple problems, namely: when exporting a photograph as a png instead of a .jpg, the file size is likely to be about five times larger, resulting in painful loading times if a lot of images must be loaded onto a page. The main advantage of a png over a jpg is that it allows transparent backgrounds to be displayed, whereas a jpg transforms transparent areas into white areas.

As you might notice if you’ve wandered around our website is that we are a huge fan of the svg image type, which just keeps growing and growing in popularity. Svg images are oftentimes created in Adobe Illustrator, a program that allows designers to create vector images and save it as a svg file. Vectors are a great invention for websites, as it scales without loss of quality. An example of this can be seen here, where the Twitter icon has been created in a svg format and a png format.

png vs svg comparison

(source: click here)

 

 

The same image, but then scaled up:

png svg comparison

(source: click here)

 

The difference between the two is easy to tell in terms of quality, even the files are around the same size, meaning it is obvious you should opt for a svg instead of a png if you’re creating or using icons.

 

Even more advantages of SVG

SVG to us is the obvious winner out of all the image types discussed here, as it simply has the most flexibility and interesting applications.

A svg is a piece of code written in XML, so they can be edited in a text editor. This means its values can be modified when the website is loaded by for example Javascript. This means you can change colors of different elements in the svg image or even make an animation with it.

As I already told you, a svg is a piece of code written in XML. This is what it looks like:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="1000px" height="552.855px" viewBox="0 0 1000 552.855" enable-background="new 0 0 1000 552.855" xml:space="preserve">
<g>
	<path fill="#FFFFFF" d="M764.175,167.245c79.186,0,143.991-30.821,192.615-91.605c23.263-29.081,37.004-58.212,43.945-75.64
		H249.209v167.245H764.175z"/>
	<rect x="249.313" y="192.804" fill="#FFFFFF" width="502.186" height="167.246"/>
	<path fill="#FFFFFF" d="M236.533,385.609c-78.856,0-143.466,30.578-192.037,90.886C20.984,505.689,7.034,535.233,0,552.855h751.499
		V385.609H236.533z"/>
</g>
</svg>

Animating svg images can be done programmatically. A tutorial of this will be here at some point in time for sure, as I love animating my svgs (Want to be notified when this tutorial is ready? Subscribe to our YouTube channel). However, the easiest way is to use an online tool, for example svgator.com, which allows you to upload a svg and create an animation visually.

Stalex logo animated svg

 

In conclusion

We understand different image types are used for different kinds of images. The main thing you should be doing right is that your images aren’t crazy big sizes that are not even needed on your website and that you use the right image type with the right image. In short, you should be using .jpg for photographs, .png for images or photographs with a transparent background, but you should use .svg wherever you can as this type simply blows the other two away. Sadly, svgs can only be used for flat images, but if you have a .png icon or other flat image on your website, think about vectorizing it in for example Adobe Illustrator to optimize your website in terms of visuals and speed.