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.

HTML第五章总结的更多相关文章

  1. 《Django By Example》第五章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者@ucag注:大家好,我是新来的翻译, ...

  2. 《Entity Framework 6 Recipes》中文翻译系列 (22) -----第五章 加载实体和导航属性之延迟加载

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第五章 加载实体和导航属性 实体框架提供了非常棒的建模环境,它允许开发人员可视化地使 ...

  3. 精通Web Analytics 2.0 (7) 第五章:荣耀之钥:度量成功

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第五章:荣耀之钥:度量成功 我们的分析师常常得不到我们应得的喜欢,尊重和资金,因为我们没有充分地衡量一个黄金概念:成果.因为我们 ...

  4. 《Linux内核设计与实现》读书笔记 第五章 系统调用

    第五章系统调用 系统调用是用户进程与内核进行交互的接口.为了保护系统稳定可靠,避免应用程序恣意忘形. 5.1与内核通信 系统调用在用户空间进程和硬件设备间添加了一个中间层, 作用:为用户空间提供了一种 ...

  5. Java语言程序设计(基础篇) 第五章 循环

    第五章 循环 5.2 while循环 1.while循环的语法如下: while(循环继续条件){ //循环体 语句(组); } 2.程序:提示用户为两个个位数相加的问题给出答案 package co ...

  6. 读《编写可维护的JavaScript》第五章总结

    第五章 UI层的松耦合 5.1 什么是松耦合 在Web开发中,用户界面是由三个彼此隔离又相互作用的层定义的: HTML是用来定义页面的数据和语义 CSS用来给页面添加样式 JavaScript用来给页 ...

  7. 《Linux内核设计与实现》课本第五章学习笔记——20135203齐岳

    <Linux内核设计与实现>课本第五章学习笔记 By20135203齐岳 与内核通信 用户空间进程和硬件设备之间通过系统调用来交互,其主要作用有三个. 为用户空间提供了硬件的抽象接口. 保 ...

  8. Android深度探索--HAL与驱动开发----第五章读书笔记

    第五章主要学习了搭建S3C6410开发板的测试环境.首先要了解到S3C6410是一款低功耗.高性价比的RISC处理器它是基于ARMI1内核,广泛应用于移动电话和通用处理等领域. 开发板从技术上说与我们 ...

  9. 《java编程思想》读书笔记(一)开篇&第五章(1)

    2017 ---新篇章  今天终于找到阅读<java编程思想>这本书方法了,表示打开了一个新世界. 第一章:对象导论 内容不多但也有20页,主要是对整本书的一个概括.因为已经有过完整JAV ...

  10. python学习心得第五章

    python学习心得第五章 1.冒泡排序: 冒泡是一种基础的算法,通过这算法可以将一堆值进行有效的排列,可以是从大到小,可以从小到大,条件是任意给出的. 冒泡的原理: 将需要比较的数(n个)有序的两个 ...

随机推荐

  1. 通过shell查找访问日志中访问量最大的ip

    日志格式: /Sep/::: +] /Sep/::: +] /Sep/::: +] - /Sep/::: +] - /Sep/::: +] /Sep/::: +] - /Sep/::: +] /Sep ...

  2. centos7 install rabbtimq

    yum install deltarpm erlang wget https://dl.bintray.com/rabbitmq/all/rabbitmq-server/3.7.8/rabbitmq- ...

  3. Install Apache Maven on Ubuntu

    Download the Apache maven from this link https://maven.apache.org/download.cgi, extract the download ...

  4. ECharts公共组件:title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解

    1. Title mytextStyle={ color:"#333",                           //文字颜色 fontStyle:"norm ...

  5. Git冲突与解决方法【转】

    本文转载自:https://www.cnblogs.com/gavincoder/p/9071959.html Git冲突与解决方法 1.git冲突的场景 情景一:多个分支代码合并到一个分支时: 情景 ...

  6. TV Show Game 【2-SAT】

    问题 K: TV Show Game 时间限制: 1 Sec  内存限制: 512 MB  Special Judge 提交: 51  解决: 10 [提交] [状态] [命题人:admin] 题目描 ...

  7. excel2010的使用笔记

    新增的 "工具" 主选项卡 不管是word还是excel 的2010 , 在进行编辑一些图片, 图表, 表格等工具的时候, 都会 "动态"的生成相应的 &quo ...

  8. 重要, 要播放音乐视频等多媒体: 安装fedora23中的多媒体编码器

    区分: 大多数用户和高级用户? 删除 dnf remove software-name 启动软件管理器: gnome-software. 要删除系统 "自带的" 软件, 如empt ...

  9. [AtCode 4104] Small and Large Integers

    题目链接:https://abc093.contest.atcoder.jp/tasks/abc093_b?lang=en 这个题虽然很水,但是还是很容易踩坑,比如我,直接想到了[b,a]之间的长度和 ...

  10. 如何规避Adobe Flash Player中重橙网络的广告弹窗

    具体解决之道,参见卡饭论坛风之咩的帖子:https://bbs.kafan.cn/thread-2123485-1-1.html