Correct Image File Types to use on my Website
Why would I worry about what file type my image is?
Two main reasons are quality and loading times.
Different file types load faster than others, but when they load faster… it usually means the quality will decrease due to the smaller file size. When you are choosing the correct image file type for your website, you are weighing up your options and prioritising either the quality of image and how fast your page loads.
Why should I worry how fast my page loads?
When you are hoping to be found on Google or any other browsers, your ideal client types into Google a keyword phrase like ‘homemade jewellery’, your goal is that Google rates you a high as possible in the search engine (1st page of Google).
Now, Google will judge your website harshly when deciding where you rank in the search results, a large factor it will take into consideration is how quickly your page loads. Google doesn’t want to prioritise slow websites because users won’t hang around.
More than any element within your website, images are the key factor in how quickly your website loads. It’s very important we optimise your images so your website performs at it’s highest ability and therefore is easily found, as a result you gan more website traffic and subsequently more enquiries!
So what are my options?
PNG
essential for any images that would need a transparent background.
PNG’s are a lossless compression type. In a nutshell this means when you save a PNG repeatedly you do not lose any data in the process. This means PNGs are of a higher quality than JPEGs.
Due to the lower compression of a PNG file, it takes slightly longer to load than JPEGs.
JPG
Very low file size so loads faster than most other image file types. This is down to a higher compression.
With a higher compression comes a lower quality.
Loses image data every time the image is resized, reduces the quality of the image even more
SVG (Scalable Vector Graphic)
Why is SVG pretty darn special? Where an SVG is a “vector graphic” this means it is made up of paths, not pixels. Therefore, you can scale the SVG to any size without losing any quality.
Unlike any other image file type, SVG’s are totally scalable without losing any quality. Whether the image is tiny or huge it will look crisp either way.
Can be animated via code.
Easily edited in CSS, for example if you would like to change the colour of a graphic on hover, it’s only possible with a SVG’s with some CSS code.
So what file type should I use and when?
PNG’s- Great for high-quality galleries, like for a photographer. A necessity when using an image that needs a transparent background.
JPG’s- Should be your first choice for any standard gallery and web images.
SVG’s- Perfect for logos, graphics, and animation.
Helpful resources to convert image file types
Convert JPG to PNG
Convert PNG to JPG
Convert to SVG
Conclusion
The file type you choose for the images you upload to your website is important and needs to be thought through prior to upload.
Not every image on your website will need to be a PNG; you can upload as a JPEG and the quality difference will not be noticeable, but the effect it has on how quickly your web pages load will be noticeable.
If the image needs a transparent background, use PNG.
Learn how to use SVG for logos, graphics and any images that use hard lines. The high quality and scalability will pay off considerably and provide a clean, professional look.
