原始图片在网站

Question

我的原始图片显示为here。这是一张保存为jpg格式的高清图像。 jpg是一种lossy格式，可在网站上加载时压缩图像。所以我将图片保存为.png并试图在我的网站上查看，但图像模糊了。我甚至在paint.net中增加了dpi图像，但是我的网站中的图像仍然模糊不清 这是我网站的屏幕截图：

我想要在网站上显示高清图像，没有任何模糊。我该怎么做？

Answer 1

以更高分辨率的原始图片开始

我假设您正在使用类似外观的模板图片，之后添加了智能手机的屏幕？您链接到的原始图像仅为600x212像素，这是一个非常小的工作尺寸（小于许多手机，iphone和平板电脑）。您需要从更大，更高分辨率的图像开始，并根据需要缩小图像。从较小的图像开始并增加分辨率或dpi无法提高质量，因为不会添加额外的细节 - 通常这会使图像变得更糟。

This image背景相同但略大于850x300。任何编辑，如添加应用程序的图像都应该在这个更大的分辨率下完成（以后可以轻松缩小，但这样可以保持尽可能高的质量）。 Placeit.net以8美元的价格售出1920x1440版本的图像，这个版本应该足够大并且可以很好地缩小尺寸。

JPG与PNG

JPG专为照片而设计，并且不会损失太多，PNG可能会过大而影响加载时间，这对移动用户来说非常重要。高分辨率JPG是最好的方法examples and explanation。对JPG进行的每次单独编辑都会降低质量，因此从最大分辨率图像开始并进行单次编辑是最佳选择。调整大小可以留给Web浏览器和响应式CSS。

自适应CSS

这允许您对桌面和不同大小的移动设备使用相同的HTML，而最小的更改由单独的CSS文件控制。 Bootstrap和foundarion是人口最多的。有效地将关键图像保持为最大尺寸，然后将media queries添加到CSS以检查移动设备或桌面的大小并相应地调整大小。图像的大小也可以以相对单位指定，例如百分比。这种仅限css的大小调整快速而有效。

Google's image optimization guide涵盖lossy vs lossless，微调，缩放图片等工具。这指出有损/光栅图像格式适用于非常复杂的图像，如照片，因为人类的视力无论如何都无法感知每个细节。失去了什么＆＃39;从图像中通常看不出人眼 - 当然假设你从高质量的图像开始。

其他选项：渐进式jpg和base64

渐进式JPG似乎加载速度比JPG更快，因为它们最初的加载方式看起来质量较低，然后质量提高，请参阅example。 Base64主要用于小图像，如图标和“折叠”之上。需要快速加载的图像，尽管它们对内存要求很高。图像使用嵌入在CSS或网页代码中的非常长的字母数字字符串存储，而不是作为单独的文件存储。 More details here

Answer 2

首先，您必须确保原始图片足够清晰且具有高dpi

其次，您必须注意到，现在智能手机屏幕的定义远远高于普通PC，因此您的图片必须具有足够的清晰度。

第三，您的手机浏览器不能让云速超速。像Opera这样的手机可能导致图像压缩。

最后，我建议你使用高质量的jpg格式图像。你必须在大小和定义之间保持平衡。

Answer 3

我会直截了当地说：

PNG图像或JPEG如果强制调整其当前形式的大小将产生较低质量的输出。最好的方法是使用1600px宽和任何长度的图像，并使用图像优化软件，如OptiPNG，PNGQuant或XnView，并压缩输出图像，以获得大量的压缩。

有关dpi的信息

它不会对桌面浏览器造成太大影响，同时如果你的初始dpi为72的图像，那么将图像放在72 dpi以后就不会有任何增益。

我使用的解决方案

大多数时候，我们都是以插图画家的形式工作，所以我们从他们那里构建SVG。 SVG可以扩展到屏幕结束，完全没有质量损失。就PNG和JPEG而言，使用更大尺寸的图像并将其压缩为工具要好得多。这个东西有一个很棒的在线工具Kraken

一个美丽的伎俩

在photoshop中，gimp：尝试锐化你的形象。锐化会增加边缘对比度，你也可以从糟糕的图像中进行破解。

就base64而言，在代码中放置大约110 KB的高清图像是个坏主意，每次用户打开你的网站都会浪费110KB，让它们存储起来在缓存中通过css: .class{background:url('image'); position:cover;}。

获得更好结果的唯一方法是最小化http请求，但这太令人头痛了。现在只有方法也是image sprites。

Answer 4

如果您想要高清图像，那么您应该下载高清图像并在Photoshop中进行编辑，在那里您可以解决所有需求，以及它在行业中的表现方式。