常见的图片格式:
- jpg图像格式:
JPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,产品类的图片经常用jpg格式的 - gif图像格式:
GIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果 - png图像格式
是一种新兴的网络图形格式,结合了GIF和JPEG的优点,具有存储形式丰富的特点,能够保持透明背景 - PSD图像格式
PSD格式是Photoshop的专用格式,里面可以存放图层、通道、遮罩等多种设计草稿。
使用图片的规范
内容图
内容图多以商品图等照片类图片形式存在,颜色较为丰富,文件体积较大
- 优先考虑 JPEG 格式,条件允许的话优先考虑 WebP 格式
- 尽量不使用PNG格式,PNG8 色位太低,PNG24 压缩率低,文件体积大
- PC平台单张的图片的大小不应大于 200KB。
背景图
背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片
- PNG 与 GIF 格式,优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
- 图像颜色比较简单的,如纯色块线条图标,优先考虑使用 PNG8 格式,避免不使用 JPEG 格式
- 图像颜色丰富而且图片文件不太大的(40KB 以下)或有半透明效果的优先考虑 PNG24 格式
- 图像颜色丰富而且文件比较大的(40KB - 200KB)优先考虑 JPEG 格式
- 条件允许的,优先考虑 WebP 代替 PNG 和 JPEG 格式
插入图片和背景图片区别
- 插入图片 ,用的最多, 比如产品展示类 移动位置只能靠盒模型。 padding margin
- 背景图片我们一般用于小图标背景 或者 超大背景图片 。 背景图片 只能通过 background-position
精灵图 (针对背景图)
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图。
有效地减少服务器接受和发送请求的次数,提高页面的加载速度。
方法:
- 精确测量,每个小背景图片的大小和 位置。
- 给盒子指定小背景图片时, 背景定位基本都是 负值。
- 需要使用CSS的 background综合写法,其中最关键的是使用background-position 属性精确地定位。
字体图标
优点:
可以做出跟图片一样可以做的事情,改变透明度、旋转度,等…
但是本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等…
本身体积更小,但携带的信息并没有削减。
几乎支持所有的浏览器
移动端设备很需要
使用流程:
- UI人员设计
- 前端开发人员转换成页面能使用的字体文件, 而且需要生成的是兼容性的适合各个浏览器的。
推荐网站:icomoon字库 - 下载兼容字体包
- 字体引入到HTML
得到压缩包之后,我们得知字体图标 本质就是 字体文件。 这个压缩包不要删掉!!!!!!
4.1 首先把 fonts文件夹放入我们 根目录下 。
4.2 html标签内里面添加结构
4.3 在样式里面声明字体: 告诉别人我们自己定义的字体(一定注意字体文件路径的问题)
4.4 给盒子使用字体
span {
font-family: "icomoon";
}
4.5 如果后续需要,我们还要追加字体图标 (这里就体现出上边压缩包没有删除的重要性了)
原来的字体图标不够用了,我们需要添加新的字体图标,但是原来的不能删除,继续使用,此时我们需要这样做:把压缩包里面的selection.json 重新上传,然后,选中自己想要新的图标,从新下载压缩包,替换原来文件即可。
网站ico图标
-
首先把favicon.ico 这个图标放到根目录下。
-
再html里面, head 之间 引入 代码。
<link rel="shortcut icon" href="favicon.ico" />
制作ico:
- 首先把我们想要的切成图片。
- 要把图片转换为 ico 图标,我们借助于第三方转换网站: 比特虫。
LOGO的优化
- logo 里面 首先放一个 h1 标签 ,目的是为了提权,告诉搜索引擎,这个地方很重要
- h1里面在放一个连接,可以返回首页的, 给连接一个 大小 和 logo 的背景图片
- 连接 里面要放文字(网站名称),为了搜索引擎收录我们。 但是文字不要显示出来
- 要用 text-indent 移到盒子外面 (text-indent: -9999px) 然后overflow:hidden 淘宝的做法
- 直接给font-size: 0; 就看不到文字了, 京东的做法。
- 最后给 连接一个 title 这样鼠标放到logo 上, 就可以看到提示文字了
知识点内容来自教学视频,自己总结归纳。