When preparing an image to be displayed on the web, the foremost thing you should consider is the file size. If you use a high-resolution image, as you would in print, the file size is large and the image takes longer to download on the web. The viewer may not want to wait that long and might not view the images—you will potentially lose a client. If you want your image to download quickly, you need to size the image correctly and compress it to reduce the file size. However, this affects the image quality. So what can you do to strike a balance between the requirements of two variables—quality and size—with reciprocal values? Adobe Photoshop is a powerful application that provides you with full control over these two variables.
To prepare a web-based image, you should always be starting with a higher resolution file in order to ensure that the image looks good on screen. It is important to note that computer or device screens are fundamentally described by pixel dimensions; therefore, the web-based image should be described in terms of pixel dimensions as well. So if you have a 6 x 6 image at 72 ppi, the result will be a displayed image of 432 high x 432 wide. When we consider that same 6 x 6 image at 144 ppi, the result will be an image that appears as 864 high x 864 wide on the screen.
When saving files for the web, save as a JPEG, GIF, or PNG. Standard sizing is often 72 dpi with a red, green, and blue (RGB) color space.
The most suitable file formats for the web are JPEG, GIF, and PNG. However, most of the users get confused with which file format to use.
The GIF file format uses a small number of colors (less than or equal to 256 unique colors) to display an image. Therefore, the file size of the image is small. However, using the GIF file format to save an image that uses color gradients and a large number of colors can lead to pixilation. Therefore, you should use the GIF file format when images have flat colors and lesser variations in colors. The GIF file format also supports transparency. Therefore, when you need transparent pixels in the background of an image, you should save the image as a GIF file.
The JPEG file format uses a large number of colors to display an image. Therefore, when your image consists of detailed colors and has smooth color transitions and gradients, you should save it as a JPEG file. The JPEG file format uses a compression mechanism that enables you to reduce the file size by losing some of the image quality. This file format works well for images that have soft tonal gradations and must have a small file size. In such images, using the JPEG file format enables you to reduce the file size without apparent loss of image quality.
The PNG file format works in several bit depths, such as 8 bits (256 colors), 24 bits (16 million colors), and 32 bits (16 million colors with variable opacity). The PNG file format does not distort or alter the original image. Therefore, when you need a high-quality image with fine details and smooth gradients or color transitions, you should save the image as a PNG file. The PNG file format supports transparent background but older browsers may not support PNG and, therefore, may not support transparency. So if you are targeting a wide audience that may be using different browsers, do not use the PNG file format.
You are working on your own website to promote yourself as a photographer. You have several images you want to post on your website to demonstrate you can extract an object (such as a chair, a table, or a lamp) from an image using selection techniques. You want these objects to have a transparent background. You also want to ensure that all of the viewers browsing your website can view the images without installing a new software.
This is incorrect!
Although you can use the REG file format to obtain a small file size with a slight loss of image quality, this format does not allow you to save images with a transparent background. Therefore, you should use the GIF file format. It enables you to get a small file size without reducing the image quality visibly. The GIF file format also supports transparency, allowing you to save images with a transparent background. You should avoid using the PNG file format in this scenario because you want to target a wide audience that might be using different browsers. The PNG file format may not be supported by all browsers, especially older versions.
This is incorrect!
Although you can use the PNG file format to save the images, the GIF file format would be a better option to use in the given scenario. You want to target a wide audience that might be using different browsers. The PNG file format may not be supported by all browsers, especially older versions. The GIF file format, on the other hand, is widely supported over the web. You cannot use the JPEG file format because it does not allow you to save images with a transparent background.
This is correct!
The GIF file format is the best to use in the given scenario. As all the images use flat colors, you can save the images in the GIF file format to get a small file size without reducing the image quality visibly. The GIF file format also supports transparency, allowing you to save images with a transparent background. You should avoid using the PNG file format in this scenario because you want to target a wide audience that might be using different browsers. The PNG file format may not be supported by all browsers, especially older versions. You cannot use the JPEG file format in this case because it does not allow you to save images with a transparent background.
This is incorrect!
Although you can use the REG file format to obtain a small file size with a slight loss of image quality, this format does not allow you to save images with a transparent background. Therefore, you should use the GIF file format. It enables you to get a small file size without reducing the image quality visibly. The GIF file format also supports transparency, allowing you to save images with a transparent background. You should avoid using the PNG file format in this scenario because you want to target a wide audience that might be using different browsers. The PNG file format may not be supported by all browsers, especially older versions.
This is incorrect!
Although you can use the PNG file format to save the images, the GIF file format would be a better option to use in the given scenario. You want to target a wide audience that might be using different browsers. The PNG file format may not be supported by all browsers, especially older versions. The GIF file format, on the other hand, is widely supported over the web. You cannot use the JPEG file format because it does not allow you to save images with a transparent background.
This is correct!
The GIF file format is the best to use in the given scenario. As all the images use flat colors, you can save the images in the GIF file format to get a small file size without reducing the image quality visibly. The GIF file format also supports transparency, allowing you to save images with a transparent background. You should avoid using the PNG file format in this scenario because you want to target a wide audience that might be using different browsers. The PNG file format may not be supported by all browsers, especially older versions. You cannot use the JPEG file format in this case because it does not allow you to save images with a transparent background.
Once you have decided on the best resolution for your image, you can optimize it for the web by using the Save for Web & Devices dialog box (File > Save for Web & Devices) in Adobe Photoshop. This dialog box gives you complete control over how you can optimize images. It enables you to choose from different file formats. You can preview the original version of an image along with its three variations using different web format settings. This helps you decide the best format for the image, considering both the image quality and its file size.
Adobe Photoshop is a versatile application, which gives you many options to experiment with. It also offers some automation tools that help you speed up your work. Let's take a look at these tools next.
