HTML第五章总结
A Chapter for <img>![]()
前言
这一章讲了 Web 图片 format 的各自的优缺点和elements of 's attributes.
Section1:Q1:How the browser work with images?
- First, the Browser retrieve the HTML page, but doesn't get the images.
- Then, retrieved the first image, and then moves on to the next image
- ...
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第五章总结的更多相关文章
- 《Django By Example》第五章 中文 翻译 (个人学习,渣翻)
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者@ucag注:大家好,我是新来的翻译, ...
- 《Entity Framework 6 Recipes》中文翻译系列 (22) -----第五章 加载实体和导航属性之延迟加载
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第五章 加载实体和导航属性 实体框架提供了非常棒的建模环境,它允许开发人员可视化地使 ...
- 精通Web Analytics 2.0 (7) 第五章:荣耀之钥:度量成功
精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第五章:荣耀之钥:度量成功 我们的分析师常常得不到我们应得的喜欢,尊重和资金,因为我们没有充分地衡量一个黄金概念:成果.因为我们 ...
- 《Linux内核设计与实现》读书笔记 第五章 系统调用
第五章系统调用 系统调用是用户进程与内核进行交互的接口.为了保护系统稳定可靠,避免应用程序恣意忘形. 5.1与内核通信 系统调用在用户空间进程和硬件设备间添加了一个中间层, 作用:为用户空间提供了一种 ...
- Java语言程序设计(基础篇) 第五章 循环
第五章 循环 5.2 while循环 1.while循环的语法如下: while(循环继续条件){ //循环体 语句(组); } 2.程序:提示用户为两个个位数相加的问题给出答案 package co ...
- 读《编写可维护的JavaScript》第五章总结
第五章 UI层的松耦合 5.1 什么是松耦合 在Web开发中,用户界面是由三个彼此隔离又相互作用的层定义的: HTML是用来定义页面的数据和语义 CSS用来给页面添加样式 JavaScript用来给页 ...
- 《Linux内核设计与实现》课本第五章学习笔记——20135203齐岳
<Linux内核设计与实现>课本第五章学习笔记 By20135203齐岳 与内核通信 用户空间进程和硬件设备之间通过系统调用来交互,其主要作用有三个. 为用户空间提供了硬件的抽象接口. 保 ...
- Android深度探索--HAL与驱动开发----第五章读书笔记
第五章主要学习了搭建S3C6410开发板的测试环境.首先要了解到S3C6410是一款低功耗.高性价比的RISC处理器它是基于ARMI1内核,广泛应用于移动电话和通用处理等领域. 开发板从技术上说与我们 ...
- 《java编程思想》读书笔记(一)开篇&第五章(1)
2017 ---新篇章 今天终于找到阅读<java编程思想>这本书方法了,表示打开了一个新世界. 第一章:对象导论 内容不多但也有20页,主要是对整本书的一个概括.因为已经有过完整JAV ...
- python学习心得第五章
python学习心得第五章 1.冒泡排序: 冒泡是一种基础的算法,通过这算法可以将一堆值进行有效的排列,可以是从大到小,可以从小到大,条件是任意给出的. 冒泡的原理: 将需要比较的数(n个)有序的两个 ...
随机推荐
- 通过shell查找访问日志中访问量最大的ip
日志格式: /Sep/::: +] /Sep/::: +] /Sep/::: +] - /Sep/::: +] - /Sep/::: +] /Sep/::: +] - /Sep/::: +] /Sep ...
- centos7 install rabbtimq
yum install deltarpm erlang wget https://dl.bintray.com/rabbitmq/all/rabbitmq-server/3.7.8/rabbitmq- ...
- Install Apache Maven on Ubuntu
Download the Apache maven from this link https://maven.apache.org/download.cgi, extract the download ...
- ECharts公共组件:title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解
1. Title mytextStyle={ color:"#333", //文字颜色 fontStyle:"norm ...
- Git冲突与解决方法【转】
本文转载自:https://www.cnblogs.com/gavincoder/p/9071959.html Git冲突与解决方法 1.git冲突的场景 情景一:多个分支代码合并到一个分支时: 情景 ...
- TV Show Game 【2-SAT】
问题 K: TV Show Game 时间限制: 1 Sec 内存限制: 512 MB Special Judge 提交: 51 解决: 10 [提交] [状态] [命题人:admin] 题目描 ...
- excel2010的使用笔记
新增的 "工具" 主选项卡 不管是word还是excel 的2010 , 在进行编辑一些图片, 图表, 表格等工具的时候, 都会 "动态"的生成相应的 &quo ...
- 重要, 要播放音乐视频等多媒体: 安装fedora23中的多媒体编码器
区分: 大多数用户和高级用户? 删除 dnf remove software-name 启动软件管理器: gnome-software. 要删除系统 "自带的" 软件, 如empt ...
- [AtCode 4104] Small and Large Integers
题目链接:https://abc093.contest.atcoder.jp/tasks/abc093_b?lang=en 这个题虽然很水,但是还是很容易踩坑,比如我,直接想到了[b,a]之间的长度和 ...
- 如何规避Adobe Flash Player中重橙网络的广告弹窗
具体解决之道,参见卡饭论坛风之咩的帖子:https://bbs.kafan.cn/thread-2123485-1-1.html