jpeg和png哪个格式清晰度高？JPGPNG区别在哪图像分辨率如何调整

jpeg和png哪个格式清晰度高？JPGPNG区别在哪图像分辨率如何调整但是如果不能正确的放置图片，上面这些都是废话。所以，让我们一起来看看下面这些在网站上添加图片时的常见问题吧。影响购买意向：93%的顾客认为产品图片才是最能决定他们是否购买产品的重要因素。建立更有效的交流：对于看到的事物，人们能够记住80%（与之相反的是，对于读到的东西，只能记住20%。听到的东西，只能记住10%）。吸引用户：带有图片的文章的浏览量比不带图片的文字的浏览量高94%。提高企业信誉：67%的顾客更喜欢有着清晰、细节丰富的图片的产品（并且认为产品的图片比产品描述更重要）。

本文由Fotor小编倾情撰写、整理。

欢迎移步Fotor国内版www.fotor.com.cn，Fotor-免费的一站式平面设计、图片编辑和拼图工具，几分钟快速完成平面设计与图像处理！

---

总有人说，一张照片胜过千百句话。图片的作用可不单单如此，一张照片还可以为你或者是你的公司赚更多的钱，增加更多的曝光率。

建立个人网站或者是商业网站本不是一件容易的事，在网站中添加一些合适的图片似乎更麻烦。但是添加图片绝对是一件产出大于投入的事，这可不单单是因为图片是留住和吸引用户的最好的方式。根据Tech.Co 和NewsCred的数据，添加图片可以：

• 建立更有效的交流：对于看到的事物，人们能够记住80%（与之相反的是，对于读到的东西，只能记住20%。听到的东西，只能记住10%）。

• 吸引用户：带有图片的文章的浏览量比不带图片的文字的浏览量高94%。

• 提高企业信誉：67%的顾客更喜欢有着清晰、细节丰富的图片的产品（并且认为产品的图片比产品描述更重要）。

• 影响购买意向：93%的顾客认为产品图片才是最能决定他们是否购买产品的重要因素。

但是如果不能正确的放置图片，上面这些都是废话。所以，让我们一起来看看下面这些在网站上添加图片时的常见问题吧。

Dribbble/Jonathan Ogden

小提示: 你可以用一些工具来检测你的网页的加载速度，比如站长工具等。

问题2：图片在屏幕上看起来很奇怪

解决方法：理解图像分辨率

分辨率决定了图像细节的精细程度。图像分辨率指单位英寸中所包含的像素点。然而，我们今天所使用的屏幕都有固定的屏幕分辨率，所以我们能控制的因素其实很有限。但是没关系，因为这可以使我们的图片保存流程更简单。72PPI是大多网页图片的标准分辨率。大部分显示器都可以适用72PPI到120PPI的分辨率。谷歌的设计师Sebastien Gabriel认为将分辨率控制在这一范围内可以使你的图片和其他网站的图片保持大致相同的比例。

最重要的是，当你选择了合适的大小后，一定要避免出现像素化。当图片的实际尺寸大于它的文件大小时，就会出现像素化（指模糊、失真等），比如把一张50x50px的照片拉到500x500px的大小。

小提示: 如果你想选择PPI作为单位，但是选择时只看到了DPI，不要慌。这两种经常被混淆（虽然并不相同），事实上，很多人选择DPI作为分辨率的单位。

问题3：理解图片分辨率2——压缩

用图像编辑软件压缩图片是调整图片分比率和文件大小的一种方式。

比如说，在Fotor保存图片时，在图像选项中你可以从低、中、高或是最佳中选择一个品质。这一选项可以降低（或是压缩）文件大小（可节省图片加载时间），但是同时也会降低图片质量（可能会很差，取决于你对图片的要求）。

问题4：图片的重点不明确

解决方法: 剪裁。

对图片进行剪裁，尤其是照片，是调整图片时至关重要的一步。你可以裁掉不重要的东西，又可以通过剪裁强调图片的重点，提升图片的效果。另一方面，需要注意不要裁得太小了导致图片失真。如果要进行更精细的剪裁，记得选择高分辨率的图像。

