IMAGE OPTIMIZATION FOR ELECTRONIC PUBLICATIONS USING ADOBE PHOTOSHOP RESOURCES
06.11.2021 10:08
[1. Информационные системы и технологии]
Автор: Aleksieieva D., graduate student, Publishing and Printing Institute, National Technical University of Ukraine «Igor Sikorsky Kyiv Polytechnic Institute»;
Klymenko T., PhD, Associate Professor, Publishing and Printing Institute, National Technical University of Ukraine «Igor Sikorsky Kyiv Polytechnic Institute»
For the page to load quickly, its size must be available on the Internet. Light-sized pages load well even for users with poor Internet, and therefore more users will turn to this resource.
Images take up the most memory in an electronic edition. Therefore, to improve the performance of the page, the images must be optimized, match the format and color model.
One way to reduce the size of images is to use Adobe Photoshop algorithms. Consider in more detail the example of an online catalog of lingerie. The plot of the photo contains the model, the gray background, as well as the clothes that are advertised.
The first step is to resize the image according to what they will be on the site. To do this, open the image, click on the panel Image → Image Size. Choose the size of the image in Pixels, Resolution at this stage does not change.
The .jpeg format is used for raster images that do not have transparency and .png for those that do.
In the Photoshop panel, click Export → Save for Web. The settings for reducing the file size have opened in the window (Fig. 1).
The number 1 indicates the place where the information about the original file size is displayed. Directly under the format option there are options for selecting the image compression quality (highlighted by the number 2). It is possible to choose from predefined quality parameters (Low, Medium, High, Very High, and Maximum), or we can enter a certain value of quality in percent on the right.
While it's tempting to set the maximum quality for our photos, optimizing for the web means we have to make the file size as small as possible. A value of "High" is almost always the best choice, it gives us acceptable image quality for a relatively small file size. Selecting "High" automatically sets the quality value to 60%.
The image requirements for our web page are up to 500 kb, so you need to find the appropriate (maximum allowable) quality value. Check the box "Progressive" and move the slider to change the value of quality (Quality).
Areas "А" and "В" are the places where the most noticeable deterioration in quality with decreasing quality. It was experimentally determined that the image in these places can be improved by adding a small blur (Blur - 0.2-0.5).
Fig. 1. Manage image size reduction settings
Then save the image. The finished image will not contain unnecessary information (geolocation, camera settings when taking photos, etc.), and the title will correspond to the format required for web resources (spaces will be replaced by a hyphen, only Latvian letters will be used).
To study the impact of image size reduction on their quality, several images from this project were taken, as well as several random images. Table 1 shows the selected images, their initial size and the result of observations.
Table 1. Image optimization
The tipical defects are shown in the figure 2.
Fig. 2. Defects in image optimization.
1 - defect at the edge; 2 - deterioration of image quality in bright colors. 3 - gradient defects
Therefore, when preparing images for Internet resources it is necessary to minimize the size of files, while maintaining their quality.
In the course of this article, one of the ways to compress files was considered and typical images with their defects were considered. And there were ways to reduce defects in the photo.
During the research, typical images such as: monochrome image on a gray background, clothes in mesh, model on a monochrome background, city landscape, bright food, landscape were analyzed. Typical formats and color models were considered.