Serve Scaled Images

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.

General Explanation

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.

Page Speed Terms and Solutions

Recent Articles

Domain and Corona Virus

Hello GuysAfter the coronavirus started, many domain investors started registering domains related to corona.According...

Superconductors and Superconductor Physics 2020

You plug the cable into the wall socket and run the device by passing the electric current through...

How to Write SEO-Friendly Articles 2020

What is an SEO Friendly ArticleIt draws an increasing graph in the right proportion...

New Release of The Witcher 3 Redux – Free Download

A new version of The Witcher 3 Redux Mod has been released by a modder. The new version...

Worm Manure (Vermicompost) – 2020

Worm manure production can be initiated with large-scale commercial thinking, as well as the increasing number of red...

Related Stories

Your feedback is valuable to us

MediaZone - Ge the daily news in your inbox