首页 > 交互 > 关键词  > 图片格式最新资讯  > 正文

图片格式与设计那点事儿

2012-05-24 15:27 · 稿源:淘宝UED

第一次写技术博客,有不尽如人意的地方,还请见谅和指正。

为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定了解,这样才能更好的表达你的创意和想法。

除此之外,我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果,什么样的设计才更适合Web页面;页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。

有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低。了解图片格式的特性就是为解答这些困惑从而让我们设计的产品更好、更快。

本文主要包括以下几方面内容:

  1. 1、基本概念
    • 矢量图与位图
    • 有损压缩与无损压缩
  2. 2、实际应用
    • 什么时候应该使用PNG
    • 什么时候应该使用JPG
    • 总结
  3. 3、思考与实践
    • 什么样的设计更适合Web页面?
    • 我们还可以做些什么?
  4. 4、附录-Photoshop中各种参数的含义及设置技巧 

1、基本概念

要了解图片格式的特性,首先得从一些基本概念开始。这部分内容读起来可能会比较枯燥,但如果你耐着性子读完它,相信会获益匪浅。

矢量图与位图

矢量图-完美的几何图形

矢量图是通过组成图形的一些基本元素,如点、线、面,边框,填充色等信息通过计算的方式来显示图形的。就好比我们在几何学里面描述一个圆可以通过它的圆心位置和半径来描述,当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述它的样式。而电脑在显示的时候则通过这些数据去绘制出我们定义的图像。

矢量图的优点在于文件相对较小,并且放大缩小不会失真。缺点则是这些完美的几何图形很难表现自然度高的写实图像。

需要强调说明的是我们在web页面上所使用的图像都是位图,即便有些称为矢量图形(如矢量icon等)也是指通过矢量工具进行绘制然后再转成位图格式在web上使用的(区别于像素绘制的图形)。

位图-神奇的拼图

位图又叫像素图或栅格图,它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图,只不过每个拼块都是一个纯色的像素点,当我们把这些不同颜色的像素点按照一定规律排列在一起的时候,就形成了我们所看到的图像。所以当我们放大一幅像素图时,能看到这些拼片一样的像素点(如下图)。

位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大,放大和缩小图像会失真。

尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图,即他们都是通过记录像素点的数据来保存和显示图像,但这些不同格式的图像在记录这些数据时的方式却不一样,这就是涉及到有损压缩无损压缩的区别。

  • 相关推荐
  • 大家在看
  • iOS 15未修复Bug:删消息会话导致相册中保存的图片也躺枪

    iOS 15 似乎正在成为苹果有史以来 Bug 最多的软件版本之一,其中最让人无法忍受的,莫过于意外导致 iPhone 用户的照片丢失。MacRumors 援引许多运行 iOS 15 的 iPhone 用户的抱怨称,当他们从消息 App 中删除一个会话时,某个 Bug 会导致该线程中保存的任何照片,也会在下一次执行 iCloud 备份时、被从本机相册中删除。(图 via BGR)考虑到许多 iPhone 都已经习惯了将照片备份到云端,这个 Bug 将导致他们的本机 / iCloud 相册在?

  • 微信回应“后台读取相册”:便于快速发送图片 最新版本将取消

    昨日,有网友反映,iOS版微信、QQ、淘宝等多款App在后台反复读取用户相册。根据用户描述,开启新版iOS15的“隐私”功能有“记录APP活动”,可以存储7天内APP访问位置或麦克风等数据,该用户发现,微信在用户未主动激活应用的情况下,在后台数次读取相册,每次读取时间长达40秒至1分钟不等。

  • 新一代MacBook Pro的DVT单元图片揭示了M1X芯片和16GB内存规格

    据报道,随着大规模生产的开始,M1X MacBook Pro将在本月晚些时候推出。更多的证据表明,这些重新设计的旗舰笔记本产品将很快揭开面纱,图片揭示了DVT(设计验证测试)测试装置的规格,显示这款机型将内置苹果强大的M1X自研芯片,以及其他附加功能。根据图片,DVT M1X MacBook Pro单元还提供了512GB的板载存储,但尚未确认这是否是基本型号。据Twitter用户Majin Bu称,M1X MacBook Pro的潜在规格已经通过一张图片披露。我们注意到?

  • Firefox 93开始支持XFA PDF格式文档

    在 Firefox 93 版本中,Mozilla 宣布浏览器内置的 PDF 阅读器 PDF.js 现在支持 AcroForm 和 XFA 表单以及标记的 PDFS。在不需要外部应用程序的情况下,Firefox 浏览器能够让你直接查看上网过程中遇到的 PDF 文件。如果你点击一个 PDF 链接或在下载面板上打开任意 PDF,它将被 Firefox PDF Viewer 渲染。注意:请记住,Firefox 不是一个成熟的 PDF 浏览器,如果 Firefox 不显示字体、颜色,或将整个 PDF 文档渲染成空白,那么你必须

  • Mozilla Firefox 93正式版安装文件已经提前上线 首次默认支持AVIF图片

    虽然正式的公告还没有发布,但作为Mozilla网络浏览器的最新月度功能更新,今天发布的Firefox 93.0已经可以下载。今年Firefox的改进并不算特别大,但Firefox 93算是一个令人兴奋的版本之一。在之前失败的尝试之后,Firefox 93.0版本终于开始默认启用了AVIF图像支持。AVIF图像支持作为基于AV1视频编解码器的图像标准,提供了极大的带宽节省能力,现在这种格式已经可以在Firefox稳定版中工作。自2020年8月以来,AV1图像格式已经在Chro

  • Radeon RX 6600显卡上市在即:讯景、华擎、撼讯产品图片曝光

    泄露文件表明,AMD 或于 10 月 13 日发布更加主流的 Radeon RX 6600 显卡新品。可知其配备了 Navi 23 GPU 核心,拥有 28 个计算单元(CU)/ 1792 个流处理器。作为参考,已上市的 RX 6600 XT 拥有 32 CU / 2048 个流处理器。然而尽管两者都是 128-bit 位宽 @ 8GB 容量的 GDDR6 显存,但 RX 6600 的频率却从 16Gbps 降到了 14Gbps,导致带宽也缩水 12.5% 。赶在 AMD Radeon RX 6600 显卡新品上市前,VideoCardz 已经汇总了来自多家

  • 2345看王再推重磅功能 兼容OFD/PDF双格式查看

    近日, 2345 看图王发布了V10. 6 版本。作为升级后的新版本,V10. 6 版本兼容OFD/PDF双格式查看阅读,可以帮助用户更轻松快捷地进行这两类文档的处理工作。不得不说, 2345 看图王这次升级后“好用度”满分。兼容OFD双格式 电子发票批量打印很多人都不知道怎么打开OFD格式的文件,对OFD格式也不太了解。OFD(OpenFixed-layout Document)是版式文件格式国家标准,是增值税电子发票开具、流转、入账的指定格式,是电子公文、电子证照?

  • 摩托罗拉Moto E40规格、价格和图片已在零售商的网站上列出

    摩托罗拉上个月发布了Moto E20,但自从Moto E40的规格和官方图片在网上泄露后,我们知道该公司正准备推出MotoE40。虽然摩托罗拉还没有透露关于Moto E40的任何信息,但这款智能手机已经在罗马尼亚零售商eMAG的网站上列出,这证实了之前泄露的图片和规格,并透露了价格。摩托E40的售价为779.99兰特(折合180美元/160欧元),有两种颜色选择--粉色和灰色。零售商说它采用了八核处理器,但没有分享更多细节,但我们从以前的泄漏中知道?

  • 摩托罗拉G Pure和Moto E40官方图片在发布前泄露

    摩托罗拉似乎正在为至少几款新设备的发布做准备,时间可能会在下个月发布。Moto G Pure和Moto E40之前已经在泄漏信息中出现,现在我们得到了另一轮官方渲染图。让我们从Moto G Pure开始--这是两款产品中的相对高端产品。我们已经对它的规格表有了相当多的了解,预计Moto G Pure将使用Helio G25芯片组,也可能是P22,基本配置为4GB内存和32GB存储。在相机方面,G Pure可能会有一个4800万像素的主摄像头和一个200万像素的深度传感器?

  • []Apple Watch Series 7今晚8点开订 各型号售价提前曝光

    Apple Watch Series 7 于今天(10 月 8 日)晚上 8 点开始接收预订,并于 10 月 15 日发售。在正式发售之前,知名爆料人士乔恩·普罗瑟(Jon Prosser)透露了 Series 7 的售价基本上和 Series 6 相同。根据曝光的售价,苹果公司似乎延续了 Apple Watch Series 6 的定价策略,铝制型号的 45 毫米版本最高售价为529 美元,具有手机功能。不锈钢版本的 41 毫米型号起价为 699 美元,更大的 45 毫米表壳尺寸则为 749 美元。Apple Watch E

这篇文章对你有价值吗?

  • 热门标签

热文

  • 3 天
  • 7天