网站图片多种尺寸 [英] Website image multiple sizes
问题描述
对网站图片以及通过互联网传输的内容感到有点困惑。
笑都想要;我不是网络开发人员所以我不知道这些东西。
如果网站的图像最初是20,000 x 5,000像素，但是通过CSS缩小到200乘50这个图像实际上是通过互联网传输的？它是原始呈现的较小的客户端还是缩小的服务器端然后转移？
我问的原因是因为我们有一个大型高分辨率图像存储库需要以4种不同的尺寸显示（搜索结果，目录，产品和特大）。这些都是通过AJAX调用返回的，我需要知道在我们的服务器上生成相同图像的所有4个版本是否更好，或者只是让HTML / CSS做它的事情。
谢谢
我尝试过：
在网页上，我通过右键单击并查看属性然后在本地保存它来比较图像大小。两者都有不同的尺寸！
Just a bit confused about website images and what gets transferred over the internet.
Laugh all want; I am not a web developer so I don't know this stuff.
If website has an image that is originally 20,000 by 5,000 pixels but reduced by means of CSS to 200 by 50 which image is actually transferred over the internet? Is it the original rendered smaller client side or is the reduced server side and then transferred?
The reason I ask is because we have a large repository of high-res images which need to be displayed in 4 different sizes (search results, catalogue, product and extra large). These are all returned by an AJAX call and I need to know if it is better to generate all 4 versions of the same image on our server or just let the HTML/CSS do its thing.
Thanks
What I have tried:
On a web page I compared the image size by right clicking and looking at the properties and then saving it locally. Both come out with different dimensions!
推荐答案
CSS是一个客户端进程，因此不会影响服务器的功能。因此，整个图像被发送到客户端，然后浏览器根据html / css的说法向上或向下缩放。
如果您的原始图像是200像素乘200像素，将整个图片发送到客户端。如果html说它显示50 x 50，那么它会缩小但仍然是原始图片。如果右键单击图片并在新标签中打开，则会看到原始图片。
CSS is a client side process and therefore cannot affect what the server does. So, the entire image is sent to the client and then browser scales it up or down depending on what the html/css says to do.
If your original image is 200 pixels by 200 pixels, that entire picture is sent to the client. If the html says to display it 50 x 50, then it is scaled down but is still the original picture. If you right-clicked on the picture and opened in new tab you'd see the original picture.
这篇关于网站图片多种尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
