在哪里可以指定图像尺寸以实现最快的渲染：在HTML或CSS中？ [英] Where to specify image dimensions for fastest rendering: in HTML or in CSS?

问题描述

我了解到，明确指定图片尺寸是最佳做法。浏览器然后可以已经布局页面，同时仍然下载图像本身，从而改善（实现的）页面呈现时间。

这是真的吗？如果是，在HTML或CSS中指定尺寸有什么区别？

• HTML： img src =width =200height =100>


• 内嵌CSS：< img src = style =width：200px; height：100px>


• 外部CSS： #myImage {width：200px; height：200px; } //code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensionsrel =nofollow noreferrer> Google Page Speed ，但如果您通过CSS或HTML，只要您的CSS定位到IMG标记本身而不是父元素：

  
  

  当浏览器打开页面时，以能够围绕可替换元件（例如图像）流动。它可以开始呈现页面，即使在下载图像之前，只要它知道围绕不可替换元素的维度。如果在包含文档中未指定尺寸，或者如果指定的尺寸与实际图像的尺寸不匹配，则一旦下载图像，浏览器将需要回流和重绘。为了防止回流，请在HTML标记中或CSS中指定所有图片的宽度和高度。

  
  

  他们建议不要使用这些尺寸调整图像大小，即始终使用实际尺寸：

  
  

  不要使用宽度和高度规格缩放图像。如果图片文件实际为60 x 60像素，请不要在HTML或CSS中将尺寸设置为30 x 30。如果图片需要较小，请在图片编辑器中缩放，并将其尺寸设置为匹配（详情请参阅优化图片）。

  
  

  
  

  I've learned that it is a best practice to explicitly specify image dimensions. The browser can then already layout the page while still downloading the images themselves, thereby improving (percieved) page rendering time.

  Is this true? And if so, is there a difference in specifying the dimensions in either HTML or CSS?

  • HTML: <img src="" width="200" height="100">
  • Inline CSS: <img src="" style="width: 200px; height: 100px">
  • External CSS: #myImage { width: 200px; height: 200px; }

  解决方案

  According to Google Page Speed, it does not really matter if you specify the dimensions via CSS or HTML, as long as your CSS targets the IMG tag itself and not a parent element :

  When the browser lays out the page, it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML tag, or in CSS.

  However, note that they advise not to resize the image using these dimensions, ie to always use the real dimensions :

  Don't use width and height specifications to scale images on the fly. If an image file is actually 60 x 60 pixels, don't set the dimensions to 30 x 30 in the HTML or CSS. If the image needs to be smaller, scale it in an image editor and set its dimensions to match (see Optimize images for details.)

  这篇关于在哪里可以指定图像尺寸以实现最快的渲染：在HTML或CSS中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！