I have written several posts in the past relating to digital photos, and more specifically JPEG files. I have talked about the differences between JPEG and RAW files. In one post I also compare JPEG and GIF files, and provided examples to illustrate when to use a particular file type. The JPEG and GIF post also listed the settings I used to get the resulting image in Photoshop.
When you save an image you are provided with many options to optimize your image for size and appearance. In this post I will describe each of the features associated with JPEG files to hopefully help you make a better decision.
Save for Web
For those that use Photoshop, or are thinking of starting to use it, there are many ways to edit and save an image. One of the methods involves simply pressing CTRL+S to use the Save dialog and select JPEG. You can then set a few options, such as compression and then you are done. I use this method when saving digital photos, and set the compression to the best quality, which is 12.
For Web images, however, I like to use the Save for Web item under the File menu. This allows me finer control over an image, and even allows me to choose three separate settings that I can then use to compare to the original.
When you use the Save for Web feature you are presented with several options on the right side of the screen. For JPEG files, the options looks like the image below and to the right. The next section will discuss the options in more detail.
JPEG Settings
The JPEG settings are as follows:
- Preset This dropdown list provides several quick settings that you can use to apply to your image. There are several JPEG settings listed that include some default settings for a JPEG image.
- File Type The dropdown list below and to the left of the Preset list provides a list of all file types that you can save your file as. Selecting JPEG will display settings for JPEG files.
- Quality Settings Below the File Type dropdown is a list of quality settings for JPEG files. Selecting one of the items in the list will change the Quality setting on the right.
- Progressive This option creates an image that streams to the visitor’s browser, showing a more refined image while the data is sent until the last of the data is sent and the final image appears. Most images on the Web are not progressive images, and as such I don’t enable this feature.
- ICC Profile This option embeds the colour profile into the JPEG image. This increases the file size by about 3KB, which you don’t want for a Web image. You will probably be dealing with the sRGB colour profile which is standard for Web images so you don’t need to embed the profile.
- Optimized When this option is checked, Photoshop will optimize the image, which should make it smaller. I usually leave this checked as I like smaller images for my Web images. I haven’t found any problems with browsers displaying the images with this setting checked.
- Quality You specify the quality of the image here. When this option is set to 100, you have the best quality image with little compression. Adjust this value while keeping an eye on the changes to choose an image that is good quality with a low file size. I usually find anywhere between 40-60 is a nice balance of image quality and size.
- Blur The compression used by JPEG files is better at compressing soft transitions than hard edges. This means blurry images compress better than sharp images. You specify the amount of blur to apply to the image to produce a smaller file. The downside is that you lose detail in the image, which you probably don’t want. I usually don’t blur my JPEG images as I like them to be as sharp as possible.
- Matte This is one option I have never used in JPEG files. According to the tooltip, this option “Defines color to blend transparent pixels against.” You don’t need to worry about this setting.
- Image size Since JPEG files are full colour, the colour table is not populated. If you click on the Image Size tab you can resize the image. The options provided here are the same ones provided by Image->Image Size from the Photoshop menu.
Summary
That is all the options available for creating JPEG images with the Save for Web option. The best way to find the optimal image is to open up four images, and modify the images with different settings to see what works for your image.