原始图像在网站中压缩

Question

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

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

Answer 1

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

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

此图像背景相同,但在850x300时略大.任何编辑,如添加应用程序的图像应该在这个更大的分辨率下完成(它可以很容易地缩小,但这将保持尽可能高的质量).Placeit.net仅以8美元的价格销售该图像的1920x1440版本,该版本应该足够大并且可以很好地缩小尺寸.

JPG对比PNG

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

响应式CSS

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

Google的图像优化指南涵盖了有损与无损,微调,缩放图像等工具.这指出有损/光栅图像格式适用于非常复杂的图像,如照片,因为人类的视力无论如何都无法感知每个细节.从图像中"丢失"的东西通常不会被人眼所察觉 - 当然假设你从高质量的图像开始.

其他选项:渐进式jpg和base64

渐进式JPG似乎加载速度比JPG更快,因为它们最初的加载方式看起来质量较低,然后质量提高,参见示例.Base64主要用于小图像,如图标和"首屏"图像,需要快速加载,尽管它们对内存要求很高.图像使用嵌入在CSS或网页代码中的非常长的字母数字字符串存储,而不是作为单独的文件存储.更多细节在这里