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. 





  • 相关阅读:

    【工作】---前后端联调
    【react】---Immutable的基本使用
    【react】传值
    【原生】 HTML DOM 事件,各种事件类型、事件种类
    两台笔记本电脑之间实现屏幕扩展
    【看图学习后台管理系统】
    【bug】在react开发中,使用link 跳转中,无法点击跳转的问题
    【前端工程师】 web 安全问题
    【前端工程师】 性能和效率 优化的问题
  • 原文地址:https://www.cnblogs.com/FBsharl/p/10027286.html
Copyright © 2011-2022 走看看