Choosing The Right Image Format For Your Website
When adding images to your website you are often hit with a choice of PNG and JPEG. Both work fine but which one is better for your website? What disadvantages are there? What should you avoid?
Most graphic artists and website designers figure the difference out down the road, mainly through trying and testing each format on different websites. I used to be exclusively JPEG. Then I learned how to use photoshop and PNG became my preferred format. This took me 6 months to decide upon though, so, to save some time we have put together a quick little guide on each format to help you decide the pro’s and con’s of each file type. These should really help you to decide what is best for your project or website.
Definitely the most famous out of the two. Before doing website and graphic design this was the only file format that I had heard of. I just assumed that all images were JPEGs.
This is often considered the best type of image, especially because you can often choose it’s quality and file size when saving.
This file format is over 25 years old. If it ain’t broke don’t fix it right?
So how does a JPEG work?
JPEG compression carves an image up into 8×8-pixel-blocks, and then does something a little bit crazy to them, with a whole lot of math. It converts each block’s pixels—lists of R, G, and B values, mapped to sequential points in space—into a list of coefficients,used in equations which describe the block in terms of waves of energy. In technical terms, the JPEG compression algorithm translates an image’s information from thespatial domain to the frequency domain. – WebDesignerDepotStaff
So, rather technical then. Basically this means that a JPEG is great at creating a continuous tone to your images, it makes them smooth and adds a great blend of colours to the entire thing.
JPEG is brilliant for photographs, in contrast it is TERRIBLE for things with sharp edges and large shifts in colour tone. If you have an animation it will make it look worse. Those jagged edges will really stand out and it will not be the kind of image that really showcases your websites full potential.
So whilst JPEG can be good at really showcasing your business photographs, images and real world products. It is terrible at handling animation, a style that is really coming to the forefront on modern websites and business videos.
That’s where the next format comes in….
PNG in all honesty is my preferred format. It provides images with a transparent background so that designers are able to layer them onto backgrounds of websites. If you look at our logos and floating images over backgrounds you will notice that there is no white box or border around them. A JPEG would require this so it’s a great way to make your designs and animations look professional.
This PNG image shows just how well the file format handles all colours, shading, blurring and solid whites. The ability to stack images whilst also providing this level of detail really helps PNG to be at the forefront.
Whilst it is not as good as a JPEG is at handling photographs it still provides a really high level of quality whilst allowing images to have a transparent background.
JPEG for photographs, stunning vistas, your wedding photos the lot. This format’s compression really helps to maintain the quality of those images. When you want sharp images like animations, singular objects, that sort of thing, PNG is the best file format to use.
The Future Of The Formats
WEB-P is Googles own format and though it only works within Chrome at the moment it is thought that it will expand. It works as a more advanced version of PNG and allows for better compression whilst maintaining image clarity. JPEG-XR is Microsoft’s next format that they are trying to work in. Currently this format is only working within Internet Explorer. It features lossless compression and allows for semi transparency.
These formats are where images will most likely travel towards as they become less exclusive to certain browsers in the future so make sure to keep an eye out for them.