zoukankan      html  css  js  c++  java
  • HTML第五章总结

    A Chapter for <img>

    前言

    这一章讲了 Web 图片 format 的各自的优缺点和elements of 's attributes.

    Section1:Q1:How the browser work with images?

    1. First, the Browser retrieve the HTML page, but doesn't get the images.
    2. Then, retrieved the first image, and then moves on to the next image
    3. ...

    Section1:Q2: How images work?

    There are ONLY 3 formats are commonly used in Web:JPEG,PNG and GIF.

    • JPEG:Work for continuous tone images, and are smaller. But it throw away some information about the image.
    • PNG:Work for images with solid colors, comes in 3 formats:PNG-8,PNG-24 and PNG-32. A lostless format. Smaller than GIF but larger than JPEG.
    • GIF:Work for imagine with solid colors.It can represent images with up to 256 colors. A lossless format. Support transparency. Support animation.

    One more thing : PNG can have anti-aliased transparent area but GIF can't.

    Section2:Attributes of <img>

    • src="":its value not only can use relative path, but also URL src is short for "source".
    • alt="":If an image can't found, the alt attribute is displayed instead.
    • width="" 和 height="":To size up images.

    Section2:Use Photoshop to make changes

    Because big image can make your page slow to load, and attribute width="" &height=""doesn't change the file storage. So, you'd better crop it and even make some thumbnails to see a lager version of the image.

    For JPEG(photos)
    : there are some options needed to change:

    • Format :JPEG
    • Quality:Medium is OK
    • New size: less than 800px:Browsers are 800px ~1200px wide, so the width should less than 800 px.

    For PNG(Logo)

    • Format :PNG-8
    • Colors:256 is OK
    • Transparency:checked
    • Matte :with the background color

    One more thing:
    Notice the small box:

    It shows times and storage. 





  • 相关阅读:
    Haproxy图解
    Keeplived 配制图解
    日志文件 的管理 logrotate 配置
    Haproxy+MYSQL 负载均衡 原创
    MySQL内存----使用说明全局缓存+线程缓存) 转
    MYSQL内存--------启动mysql缓存机制,实现命中率100% 转
    MYSQL SQL 审核工具 (inception安装步骤)
    MHA手动切换 原创4 (非交互式切换)
    MHA手动切换 原创2 (主参与复制)
    MHA手动在线切换主 原创3(主不参与复制)
  • 原文地址:https://www.cnblogs.com/FBsharl/p/10027286.html
Copyright © 2011-2022 走看看