小提示: 如果你想要把图片放到社交网络上，一定要事先弄清楚是否对图片尺寸大小等有限制。许多设计网站上传图片时都有文件大小限制。

问题5：图片被过度压缩

解决方法：选择最合适的构图

与剪裁类似的是选择合适的取景构图，这一步最好能在拍摄图片时完成。这与画家、摄影师、设计师和其他艺术家遵循的传统排版规律很相似。其中包括：

• 三分构图法

• 重复（强调有趣的元素比如线条或是图案）

• 合理使用正负空间

• 引导线（引导人们找到重点）

• 还有更多…

这些都旨在创造更有吸引力的图像——也正是你的网站所需要的那类图像。

小提示: 许多照相机或是手机在拍摄时都提供网格功能。把照片中最重要的部分放在一个点上，就可以轻松打造出一个更好的构图

问题6：选择最合适的构图——试试别的

如果你需要的是放在网页上的图片，那么剪裁和调整排版就足够了。不过如果你是想自己设计一张图片——放在你的博客或社交网络上——那你就需要在图片上加上一点点创意了。

在调整图片的结构时，你可以通过剪裁强调你的重点。或是，添加一些元素而不是裁剪掉你不想要的部分。可以在一张有多余空间的图片上加上你喜欢的话——这是在社交媒体上分享的很好的方式。

你也可以调整图像方向。可以试试翻转或是将图片排列成一个圆形或是其他形状等等。将图片用不同的图形或大小排列打造更有趣的页面。不要一直使用过去的那些排版，加点创意和想法！

Dribbble/Brent Jackson

小提示: 可以使用Fotor提供的设计或拼图模板轻松打造有趣的排版。

问题7：图像歪曲

解决方法：调整比例

造成图片扭曲最常见的原因就是调整图片大小时比例大小失衡。避免这个问题最简单的方法就是在调整图片时固定图片比例，而不是随意地调整图片的长和宽。

一些平台会自动调整上传图片的比例。所以如果你不是在自己的网站而是在其他网站上传图片时，最好提前了解到网站的要求并做出调整。

小提示: 很多图像编辑软件都提供固定长宽比的工具。在调整图片大小的页面里，会有一个小锁图标示意你可以固定长宽比。选择它，你就可以放宽心地调整啦。

问题8：保存图片时选择了错误的格式

解决方法：了解不同文件类型的区别

那些缩略词总是让人费解——JPG和PNG的区别是什么？不同的选择会有什么影响么？哪个文件类型的图片在网页上效果更好？

简单点说，所有的文件类型都各有不同。每一个都有自己的优点和缺点。我们将快速地了解一下这些网站通用的图片类型，这样你就能知道怎样为你的网站选择最合适的文件了。

• JPG（或是JPEG）：主要用于摄影作品（或是其他细节、色彩丰富的图片）；对多色彩表现较好；不适于文字较多的图片

• PNG：图片质量高；色彩表现好；支持透明效果；提供锋利的线条和边缘，所以做出的logo等效果会更好；更好地展示文字、颜色相近的图片（不像JPG会在压缩图片时降低品质）

• GIF：唯一一个支持动画的文件类型；色彩表现没有JPG好

• SVG：可被多重工具读取、修改；可伸缩；可在任何的分辨率下显示；可在图片质量不下降的情况下放大

• PDF：跨平台保留原有格式；最适合展示文件

一个要避免的格式……

• TIFF：图片质量高但是文件非常大，不适于网页；更多地用来保存需要打印的图片

小提示: 对于用来打印或是放在网页上的图片（比如JPG或是PDF），需要注意是否有适用于网页的色彩模式：RGB。如果你没有选择RGB而是选择了CMYK（适用于打印的模式），你的图片在网页上看起来就会非常奇怪。

问题9：使用了图库图片，然后在哪里都能看见与之相同的图片

解决方法：避免使用图库图片或是慢慢找一些独特的图片

