The use of images with high file size without visual optimization on web pages negatively affects the speed and performance of the web page. At the same time, it can make it difficult for images with large file sizes to be uploaded to the panels of websites with content management.
Some websites (social media sites) use software and structures in their infrastructure that compress images as soon as they are loaded and reduce the file size. Although playing with the quality of the images and compressing them degrades the image in some cases, it is necessary to perform this operation in terms of performance, it is also possible to make adjustments without making the users feel the image distortion while doing this process in manual operations.
The preference of low-size images in the use of images on web pages positively affects the speed and performance of web pages. There are sites on the internet that compress and optimize images with software, but sometimes the software cannot compress them, and sometimes it can distort the images and cause them to become pixelated.
File sizes of images can be reduced by manually playing with the quality of images via Adobe Photoshop.
The image quality settings are opened from the top menu by going to File > Export > Export As..
Let’s examine how much an image with a high resolution deteriorates at different quality values, through the examples below.
While the image quality is 100%, the file size is 6.9 MB.
When the image quality is reduced to 50% on Adobe Photoshop, the file size decreases to 1.5 MB, but there is no difference in terms of images.
When the image quality is reduced to 10%, the file size also decreases to 584.8 KB, pixelation is evident in the image.
Note: Since the image size of the image used for the test was high, not much pixelation was observed in the quality degradation process up to 10%. When this process is done with any image, more pixelation may appear at these rates. As a result, the same quality ratio may not be used for each of the different images, and different optimization is required.
You can download the test image from the link below and test it yourself.