Choosing which format you should save your image in all depends on what you’re going to be using it for. We’re going to look at the two most popular image formats for the web, JPEG and PNG, and let you know when you would want to use each. Both have their strengths and weaknesses and you have to know which format will work best for your situation.
JPEG is an acronym for Joint Photographic Experts Group, which is the group that developed the format. They first caught on back in the days of dial-up, when the painfully-slow speed of the Internet made them the only practical way of sending images. Today, with the loading speed of websites being so important, they’ve become the standard format for compressed images, since they can compress image files into much smaller sizes.
The ratio of compression for a JPEG is typically 10:1, and this can be achieved without a noticeable difference in image quality. This means that if you started with an image size of 10MB, after exporting it as a JPEG, the image would be about 1MB. The JPEG compression algorithm combines similar groups of pixels into blocks, otherwise known as tiles.
So, while they do allow you to compress files to a considerably smaller size, it’s going to cost you. JPEGs are what we call lossy, because as the algorithm groups similar pixels into blocks, you’re losing information that you’ll never get back. This makes them almost useless for editing purposes, as every time you save the image, more and more data is going to be lost. It’s like printing an image and then photocopying it. Every time you copy it, it’s going to look a little bit worse.
Still, there are ways to use JPEGs for editing. Software such as Adobe Lightroom and Capture One allows you to mitigate the lossy nature of JPEGs by saving edits made to images in their metadata instead of just overwriting original images. But this means you can’t delete the original files to save space. You can also use JPEG Mini, which lets you compress images multiple times without any visible loss in quality.
In terms of pros and cons, the JPEG format is great mainly because it can create much smaller files. It’s best to use for photographs, as opposed to other imagery, and works well for images with complex colouring. The main disadvantages of JPEGs are there lossy compression, and the fact that they don’t provide support for transparency.
Pro Tip for WordPress users:
WordPress automatically compresses JPEGs by 82 per cent. If you notice that the JPEG images on your WordPress site look pixelated, you might want to try using a PNG format instead.
PNG stands for Portable Network Graphics, and it was created by the World Wide Web Consortium as a patent-free alternative to the GIF format. It was made to provide a solution to some of the limitations of other formats, such as the GIF, and has become the most commonly used format for lossless data compression. Lossless compression refers to the fact that the file can be edited and saved without losing any of the original data.
So, because lossless compression retains every bit of information that was in the original, uncompressed file, the compressed file sizes are typically larger than JPEGs. However, when dealing with images that contain things like long, straight lines and typography, PNGs are essential, because every pixel is retained in its original form. The form of compression used for PNGs shortens sequences of bits found in image data, which results in a smaller file that retains its quality.
If an image with a lot of small text, or a photo of a cityscape with lots of sharp edges was exported as a JPEG, the degradation in quality would be much more noticeable. The way that lossy compression combines similar pixels into tiles can result in words becoming completely unreadable, as the small number of pixels often used for typography can get blended into larger blocks. So, for something like a screenshot, a PNG is ideal, as it provides an exact replica of your screen, with no pixel left behind.
PNGs are also particularly useful when it comes to creating logos and other graphics that can be used on websites, especially those that contain a lot of text. Another aspect of the PNG format that makes it great for logos and graphics is the fact that PNGs can contain transparent pixels. This allows you to place this sort of image over top of other website elements, creating a seamless look for logos and text-heavy images.
When it comes to advantages and disadvantages, PNGs are great because they allow you to compress files without losing any information. They’re best to use for logos, text-heavy images and screenshots. The disadvantages of PNGs are that they produce much larger files than JPEGs, and they also lack support for multiple images used for animations, like you’d see in GIFs.
Having a hard time optimizing images for your website? Check out our WordPress design services provided by The Best Media’s expert WordPress developers.