Do you know that just by tweaking a little in JPEG save options in Photoshop and we can save more than 10 GB of hard drive space? We can also increase the site loading speed by as much as 45% using this option.
I would like to clarify some facts before I go ahead. One of them is whether JPG and JPEG are different.
JPG vs. JPEG
There is no difference between JPEG and JPG. It’s funny that many people think they are different. I also explained this in one of my old post on JPG vs. JPEG.
They both are same and developed by Joint Photographic Experts Group. The only reason behind its two names is an old version of Microsoft’s Window. The old version of Window takes only three characters for any format. As JPEG has four characters, the group shortened its name to JPG so that the format can also be accessible by Window’s users.
Most of the users nowadays use Window. This is why you’ll see JPG more often than JPEG. With the advancement in technology, Window now supports extensions with four character and hence you can now view JPEG on your PC.
JPG Fun Facts
- JPEG stands for Joint Photographic Experts Group.
- It’s a format to store digital images which supports a maximum size of 65,535 x 65,535 pixels.
- It compresses file size by selectively discarding data. Check the below images.
- It supports only 8-bit images. If you save a 16-bit image to this format, Photoshop automatically lowers the bit depth.
- It doesn’t preserve transparency.
Below is an example for you. You can see a huge loss in details between the first photo and the third photo. This photo is 90% compressed.
JPEG Save Options in Photoshop
The JPEG format does not support transparency means if there’s any part in the image which does not have any pixels then JPG won’t support that. Some common examples are like a photo with no background, logo, etc.
When you save an image as a JPG file, transparent pixels are filled with the matte color.
To simulate the effect of background transparency, you can match the matte color to the web page background color. If your image contains transparency and you do not know the web page background color, or if the background is a pattern, you should use a format that supports transparency (GIF, PNG‑8, or PNG‑24).
2: Image Options
This thing does wonder. It lets you compress the photo which reduces its size.
If you’re saving a photo for your website then you don’t want that photo to be 5 MB. You’d rather want it to be in the range of 50 – 150 KB. This field does that. But this field does it at the cost of the quality of the photo.
Quality box and slider work together. You can either right any value in the range of 0 and 12 and the slider will adjust accordingly.
Here’s the dropdown also work synchronously. If you drag the slider then the dropdown value will set automatically.
3: Format Options
Specifies the format of your JPEG file. Adobe says that
- Baseline (“Standard”) uses a format recognized by most web browsers.
- Baseline Optimized creates a file with optimized color and a slightly smaller file size.
- Progressive displays a series of increasingly detailed versions of the image (you specify how many) as it downloads. Not all web browsers support optimized and Progressive JPEG images.
Ticking the “Preview” lets you preview the photo with the selection options. You can see how the photo would look before saving it. I always keep it ticked.
Just below that Photoshop tells the approx. size of the photo after saving. It won’t matter much if you’re saving your personal photographs but will a lot if you’re saving photos for your website.
You don’t want the web photos to be in MBs but rather in the range of 50 – 150 KBs. Heavy photos will take more time to load and increasing the website loading time. Google says that 1 sec. increase in load time reduces the pageviews by 20%. So, if you get 100 page views and your website loading speed is 3 secs. You will get around 80 pageviews if your website loading speed in 4 secs.