Pixel files
JPG or JPEG
Let’s start with the JPG, one of the most used file formats since most computers can open them without difficulty. JPG stands for Joint Photographic Expert Group.
In sum, in this format, a picture or a photo is encoded and compressed with loss. It means that when you save it, some of the image’s information will be lost. Consequently, JPG files are often not very heavy. It is then possible to keep many JPG files on a website or hard drive. Do not forget that you must use photos and pictures of high quality if you want your site to look credible.
When you create your website, we recommend using JPG files for photos or pictures that have many details. Most of the images on your site are likely in a JPG format, which is normal. It is also a recommended format for pictures for social media.
PNG
PNG files, also known as Portable Network Graphics, are also an interesting image file format for your website. Created especially for the web, among other things, it allows you to have a transparent background. This is perfect for your logo or icons on your site.
What makes PNG files different from JPG other than the transparent background? First, PNG files are often of better quality. Thanks to the image compression technique different from the one used by JPG files, PNG allows you to have sharper texts and visuals. For example, this type of format is not made for print and is not recommended for photos. Moreover, PNG files are often heavier than JPG. Therefore, it should be used very sparingly not to have a heavy website that does not load the pages quickly.
For your website, we recommend using PNG files for your logo or icons that do not need a background. Here is a small tip: do not hesitate to use an image compression tool for PNG images to make them less heavy.
Vectorial formats
PDF
Yes, PDF files can be considered image files, although they are mostly used as files that cannot be modified, such as contracts. PDF means Portable Document Format.
Adobe invented PDF files to create files that can be opened from any computer without having any changes in the display. It is then a more versatile file than EPS and SVG that are other types of vectorial format files. It is possible to create PDF files from software like Word, Photoshop, or Illustrator.
Think about using a PDF file if you wish that your file can be downloaded or printed easily. Remember that when a PDF file is created, it cannot be modified most of the time. It is indeed its biggest strength, but also its biggest weakness.
Please note: If you wish to add a PDF file to your WebSelf website, on the editor, click on the ADD tab located left, and then on FILES. You can then let your visitors download your PDF files directly from your site.
EPS
You might be less familiar with EPS files since they are less common. There are high-resolution image files that it is possible to create from design software like Adobe Illustrator and Photoshop. EPS stands for Encapsulated Postscript. It has the distinctive feature of containing vectorial or bitmap images.
EPS files' advantages are that they can be modified without having any quality loss, unlike PNG or JPG files. Indeed, there will not be any pixelated effect if you wish to enlarge EPS file elements. It is one of the most used types of files by graphic designers.
EPS files are not a suitable image file format for your website; however, you can create a design in EPS and then save it in a JPG or a PNG format once it is completed in order to add it to your site.
SVG
SVG files, also known as Scalable Vector Graphics, are vectorial files that allow you to create icons for the web. As is the case with other vectorial files, you can change an image’s dimensions without losing quality.
These are also vectorial files that can be used as it is on a website. It means that we do not need to convert them into another format to display an image on a webpage. This function is handy when we want to display simple images like icons or logos. Because vectorial graphics are mathematical calculations, the file weighs almost nothing. Consequently, it improves a page’s loading time and allows you to display sharp pictures, whatever its size. These are important elements for today’s responsive websites.
Choose SVG files if you can. On your site, you can use SVG files for your Favicon, for example. There are online format converters that can transform your PNG logo into an SVG file too.
To add a Favicon on your website, on the editor, click on the Settings tab located left. You can add your Favicon on the General page.
In conclusion, we hope that we have been able to explain what are the different image file formats and when you should use them. As we mentioned above, your site must have a quick loading time. You must ensure that you use the right image file but also compress them if needed.