如果你没时间或是资源来创造自己的图片，图库是一个很方便的选择。但是，图库中有许多不好的图片和被用过很多次的图片——使用图库中的图片你就要承担与别的网站使用相同的图片的风险，而且很有可能是你竞争对手的网站。显然最有效的解决方法就是不用图库中的图片，但是如果这行不通的话，至少要用更多的时间来找图片。跳过图库的第一页，试着找一找有些特色的图片，更重要的是，找到最适合你的图片。

小提示: 这几年出现了越来越多的免费图库，这些图库中的图片大都还没有被多次使用。而且，许多免费图库都提供更具有艺术性，甚至是独家的图片。

来自免费图库Unsplash

问题10：不知道应该怎么在图片上添加信息

解决方法：利用元数据。

元数据是描述数据的数据，主要描述数据属性的信息。有的信息是自动添加的，比如相机在相片上添加的信息。其他文本信息，比如图片名字、描述、关键词或说明等，都可以编辑。不过为什么我们需要额外的时间来添加这些信息呢？一方面，加入更多的信息通常可以提供更好的用户体验。另一方面，添加更多的信息可以使用户搜索相关信息时更有可能搜索到你的网站。

小提示: 不同的博客和网站平台在添加元数据时通常提供不同的选项，比如图片的说明和关键词，一定要想办法充分利用这些可以选择的机会。Alt标签是最常见的选项。.

Alt标签是形容你图片的词或是短语。它很重要，因为：1）是很好的提示关键词排名的方法；2）如果因为某些原因你的图片显示不出来，它可以提示这应该出现一张什么样的图片。

每张图片都有它的独特性，它的标签也是越简明越好。但是注意不要滥用这个工具——对于每个标签都采用关键词堆砌，就有可能会导致被视为Spam垃圾网站而降低网站搜索排名。

以WordPress后台为示例来展示图片元素(Title Caption Alt Text and Description)。

问题11：图片需要调整，却不知如何下手

解决方法：做一些基础的编辑，不用用太夸张的特效。

图片编辑可以使图片更好看，当然也可能画蛇添足。有的时候，编辑图片时你会想做一些基础修改：调整对比度和亮度、增加饱和度、增加颗粒感等等，这些都没问题。

然而，大多数图像编辑软件，包括那些最基础的软件，都提供了更多的功能。很容易就会被其中吸引人的特效和滤镜吸引。在使用时要小心落入俗套哦。比较好的方法就是在图片编辑时做出有目的的编辑。也就是说，如果加一个滤镜的时候只是因为“看起来有趣/奇怪/与众不同”，而没什么其他原因，那最好还是保持最初的版本比较好。

小提示: 编辑软件的“自动编辑”功能（自动调整颜色，对比度等）并不是总能呈现出最好的效果。如果你觉得看起来有点儿过了，那就相信你自己的判断而不是机器的判断，手动做些调整。

问题12：颜色在屏幕上看起来总是不太对

解决方法：校正你的显示器。

使用数字图片时，颜色能够准确显示十分重要。在选择颜色和编辑图片时，你一定希望图片可以呈现出准确的颜色，此时你一定要确保你的显示器或是屏幕准确地显示颜色。DigitalArts的Simon Prais提供了这些tips:

“校正你的显示器，确保亮度设置在90-120 cd/m2.。尽管这可能限制你的设备的对比度，但是这更接近观众的显示器的效果。”

小提示: 系统都有校正工具，可以参考网上的一些校正办法对显示器进行校正。

怎么样？是不是看到这里已经迫不及待的想要大刀阔斧地改进你网站上的图片啦？希望你能记住这些小技巧，在以后上传图片的时候也能用上。如果你有什么其他更好的建议，也请在留言区跟我们分享吧！

---

更多设计素材、创作灵感请访问Fotor国内版 www.fotor.com.cn

Fotor-免费的一站式平面设计、图片编辑和拼图工具，几分钟快速完成平面设计与图像处理！

本文由Fotor小编倾情撰写、整理。如需转载，可直接评论或邮件至info@fotor.com。