将图像大小调整留给客户端（浏览器）是否可以接受
浏览器可以根据您指定的属性调整图像大小。
不过，我想大多数大小调整都是在服务器端完成的，最好是在请求之前完成。以当前 CPU 的速度，为了简单性和可能节省带宽，将图像大小调整留给浏览器是否可以接受？
Browsers can resize images based on the attributes you specify.
However I imagine most resizing is done server side, preferably prior to the request. With the speed of current CPUs and for the sake of simplicity and possibly bandwidth saving, is it ever acceptable to leave image resizing to the browser?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
是的，浏览器可以根据宽度和高度属性调整图像大小，但是您无法控制调整后图像的质量。如果这是您所关心的事情，那么它应该在服务器端完成。
另一件需要注意的事情是，即使调整大小的图像比原始图像小，它仍然与全尺寸图像相同的文件大小。因此，如果您让浏览器来制作 100 像素 x 100 像素的 2MB 文件，用户仍然必须先下载该文件的全部 2MB。
Yes, browsers can resize images based on width and height attributes, however you have no control over the quality of the resized image. If this is something you care about at all, it should be done server-side.
Another thing to note is that even though the resized image is smaller than the original, it is still the same file size as the full-sized image. Therefore if you're leaving it up to the browser to make a 2MB file 100px by 100px, the user still has to download all 2MB of the file first.
一个用例是当您有一个缩略图和一个全尺寸图像或要显示的各种尺寸时。在这种情况下，可以使用一张图像并调整大小。请注意，现代浏览器现在使用双三次重采样，因此在调整大小时不会遇到锯齿状、粗糙的插值和大量伪像，这曾经是不让浏览器调整图像大小的一个非常令人信服的理由。
One use-case is when you have a thumbnail and a full-size image, or various sizes to display. In that case it is fine to use one image and resize. Note that modern browsers now use bicubic resampling, so you don't run into jaggy, cruddy interpolations with lots of artifacts when you resize, which used to be a very compelling reason NOT to let the browser resize the image.
即使我们在更高的消费者带宽方面取得了进展，我仍然认为允许浏览器调整图像大小是不可接受的。实际上，带宽仍然根据用户所拥有的服务级别而有很大差异。
您还需要考虑可能的用例。想象一下新闻报道列表，每个新闻报道都有自己的缩略图（基于底层文章的主图像）。现在假设我们在一页视图中显示其中 20 个。
即使那些拥有大量带宽连接的人也会注意到那些（为了争论）2MB 图像的突然出现。这假设上传内容的人在图像大小方面实行某种限制。如果说图像是直接来自扫描的，那么图像可能会变得更大。
如果您的站点位于公共 Internet 上，则几乎可以保证某些用户的带宽会不足。投诉将会出现，最终会给你带来不好的影响。
我们甚至还没有讨论像宽高比这样的东西。当客户尝试将又长又薄的图像放入专为方形设计的容器中时会发生什么？该网站看起来不专业，就是这样。
另外，将这些大文件发送给n 个客户端的成本如何？带宽不是免费的。
所以不，让浏览器调整图像大小是永远不可接受的，特别是当您可以投资或开发服务器端图像处理库时。这将处理调整大小、裁剪等。它还将帮助您为所有用户提供最高效的体验。并非每个人都有 50Mb 的带宽进入其场所。
Even with the progress we've made in terms of higher consumer bandwidth, I still don't think its acceptable to allow a browser to resize the image. In reality, bandwidth still varies wildly depending on what level of service a user has.
You also need to think about likely use cases. Imagine a list of news stories, each with their own thumbnail based on the primary image of the underlying article. Now let's say that we're showing 20 of these in one paged view.
Even those with hefty bandwidth connections are going to notice those (for the sake of argument) 2MB images popping in. This assumes that whoever is uploading content is practising some kind of restraint when it comes to image size. Images can get a ton larger if say, they've come straight from a scan.
If your site is on the public Internet, you can almost guarantee that some of your users are going to have inadequate bandwidth. Complaints will come in, and it'll ultimately reflect badly on you.
We haven't even covered stuff like aspect ratio. What happens when a client tries to put a long and thin image into a container designed for a square one? The site looks unprofessional, that's what.
Also, what about the cost of sending these large files to n clients? Bandwidth isn't free.
So no, getting the browser to resize images is never acceptable, especially when you can invest in or develop a server-side image manipulation library. This'll handle resizes, crops, etc. It'll also help you provide the most performant experience you can to all your users. Not everyone has 50Mb going into their premises.
我遇到一个网站，该网站购买了库存照片，并将 2Mpx 原始图像嵌入到其网页中，其中缩略图大小的
width和height指令约为 150px。我之所以注意到是因为该页面加载大约需要一分钟。另一方面，我可以将浏览器缩放 300%，图像仍然清晰（但仍然没有达到其原始分辨率）。我猜这不是设计目标。
I encountered a site that had bought stock photos and embedded the 2Mpx original images in their web page with
widthandheightdirectives of ~150px thumbnail size. I only noticed because the page took about a minute to load.On the other hand, I could zoom my browser 300% and the images remained clear (and still not hit their native resolution). I'm guessing this wasn't a design goal.
浏览器上发生的大小调整只是显示的大小调整 - 下载完整图像并以所需的大小简单地显示。它们的外观将由浏览器编写者编写的一些图像调整大小算法决定 - 您无法控制质量。
这与客户端上的带宽以及可能的 CPU 和内存使用情况有关。
正如您所猜测的，大多数图像都在发出任何请求之前就预先调整了大小。即使使用快速的 CPU，您也不会希望即时执行此操作。
较小的图像还意味着没有宽带的用户将能够享受您的网站，而无需等待大图像下载。
The resizing that happens on the browser is simply that of display - the full image is downloaded and is simply displayed with the required size. What they look like will be determined by some image resizing algorithms written by the browser writers - you have not control over the quality.
It is a matter of bandwidth and possibly CPU and memory usage on the client.
As you surmise, most images are sized beforehand, long before any request. Even with fast CPUs you would not want to do this on the fly.
Smaller images will also mean users that do not have broadband will be able to enjoy your site without waiting for the large images to download.
我个人在服务器上调整图像大小（缩略图）并将它们保存在单独的文件夹中。这有助于我保持较低的带宽。
如果您不想将它们存储在服务器上而只是根据请求（在线）进行操作，您可以使用很酷的脚本，例如 TimThumb 是：http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/
一切都取决于服务器的负载和每页图像的数量（当然还有流量）
如果您想将它们存储在服务器上，则可以使用 http://phpthumb.sourceforge.net/ 或 ImageMagick （我将其用于缩略图+水印）
I personaly do image resizing (thumbnails) on server and keep them in separate folder. This helps me to keep bandwidth low.
If you do not want to store them on your server and just do it on request (online) you can use cool scripts like e.g. TimThumb is : http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/
Everyting depends on your server's load and number of images per page (or traffic of course)
If you want to store them on your server then you can use http://phpthumb.sourceforge.net/ or ImageMagick (I use it for thumbnails + watermarks)