关于创建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配置文件的,如果要查看的话可以如下操作: 右键你的项目,然后 ...
随机推荐
- NIO网络访问模式实践
1.创建NioNest12类 一个线程监听5个端口的事件 public class NioTest12 { public static void main(String[] args) throws ...
- MySQL的tmpdir临时文件说明及使用设置
晚上收到告警MySQL数据库服务器磁盘占满发现是,数据库在tmpdir写数据的文件占用过大 执行命令lsof -n | grep deleted印出所有针对已删除文件的读写操作,这类操作是无效的,也正 ...
- JVM探究之 —— 类加载器-双亲委派模型
虚拟机设计团队把类加载阶段中的“通过一个类的全限定名来获取描述此类的二进制字节流”这个动作放到Java虚拟机外部去实现,以便让应用程序自己决定如何去获取所需要的类.实现这个动作的代码模块称为“类加载器 ...
- java8在Stream的forEach操作时获取index
import java.util.Objects; import java.util.function.BiConsumer; /** * * @author yangzhilong * @dat ...
- Kafka集群管理工具kafka-manager
一.kafka-manager简介 kafka-manager是目前最受欢迎的kafka集群管理工具,最早由雅虎开源,用户可以在Web界面执行一些简单的集群管理操作.具体支持以下内容: 管理多个集群 ...
- PhantomJS笔记,Node.js集成PhantomJS
PhantomJS笔记,Node.js集成PhantomJS 转 https://www.linchaoqun.com/html/cms/content.jsp?menu=index&id=1 ...
- Python logging模块日志存储位置踩坑
问题描述 项目过程中写了一个小模块,设计到了日志存储的问题,结果发现了个小问题. 代码结构如下: db.py run.py 其中db.py是操作数据库抽象出来的一个类,run.py是业务逻辑代码.两个 ...
- PMP 第6章错题总结
项目进度管理的步骤: 1.项目的商业价值指特定项目的成果能够为相关方带来的有形的或无形的效益. 其中有形的效益包括:股东权益.市场份额.货币资产 无形的效益包括:品牌认知度.商誉.战略一致性等2. ...
- OpenShift 3.11离线环境的jenkins演示
离线安装完成后,一般情况下只装了个基础环境,catalog镜像没有导入,本文主要侧重在jenkins的一些环境设置和演示. 1.导入镜像 首先follow下面链接下载镜像 https://docs.o ...
- Apache限制IP并发数和流量控制
使用mod_limitipconn模块限制IP并发连接数安装: wget http://dominia.org/djao/limit/mod_limitipconn-0.24.tar.bz2 tar ...