标签: image-optimization

有一个电子商务网站，我们有成千上万的产品图片。在谷歌上检查页面速度时，它向我显示了这样的内容：

我想知道，Java 中是否有任何内置功能或任何第三方库可用，我们可以使用它们无损地压缩我们托管的所有图像。因此，我们可以为客户节省几 KB。

在网上搜索我发现很少有像punnypng和kraken这样的付费的，因此我们每个月都没有上传重磅图片，订阅它们不值得。我更喜欢 Java 或任何开源第三方库中的任何内置功能。

我遇到了JAI，但不确定它是否解决了这个问题。有人有这方面的实践经验吗？

PS 我们使用的是 Java 8

我没有找到正在寻找“图像优化”的类似问题。

我测试了Facebook可以优化上传图片的程度：

980KB-> 77KB

846KB-> 62.1KB

根据我的发现，对于上述测试，Facebook能够将图像优化多达10倍，同时仍保持最低图像质量。

因此，任何人都可以分享您为优化用户上传的图片而实施的最佳方法是什么？

当我在互联网上搜索时，我已经看到一些网站为图像优化提供付费服务。但是，我们目前不愿意为图像优化订阅任何付费服务。

我正在Google App Engine环境中使用Python语言开发该项目。我们可以从Python库甚至Google App Engine库中重用的任何部分可以做到这一点？

使用 Nextjs，预期结果是看到图像组件渲染为 .WebP 或 .AVIF，但它仍然是 jpg -

下面是我的 next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  images: {
    domains: ['cdn.sanity.io'],
    formats: ['image/avif', 'image/webp'],
  },
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: [{ loader: '@svgr/webpack', options: { icon: true } }],
    });
    return config;
  }, };

以下是 next/image 组件：

   <Image
                          className="kitchen-img"
                          loader={myLoader}
                          loading="lazy"
                          layout="fill"
                          objectFit="cover"
                          src={urlFor(kitchen.mainImage).url()!}
                          alt={kitchen.title}
                        />

知道为什么它没有以 avif/webp 的形式出现吗？我缺少什么？

const myLoader = ({ src, width, quality }: any) => {
return `${src}?w=${width}&q=${quality || 85}`  };

我正在开发Asp.net MVC3 Web应用程序.我有一个appx页面.几个大小的100个图像正在加载总appx.大小1.5MB.

我将努力将这100个图像分发到多个主机名,以便以后加载更快.但是现在我需要你的帮助来优化图像的加载速度.我真的不能使用Sprite这些图像.

我特别感兴趣的是实现可以在第一次加载时加载降级图像的东西,然后随着下载越来越多的字节逐渐提高图像质量.因此,基本上它将首先加载低质量图像,然后随着更多字节的下载,图像质量将得到改善.

更新: 我已经看到几个网站的图像被优雅地加载,这意味着在开始它看起来非常蹩脚,然后随着时间的推移它们的质量会进一步提高.

他们是如何做到的呢？

我对引导程序有点新手,但对网站开发和css非常精通......我无法解决Bootstrap如何针对不同视口大小处理优化图像的问题.

根据我的经验,你需要针对他们正在观看的设备优化图像,我在Bootstrap中看到的所有内容都让我相信它不会那样做.看起来它只是使用一个大图像并使用css来缩小(甚至向上).当我们希望移动设备拥有丰富的体验,并且针对较小的文件优化速度时,这似乎是反直觉的.

例如,如果我希望图像能够很好地显示在宽度为900px(~200k)的桌面上,我会为该尺寸优化图像.对于具有布局宽度的移动设备,我可以使用400px(~50k)的优化版本.

在我自己的系统中,我们通过用户代理预先发现并在编译期间填充正确的图像,我意识到我可以简单地将所有这些都放入引导程序中,但我预计会有类似的机制用于类似功能,我期待太多了吗？

我没有看到Bootstrap如何能够推迟在页面内容中加载图像,直到发现视口大小,以便使用针对该大小优化的正确文件？我在这里错过了什么吗？

----编辑

我很确定你可以根据视口大小在Bootstraps CSS中定义图像路径,但是它不能回答它首先加载的问题？

---- 2014年11月编辑

仅供参考,这个问题已经过时了...... @media查询将完成不同的文件请求,但是您仍然需要每种大小的单个文件或某种动态生成它们的方式.无论哪种方式,任何非匹配都会延迟加载,因此它会稍微优化一下.对于移动用户来说,在请求时识别用户代理并进一步优化仍然是有益的,因为除了移动特定文件/类之外的任何东西都是无用的,只会减慢速度.

我创建了一个favicon.ico文件,其中包含三种尺寸的.png图标大小,16px,32px和64px.

在我的Mac Finder中,我使用ImageOptim优化它们后,它们的大小分别为339b,1kb和4kb.那么我们可能会达到6kb？

但是,当我运行此ImageMagick命令时:

convert 16.png 32.png 64.png myfav.ico

生成的.ico文件是22kb!

这是一个非常大的文件,出乎意料.

我做错了什么？我能做些什么来缩小它(如果有的话)？

我有调整图像大小的问题.

会发生的情况是,如果您上传的文件大于规定的参数,则会裁剪图像,然后以100%的质量保存.

所以,如果我上传一个272Kb的大型jpeg.图像被裁剪100个像素.然后文件大小上升到1.2Mb.

我们以100%的质量保存图像.我认为这是导致问题的原因.图像以30%的质量从Photoshop导出,从而减小了文件大小.以100%质量重新保存图像会创建相同的图像,但我假设有大量冗余文件数据.

有没有人遇到过这个？有没有人有办法解决吗？

这就是我们正在使用的.

$source_im = imagecreatefromjpeg ($file);
$dest_im = imagecreatetruecolor ($newsize_x, $newsize_y);
imagecopyresampled (
    $dest_im, $source_im,
    0, 0,
    $offset_x, $offset_y,
    $newsize_x, $newsize_y,
    $sourceWidth, $sourceHeight
);

imagedestroy ($source_im);
if ($greyscale) {
    $dest_im = $this->imageconvertgreyscale ($dest_im);
}
imagejpeg($dest_im, $save_to_file, $quality);
break;