Our beloved JPEG. Oh so many adorn the internet. And they come in every shape and size. From cat and unicorn pictures, to newsworthy photos and informational documents. In 2014, according to Mary Meeker’s annual Internet Trends report, people uploaded an average of 1.8 billion digital images every single day. That’s 657 billion photos per year. And many of those are JPEGs. But do we really know about all things JPEG?
A JPEG is a common method of compressing digital images. When saving an image, typically a photograph, the amount of compression can be adjusted altering the size and quality of the image. In this guide I’ll go over all things JPEG. I’ll let you know when to use one, when to avoid them, and the best alternatives.
Why Use JPEG?
Why use a JPEG? Well, first and foremost, JPEGs are easy to use. Nearly every person knows what a JPEG is and how to save one. It’s the default file format on most phones. Beyond the general acceptance in public, the main benefits of JPEGs are that you can have a reduced size and compression without loosing quality. With JPEGs you have the ability to get small files with a minimum amount of deterioration to quality. JPEGS also have the ability to store millions of colors of information, 16 million colors to be exact. They allow for quality and quantity. It’s a combination that no other file format can come close to copying.
Types of JPEGS
There are two main types of JPEGs: Baseline and Progressive. The baseline version is the classic JPEG many of you may remember. It shows up gradually, line by line, from top to bottom, as full resolution information becomes available. A progressive JPEG displays information right when it is available causing the resulting image to be blurry, but all visible. As time goes on the image becomes clearer until full resolution.
Progressive JPEGS have become industry standard due to their perceived faster loading speed while giving the visitor a better understanding of the image.
How to save as a Progressive JPEG in PhotoShop
To optimize for a specific size:
- With the image open choose File > Save For Web.
- Select JPEG from the format menu.
- To optimize for a specific file size, click the arrow to the right of the Preset menu, and then click Optimize To File Size.
- Enter the desired file size.
- Click save
To specify the compression level (select one from below):
- Choose Low, Medium, High, etc. from the pop-up menu
- Click and slide the quality slider to the desired setting.
- Enter a value between 0 and 100 in the Quality box.
For each option above, the higher the number the more detail is preserved. Once optimized select Progressive, enter a file name, and click save.
When to Use a JPEG
It’s best to save photographic images with smooth seamless color graduation as a JPEG. Also consider saving as a JPEG anytime you want more control of the size and/or quality of an image.
When to Not Use a JPEG
Never use a JPEG in the following situations: any image where a transparent background is needed, an image with sharp edges, icons, favicons, logos, simple raster drawings, text, and vector drawings. If your image falls within the above list I recommend a GIF or PNG file.
Alternatives to JPEGs: GIF, PNG, & WebP
A GIF is ideal when there are large areas of uniform color that is less than 256 colors. A GIF will save you in overall size while allowing for exact duplication without quality loss. GIF are also ideal when creating simple animations.
PNGs were created as a replacement to the GIF format. The color limitations (256) of GIF prompted the creation. With PNGs, color is not an issue. It sit up top right next to the JPEG. JPEGs and PNGs often seem interchangeable. An important and deciding factor on whether to save as a PNG (over a JPEG) is the ability to have a transparent background.
Enter the world of WebP. WebP is a new file format announced by Google set to take over the JPEG. Pronounced “weppy”, a WebP could reduce image file sizes by 40% of a comparable JPEG. This mean faster load times and reduced network burden. A win-win for all parties involved.
But, with Chrome and Opera being the only major browsers supporting the WebP I wouldn’t switch to it just yet.
Learning which file types to choose in a certain situation is a learning process that takes time. I hope this guide provides you with a better understanding of when to utilize a JPEG, GIF, PNG, and WebP in your projects.