Presenting Scaled Images
|What it is:||The user of the website has uploaded 400 x 400 images, but if the image size is shown as 40 x 40 in HTML / CSS codes, this means that the browser must first download and scale the large file before viewing it.|
|Solution:||A more efficient method is to resize the image to 40 x 40. Thus, the browser does not need to download and scale the image inefficiently.|
|Expert Comment:||Bu responsive olmayan işler için oldukça kolaydır ancak değişken yapılarda bunu ayarlamak için src set kullanılmalıdır. Masaüstü için 4 resim yanyana olarak 250px lik istenir ve mobil için 400px tek resim istenirse bunu ancak srcset ile ayarlamak gerekir ve oldukça karmaşık bir kullanım oluşturmaktadır.|
While visual content improves the performance of a web page, it also provides significant byte saving. Scaling up images on a web page affects the speed at which the page is displayed on devices other than a low-powered computer, such as mobile.
But My Website is Responsive …
Providing high resolution images for all users may be attractive for screens with variable pixel density. The compressed image technique often provides smaller file sizes with better quality perception. For this reason, this option should definitely be evaluated. But; Be aware that high resolution images always require more memory and decoding will take longer. For this reason, it is also important to evaluate low power devices with standard resolution images. For this reason, we recommend using “srcset attribute”. Srcset attribute has a very good browser support. Also, delayed browsers can be helped with Scott Jehl’s image fill. See sample uses when choosing the most suitable application for your website.
Details from Google
Sometimes it may be desired to display the same image in different sizes. In this case, a single image source will be served, and to scale the image, HTML or CSS will be used on the page containing the image to be scaled.
For example, you can get a 10 x 10 thumbnail version of a 250 x 250 image that is larger than it. You can use formatting to resize the thumbnail version without having to leave the user to download two separate files. This makes sense if the actual image size matches at least one of the examples on the page, the larger image, which is 250 x 250 pixels in our example, makes sense. But; If you provide an image larger than the size used in all formatting examples, you may be sending unnecessary bytes over the wire. To scale images to fit the largest size needed on your website, you need to use the image editor. Also, be sure to include the dimensions on the page as well.