文档章节

PS技巧:将图片存储为web所用格式的最佳方式!

王尘宇
 王尘宇
发布于 2017/09/07 00:04
字数 1302
阅读 3
收藏 0
存储为web所用格式 互联网几乎是当今最大的艺术、图形和相片分享平台之一,因此掌握一些保存为网页格式的基础知识就非常重要了。实际上,保存为网页格式是一项平衡艺术——你必须在图片品质和介质的文件尺寸之间做好平衡,以便满足你的个人需求。 在速度相对重要的地方(如迅速地加载网站),你可能需要牺牲一些图片品质。而在品质重要的地方,则需要牺牲一点速度。这堂课程的目的就是向你介绍一些方法,在这两个因素之间寻求平衡,与此同时保留非常好的图像品质。 无损 vs 损耗数据 虽然存在有非常多的图片格式(仅举几例,如jpeg,gif和png),但是依据压缩方法不同,所有的图片都能进一步归类为两大类别:无损和有损。无损数据压缩保证了图像在没有任何品质和信息丢失的情况下重现,而有损数据压缩的结果就是可能造成品质和信息的丢失。在平面设计领域最主流的无损媒介格式包括GIF,PNG,以及TIFF,而JPEG是最主流的有损压缩的图形格式。 如何用PHOTOSHOP保存网页格式 PS拥有非常好的方法来为网页优化图片。在ps中,选择文件>存储为web格式或者使用快捷键ctrl+alt+shift+s。一个新的对话框将会弹出,这里有所有为网页保存和优化图片的设置。 wps_clip_image-23841 我会通过以下一些生活中的案例来演示如何使用对话框中的设置。 为网页存储图像 由于图片巨大的文件体积,它们更多是以有损压缩格式来保存的。甚至在拍照时,相对于数倍大小的RAW格式,相机也倾向于用有损格式(如JPEG)来保存图片。 JPEG是日常中首选的图片格式,它是以它的创造者“联合图像专家小组”来命名的。Jpeg之所以能够成为标准,是因为它在压缩图像数据的同时可以保留高品质,并且在相关信息上能够接近无损图像的效果。 当你在保存图片的时候,有几种网页格式预设可供选择。对于一张图片,你应该考虑是使用JPEG 低、JPEG 中,还是JPEG高。观察下面的对比图,(可以)发现案例中的图片经过压缩后并没有多大的品质损耗。相比起超过250KB的源文件,我们选择中等质量或者高等质量的压缩预设就能够得到一个大小不超过30KB,并有合适品质的图片。 wps_clip_image-22304 GIF图像 有些时候,你会被要求用无损格式来保存,以便最好地优化你正在创作的任何作品。这在网页设计中时常遇到,在布局上使用比普通图片更少的颜色。 GIF,全称为“图像互换格式”,是一种只用到256个颜色调色板的图片格式,这让它成为不需要使用太广泛色域的网页图片的理想选择。GIF也能将单个像素设置成透明,不过这并不在这个教程的讨论范围之内。下面展示了一张(使用着256个颜色的)GIF图像和JPEG图像的对比照,它们拥有同样的大小.正如你所见到的,无损GIF图片能更好的接近源文件。 wps_clip_image-5919 因为GIF图像受到256色的限制,它本应该极少被用到图片中,但是他们恰好适合那些使用纯色或是有限色彩的图像。对于图片来说,通常来说不是使用JPEG有损压缩,就是GIF无损格式。 高品质图像和无损PNG PNG,全称为“可移植网络图形”,是一种类似于GIF的无损格式,只是它支持更为丰富的色彩(有时候也让它的体积变大),而且可以支持带透明图层的Alpha通道,而非单一透明像素。 PNG图像正在日渐取代GIF,主要是因为在支持更丰富的色彩方面,png通常比gif的压缩效果要更好。虽然它还不想GIF有广泛的支持,但是无疑它正朝着那个方向前进。 当图片必须保留完整品质在网络上进行传输的时候,PNG是最佳的选择。比起用JPEG传输图片,(PNG)会令你得出更大的图片大小,但是有时候这是一个非常有必要的牺牲。当一个图片包含锐利的线条、以及必须保留清晰的文字时,PNG通常是一个更好的选择,当然了,最终还是要由设计师来决定使用哪一种格式。

© 著作权归作者所有

共有 人打赏支持
王尘宇
粉丝 1
博文 450
码字总数 469557
作品 0
西安
私信 提问
给前端工程师的快速切图小技巧 (切出jpg图标或png透明图)

部分看了文章的设计师,来找我说怎么切图。sorry?在我的理解,这就是切图啊,但是他们所指的“切图”是,怎么把设计图制作成html页面。 这就说明,现在人们对于前端都是有误区的。认为前端是...

arTYards
07/17
0
0
DW(HTML-基础知识点1)

1、认识网页: a. 分析网页结构:header、banner、main、footer b. 如何拆分网页:一级盒、二级盒、三级盒等 02、网页HTML: a. HTML:超文本标记语言(Hyper Text Markup Language); b. 网...

小凤凤zero
05/31
0
0
PhotoShop制作gif动态广告效果示例

本文将通过三个示例介绍gif制作广告,gif 动态广告网页展示效果 米扑博客:开业了 https://blog.mimvp.com/article/1.html 本示例需要用到的软件环境: MacOS High Sierra Version 10.13.4 ...

sunboy2050
07/07
0
0
使用photoshop 10.0制作符合社保要求的照片

北京市社保新参统人员照片修制方法 修改目标:照片规格:358像素(宽)×441像素(高),分辨率350dpi。 颜色模式:24位RGB真彩色。 储存格式:JPG 储存容量:大于9KB,小于20KB 使用Photoshop...

itwriter
2014/02/25
0
0
GIF/PNG/JPG和WEBP/base64/apng图片优点和缺点整理

 GIF/PNG/JPG/WEBP/APNG都是属于位图(位图 ,务必区别于矢量图);  GIF/PNG和JPG这三种格式的图片被广泛应用在现今的互联网中,gif曾在过去互联网初期慢速的情况下几乎是做到了大一统的地位...

凡尘里的一根葱
2015/10/01
604
0

没有更多内容

加载失败,请刷新页面

加载更多

从源码入手,一文带你读懂Spring AOP面向切面编程

之前《零基础带你看Spring源码——IOC控制反转》详细讲了Spring容器的初始化和加载的原理,后面《你真的完全了解Java动态代理吗?看这篇就够了》介绍了下JDK的动态代理。 基于这两者的实现上...

公众号_Zack说码
16分钟前
4
0
maven 常用命令

mvn deploy -Dmaven.test.skip=true mvn source:jar deploy -Dmaven.test.skip=true mvn dependency:tree -Doutput=1.txt...

yzzzzzzzz
18分钟前
1
0
JavaScript之Promise对象

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了 Promise 对象。 Pr...

前端攻城老湿
18分钟前
4
0
mysql事务,select for update,及数据的一致性处理

在MySQL的InnoDB中,预设的Tansaction isolation level 为REPEATABLE READ(可重读) 在select 的读取锁主要分为两种方式 select .... lock in share mode select ..... for update   这两...

细节探索者
21分钟前
2
0
python 将txt文件转换成excel

emmm,作为一个小白,不会的东西真的太多了,这两天好头大啊!加油坚持吧! #file_affilication = open('Affiliations.txt','r')import xlwtimport os import sysdef txt_xls(...

BellaYu
25分钟前
5
2

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部