Look at the example of the Apple logo below, can you see how the JPEG version has lots of grey spots around the edges? These are called artifacts which became visible as soon as it was saved as a JPEG. Therefore, PNGs or GIFs would be the better choice.Īs well as this, JPEGs, don’t support transparency, so it is worth keeping in mind if you want to place a transparent image on your website. However, when it comes to graphics and text, JPEGS are not the best option as they use lossy compression, meaning they lose a lot of information when saved, making text or lines blurry in the process. For example, a compressed 80KB image won’t take as long to load as a 8MB image as its smaller size means it requires less resources to load. JPEGs are probably the best file format for photographs on the web as the level of flexible compression when saving means they are capable of shrinking to a smaller file size and, therefore, they won’t have a negative effect on pagespeed. They are also a good choice for saving images with complex colour and shading. Joint Photographics Expert Group – otherwise known as a JPEG or JPG are the most popular choice when saving photographs as they are capable of containing over 16 million different colours. A lossy compression means images lose information and quality once the file size decreases whereas a lossless compression does not lose any detail when the file size is changed. Here is an example of raster and vector images:Īs there are many different file formats to choose from, we have selected the four we think work best on the web: a JPEG, PNG, SVG and GIF, all of which contain a lossy or lossless compression. They differ from raster images as they are not known to work well with photographs, instead they are perfect for graphics that require frequent resizing such as logos. Vector images, on the other hand, are more complex and are typically saved as an SVG. Every photograph you see on any website will be a raster image and will be saved as either a JPEG, PNG or GIF.
#BEST IMAGE FORMAT FOR WEB PAGE BACKGROUND SERIES#
Raster images are built through a series of pixels, whereas vector files are built using proportional formulas. Raster and VectorĪll images are made up from either raster or vector file types. As well as this, incorrect file formats can have a negative effect on your page speed. Using the wrong file format can affect the way images appear on your website and may determine whether users can in fact see those images.
Do you know what format you should use for your logo? Or which format you should save your photographs in?
With current browsers supporting more file types than ever before, it is important that you are clued up on which file formats work best on your website for different images.
0 kommentar(er)
