关于创建Web图像时应记住的五个要素
1. 格式与下载速度
当前,Web上用的最广泛的三种格式是GIF、PNG和JPEG。我们的目标是选择质量最高,同时文件最小的格式。
WebP图像格式
谷歌建立了另一种图像格式,名为WebP。
这种格式既支持有损压缩也支持无损压缩,它产生的文件大小也远小于JPEG和PNG。跟PNG一样,它还支持alpha透明。
2. 颜色
大多数计算机显示器可以显示数以百万计的颜色 ,但也有例外的情况。
有的图像格式的调色板是有限的。GIF和PNG-8图像只有256种颜色,对标志和图标来说通常这已经足够了。
JPEG、PNG-24和PNG-32均支持超过1600万种的颜色,因此照片和复杂的插图应选择这些格式。
不过,需要指出的是,对于这些图像,大多数情况下应使用JPEG。
3. 大小(尺寸)
对于网站上的图像,多大合适呢?
简单地说 ,通常应控制在几百个像素宽。
可缩放矢量图形(SVG)
对于使用SVG图像语言创建的图像,无论放大还是缩小都不会影响其质量(以及其他的一些参数)。
而且,对于某个SVG图像来说,无论它在页面中显示的尺寸是多大,其文件大小总是恒定的。
目前,几乎所有的现代浏览器都提供基本的SVG支持
4. 透明度
可以利用透明度为图像创建非矩形的边缘,在图像的下面设置背景色或图案。
PNG和GIF都支持透明度,JPEG则不支持。
在GIF格式中,一个像素要么是透明的,要么是不透明的。这称作索引色透明(index transparency)。
而PNG则既支持索引色透明,又支持alpha透明(alpha transparency)。alpha透明可以控制一个像素透明的程度。
也就是说,一个像素可以部分透明,而非要么透明要么不透明。
这意味着具有复杂透明背景的图像使用PNG的效果要好于使用GIF的效果,因为使用PNG可以让边缘变得平滑,避免产生锯齿。
PNG-8既支持索引色透明,也支持alpha透明 ,但需要使用Fireworks这样的程序才能将图像保存为PNG-8格式。
Photoshop不支持alpha透明的PNG-8,但支持alpha透明的PNG-32。
这也是万维网上大多数透明PNG都 是PNG-32的原因。总之 ,对于透明图像,应使用PNG-8或PNG-32。后者允许使用超过256种颜色。
5. 动画
动画可以保存为GIF,但不能是JPEG或PNG。实际上,使用图像表现动画已经用得越来越少了。
(一种例外的情况是那些好玩的GIF动画,它们在Tumblr这类网站相当流行。)
我们通常使用CSS动画、JavaScript、HTML5 Canvas、SVG和Flash创建动画。
近几年,使用Flash创建的动画越来越少了。这主要是由于iOS不支持Flash,且其他标准的Web技术的能力和浏览器支持程度都提升了很多。
关于创建Web图像时应记住的五个要素的更多相关文章
- idea 为模块添加Tomcat依赖 解决: Intelij IDEA 创建WEB项目时没有Servlet的jar包
解决: Intelij IDEA 创建WEB项目时没有Servlet的jar包 今天创建SpringMVC项目时 用到HttpServletRequest时, 发现项目中根本没有Servlet这个包, ...
- C# 创建Web项目时 可以选择的类型在不同VS版本下的对比
上面这个界面应该是 vs2010的 一. VS2012 .VS2013 其实每个模板的意思,在右边已经显示出来了.Empty,就是一个空的模板,创建后里面除了一个web.config外什么都没有:We ...
- 解决: Intelij IDEA 创建WEB项目时没有Servlet的jar包
今天创建SpringMVC项目时 用到HttpServletRequest时, 发现项目中根本没有Servlet这个包, 在网上搜了一下,这个问题是因为web项目没有添加服务器导致的. 配置tomec ...
- 使用Eclipse创建Web项目时WEB-INF下找不到web.xml问题详解
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/yjrguxing/article/deta ...
- 使用maven创建web项目时后面多出来Maven Webapp如何删除
类似这样: 解决办法:
- 创建maven工程时总是带有后缀名Maven Webapp解决办法
做项目时突然遇到了一个新问题,从前没有的,今天不知怎么了突然有了这个问题,maven创建web项目时多出了后缀名maven webapp ,很碍眼,而且访问路径还得删了,这个后缀名才可访问,所以找了答 ...
- macOS Sierra Version 10.12.6 环境下Tomcat的下载与安装以及InterlliJ IDEA 2017.2 环境下配置Tomcat 与创建Web项目
一.Tomcat的下载与安装 1.官网(http://tomcat.apache.org/)下载Tomcat 9.0 Core:zip包: 2.解压到指定的文件夹即可安装完成: 3.测试是否安装成功 ...
- 使用 ASP.NET Core MVC 创建 Web API(五)
使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...
- eclipse创建web项目web.xml配置文件笔记
1.使用eclipse创建web项目时,如果直接finish的话就没有默认生成web.xml配置文件,此时在你的项目下是看不到web.xml配置文件的,如果要查看的话可以如下操作: 右键你的项目,然后 ...
随机推荐
- EChart 标题 title 样式,x轴、y轴坐标显示,调整图表位置等
示例里工作一般情况是够用了,更复杂的可以查询教程: title 官方解说:http://echarts.baidu.com/option.html#title 坐标相关: X轴:http://echa ...
- -[UITableView copyWithZone:]: unrecognized selector sent to instance 0x7XXXXXX00
-[UITableView copyWithZone:]: unrecognized selector sent to instance 0x7XXXXXX00 -[Class copyWithZon ...
- [转]跨域问题(CORS / Access-Control-Allow-Origin)
原文链接:https://blog.csdn.net/xcbeyond/article/details/84453832 1.前言 最近在项目中,调用Eureka REST接口时,出现了CORS跨越问 ...
- Springmvc 异步处理
package com.lookcoder.haircutmember.controller.login.page.async; import org.slf4j.Logger; import org ...
- Java学习-053-JSON工具类演示
日常开发工作,经常遇到使用JSON数据,好久没有写了,今晚抽了三个小时时间写了个JSON工具类,主要包含如下几个方法: 获取JSON字符串所有键路径列表: 获取JSON字符串所有键值列表: JSON数 ...
- 卷积神经网络概念及使用 PyTorch 简单实现
卷积神经网络 卷积神经网络(CNN)是深度学习的代表算法之一 .具有表征学习能力,能够按其阶层结构对输入信息进行平移不变分类,因此也被称为“平移不变人工神经网络”.随着深度学习理论的提出和数值计算设备 ...
- (原)x264代码中的码流控制学习
(本文主要是自己的学习笔记,如果有误,请留言,一起讨论和更正.)这里采用x264的代码进行走读的方式,来学习qp在码流控制中过程. 在ABR模式下,当我们设置一个bitrate的平均码率以后,x264 ...
- OpenStack(二)——使用Kolla部署OpenStack-allinone云平台
(1).Kolla概述 Kolla是OpenStack下用于自动化部署的一个项目,它基于docker和ansible来实现,其中docker主要负责镜像制作和容器管理,ansible主要负责环境的部署 ...
- 123456123456----updateV#%#6%#%---pinLv###1%%%----com.zzj.CarCleanGame567---前show后广--儿童洗车-222222
com.zzj.CarCleanGame567---前拼show后广--儿童洗车-
- 工控随笔_24_西门子TIA 博图硬件目录的更新
西门子博图软件,不但体积庞大,功能也很复杂,与经典的Step7相比,如果不是经常使用,一般都会有一种很难使用的感觉. 而且相比原来的Step7操作有点不太一样.这里简单的说一下硬件目录的更新. 有两种 ...