Html 原始图像在网站中被压缩

我有一个原始图像显示。这是一张高清图像，另存为

jpg

格式

jpg

是一种

lossy

格式，在加载到网站时压缩图像。因此，我将图像保存为

.png

，并尝试在我的网站上查看，但图像模糊。我甚至在paint.net中增加了图像的dpi，但在我的网站上图像仍然模糊。
这是我的网站的屏幕截图：

---

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

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

第二，你必须注意，现在智能手机的屏幕清晰度比普通电脑高很多，所以你的图片必须有足够的清晰度

第三，你的手机浏览器不能有云计算。像Opera这样的手机可能会导致图像压缩

---

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

从更高分辨率的原始图像开始。

我假设您使用的是外观相似的模板图像，而智能手机的屏幕是在之后添加的？您链接到的原始图像只有600x212像素，这是一个非常小的尺寸（比许多手机、iPhone和平板电脑都小）。您需要从更大、更高分辨率的图像开始，并根据需要缩小它。从较小的图像开始，提高分辨率或dpi无法提高质量，因为没有添加额外的细节-通常这只会使图像更糟

背景相同，但在850x300处略大。任何编辑，如添加应用程序的图像，都应该在这个更大的分辨率下进行（稍后可以很容易地缩小，但这将尽可能保持高质量）。售价仅为8美元的1920x1440版本的图像应该足够大，并且可以很好地缩小

JPG vs PNG

JPG是为照片设计的，不会损失太多，PNG可能太大，这会影响加载时间，这对移动用户非常重要。高分辨率JPG是最好的方法。对JPG进行的每一次单独编辑都会降低一点质量，因此从最大分辨率的图像开始并进行单个编辑是最好的。可以由web浏览器和响应CSS来调整大小

响应性CSS

这允许您在台式机和不同大小的移动设备上使用相同的HTML，并且由单独的CSS文件控制的更改最少。Bootstrap和foundarion的人口最多。实际上，您可以将关键图像保持在其最大大小，然后添加到CSS以检查移动设备或桌面的大小，并相应地调整大小。图像也可以以相对单位（例如百分比）指定其大小。这种只调整css大小的方法快速有效

封面、微调工具、缩放图像等。这就指出，有损/光栅图像格式适用于非常复杂的图像，如照片，因为人类的视力无论如何无法感知每一个细节。从图像中“丢失”的东西通常不会被人眼注意到——当然，假设你从高质量的图像开始

其他选项：渐进式jpg和base64

---

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

我要直截了当地说：

---

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

关于dpi的一些信息

这对桌面浏览器不会有太大影响，同时，如果yu有一个初始dpi为72的图像，那么将图像置于72 dpi之后将不会有任何收益

我使用的解决方案

大多数时候，我们都在使用illustrator for graphics，因此我们从中构建SVG。SVG可以一直扩展到屏幕的末尾，完全不会降低质量。就PNG和JPEG而言，最好使用更大尺寸的图像，并使用工具对其进行压缩。有一个很好的在线工具

一个漂亮的把戏

在photoshop中，gimp：尝试锐化图像。锐化会增加边缘对比度，你也可以从糟糕的表面图像中进行处理

就base64而言，在代码中放入大约110 KB的高清图像是一个坏主意，每次用户打开你的站点都会浪费掉110 KB，让它们通过

css:.class{background:url（'image'）；position:cover；}

存储在缓存中

---

获得更好结果的唯一方法是最小化http请求，但这太令人头痛了。因为现在唯一的方法就是制作一张高清图片。

如果你想要一张高清图片，那么你应该下载一张高清图片，然后在Photoshop中编辑它，在那里你可以解决你的所有需求，因为这是行业中的做法

获得更大的图像（宽度+高度）。原始图像是600px×212px，在您的站点（幻灯片）中，它被拉伸到1140px×404px。在这种情况下，不可能避免模糊-从大到小按比例调整大小-提供更好/预期的结果。按比例调整大小？我该怎么做？@AjayKulkarni：他的意思是将较大的图像调整为较小的图像；lke的宽度为1400到1140像素，以及根据原始图像比率计算的任何高度