HTML Images

移动版本的网页中需要调整图片大小来适应屏幕尺寸，一个简单的方法是使用表格内置的图片，设置图片的百分比。
当然这个方法并没有实质改变传输图片的大小，因此并非最好的方案。Groupon以及很多网站都是这样处理的。
下面是关于图片的一些简单知识：

 

Y ou can change the size of an image using the width and height attributes.

I n general, it is not advisable to reduce image size using these settings, since the image will be transferred over the internet in its original size no matter what reduction is set for it. This will slow the loading of your webpage.

T his means, that if you have an image that is bigger in size than you want it to be on your page, you should reduce the size in a graphics program, rather than reducing the size on the webpage using the width and height attributes.

O n the contrary, sometimes, it can be wise to enlarge images using this technique.

B elow are two presentations of the exact same image - with different settings for width and height.

<img src="http://www.echoecho.com/rainbow.gif " width="60" height="60" >

<img src="http://www.echoecho.com/rainbow.gif " width="120" height="120" >

I f you leave out the settings for width and height, the browser will automatically use the real size of the image.

H owever, you should always enter the settings for width and height, even when using the real size!

T he reason is that if the settings are left out, the browser can't build the page until the image is loaded entirely.

T his means, that the visitor cannot read text around the image while the image itself is loading - which in turn will give the visitor an impression of a slow loading page.

T his becomes especially true if the image is inside a table.
In that case, the whole table will not be shown until the image is loaded entirely.