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

Russian YouTuber Has Crash (!) With Porsche Taycan Turbo S In Porsche Store

Russian YouTuber Mikhail Litvin showed in a video she recently shared with a Porsche Taycan Turbo S directly at the Porsche store. Russian YouTuber Mikhail...

Top 15 Technology Blogs for 2021

77 percent of Internet users read blogs and 23 percent of all time on the internet social networks disclose the expenditure of reading and...

Viewing Domain Records (nslookup)

Hello Media Zone Blog Readers,In this article, I will try to talk briefly and simply about the name server of the domain you have...

How to Rebuild Your Business After the COVID-19 Shutdown

The coronavirus lockdown had a devastating effect on small businesses everywhere. Even ifyou were able to adapt your business model to continue...

Computer Tech: A Secure Investment in Your Future

Choosing a career path in IT is a safe bet for a long and lucrative work life. An endless supply ofcomputer tech...

Related Stories

Your feedback is valuable to us

MediaZone - Ge the daily news in your inbox