Web前端-HeadFirst-笔记-图片-height width

1. 属性 height   width

    1.1  按原比例显示时，最好加上高宽属性。

             因为浏览器先显示文本后截取图片，当告知高宽时，浏览器可以提前布局，而不必收到图像后再进行更改。
             此时属性为信息属性。符合html语言功用。

    1.2  不按原比例缩放图片，最好不采用高宽属性。

             此时属性为表现属性，表现属性最好使用CSS修改。

    1.3 当图像过大时

         一般浏览器会开启“auto image resize”,使得图片可以完整显示。
         浏览器的窗口值大约为800px。一般图像最大宽度设置为800px。logo宽度一般在100~200px之间。
         weight height只能调整显示大小，而不能改变获取图片的大小，过大会需要传输的大量数据，浪费时间/流量资源。例如移动设备/流量设备，拨号上网/慢速链接用户。

    1.4 像素，屏幕大小，分辨率，CSS像素

         ppi：像素/英寸。
         经验：96 ppi   标准：72 ppi  
         CSS像素：1/96 ppi。

   1.5 视障人士：

        An img element must have an alt attribute, except under certain conditions.

         alt 只有在图片损坏时显示文本    title  无论是否损坏都会提示图片内容

         alt与title使用区别？

2. 原始图片大，处理方法

    2.1原始图片过大

          宽度超过800px时，事先调节为适合大小的图片再引用。

    2.2使用缩略图显示，当点击在转入大图片时。

          小技巧：

              【1】使用不同的文件夹保存，则可以在引用时只修改路径而不改变名字。
              【2】缩略图，最好是统一规格的大小。当图片原始比例不一致，或者长款颠倒时，可以用裁剪符合大小要求的部分画面代替缩小图片。

              【3】图片单独保存为html页面，且这些html页面另存为一个新的文件夹。