【问题标题】:webdesign - jpg or png, which one is the best for web [closed]网页设计 - jpg 或 png,哪一个最适合网络 [关闭]
【发布时间】:2010-12-14 11:24:51
【问题描述】:

我从事网络开发已经有一段时间了,我习惯于将所有设计转换为 png 文件格式以构建我的网页。尽管与 jpg 不同,png 允许图像透明,但它是更好的解决方案吗?

问题涉及页面加载时间和最佳网页设计实践,以及文件大小与图像质量的关系。

您认为最好的解决方案是什么?

【问题讨论】:

    标签: web png jpeg


    【解决方案1】:

    视情况而定。

    PNG 更适合颜色数量较少的清晰图像,

    JPG 更适合低带宽图像 - 但它不那么清晰,因此不太适合 GUI。

    一般来说,JPG 用于照片和图片,而 PNG(或 GIF)用于布局。

    您可能会发现 this page 很有趣,因为它涵盖了 PNG 与 GIF 的基础知识。

    【讨论】:

    • 这更好地回答了这个问题。我不知道为什么,但我比选择的答案更了解这个。
    • 这更好地回答了这个问题,答案链接真的很有帮助。
    • 因为这个答案仍然在谷歌排名前列,我只是想建议也看看 SVG 和 WebP - 几乎所有浏览器都支持它,这是一个很好的性能提升。
    【解决方案2】:

    jpg 通常适用于具有许多微妙不同颜色的摄影图像。 png 适用于计算机生成的图形。

    这是我的经验法则。

    【讨论】:

      【解决方案3】:

      鉴于平均网络连接的速度不断提高,我认为页面加载时间不再是一个大问题 [鸭子!];想想你想用你最终拥有的资源来实现什么真的更有用:例如带宽有限吗?然后倾向于更重的压缩是不费吹灰之力的。网站的图形内容是否会扩展,确保服务器空间的成本会随着时间的推移而增加?然后倾向于更重的压缩将延迟该成本。它是一个艺术作品集网站吗?然后——啊哈! -- 采样器工作中的压缩伪影实际上可能是可取的!你想鞭打游戏吗?那么截图应该是超级清晰的。

      那么,一般来说,我会重复刚才所说的内容,尽管语言可能略有不同:对于网站家具,它往往是计算机生成的,并将被缓存以在页面之间重复使用,倾向于png;对于网站内容,它通常是特定于页面的,并且可能大到足以掩盖有损压缩,倾向于使用 jpg。

      具体参考在您认为合适的地方切换到 png,理所当然地通过 PNGCrush 运行所有内容 - 否则它们将不会以您期望在每个浏览器中显示的颜色和您的设计的整体质量会减少。

      【讨论】:

      • 如果您将您的网站定位于互联网连接通常非常糟糕的人,您必须担心页面加载。但是,当您说 png 文件上的颜色并不总是按应有的方式显示时,您是对的,这是一个问题。
      • 如果您的网站图像很重,那么根据定义,您的目标并不是那些互联网连接非常糟糕的网站。事实上,当您为宽带速度交付进行设计时,您正在做的事情是鼓励人们对比 56k 拨号更可取的基线标准的需求——这是一件好事。
      【解决方案4】:

      我是一个初学者,我所做的主要是如果图像太大,我会缩小,除非它是背景图像。如果是布局,我会选择 PNG 和 JPG 图片。

      【讨论】:

        【解决方案5】:

        “鉴于平均网络连接的速度不断提高,我认为页面加载时间不再是一个大问题”

        根据网站 SEO 优化,如果页面加载时间超过 2 秒,Google 会将您的网站排名更差,因此压缩是必要的,尤其是在重图形的新网站设计中。

        【讨论】:

          【解决方案6】:

          Google 对此进行了很好的描述。从Selecting the right image format,您可以找到一个流程图来做出决定:

          【讨论】:

          • 恕我直言,这是迄今为止最好的答案。不要错过答案中链接的“图像优化”文章。
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2016-06-02
          • 2015-05-17
          • 1970-01-01
          • 2013-07-21
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多