问题标签 [image-optimization]

我想在 styled-components 中使用 Next.js 的新功能 Image optimization 对背景图像进行优化。有没有办法在没有Image组件的情况下优化图像？

由于 Shopify 以 webp 格式加载图像，因此我想知道是否仍需要通过 optimazilla 等优化工具传递图像。我的意思是，使用这些工具在某种程度上降低质量是否仍然值得，或者 shopify 图像优化器所做的就足够了，我不需要这样做？或者，如果我使用 optimazilla，后来 shopify 将其转换为 webp，图像是否会因失去太多质量而过度优化？

文档说：

图像的宽度，以像素为单位。必须是没有单位的整数。图像的高度，以像素为单位。必须是没有单位的整数。

https://nextjs.org/docs/api-reference/next/image

不同的设备可以有不同的尺寸。设备可以是台式机或移动设备。发送每张图片的实际尺寸有点繁琐。

我想我不必发送图像的确切尺寸，但发送的宽度、高度的比例与实际宽度和高度的比例相等就足够了。你是否同意我的观点？

所以如果我看这个商人：

https://tiket.hu/sell/services

桌面上的商人有一个 468x346 尺寸，那么如果我通过，width={100} height={74}那么返回的图像将具有最佳尺寸。正确的？加载速度也将是最佳的。

所以我一直在关注这个高级的 Wordpress 主题开发教程Wp 教程

一切都很好，但我在那个特定的视频中看到，最后他用浏览器检查并得到一个带有 srcset 属性的图像

但是，当我使用完全相同的代码时，它对我不起作用。我从字面上克隆了这个人的教程代码（尽管我在学习课程时正在编写我的代码）并且我得到了同样的错误。此外，如果我去 wp-content/uploads 我只看到我上传的图像的一个版本，我应该有默认的 WP 大小（缩略图、中、大等）

我想知道 WP 5.7 或更新版本是否发生了什么事，并且 srcset 不会再作为道具弹出，或者我做错了什么。

这是我在学习课程时使用的存储库，因此任何人都可以查看它并了解发生了什么。

我的愿望是能够在 wordpress 中看到任何图像的多个上传版本，并能够在前端的 img 标签中看到 srcset 属性。

为了找出这个错误，我只是做the_post_thumbnail('thumbnail')了并得到了这个

没有多个 img 版本或任何东西的 srcset。

谢谢！

我已经问过这个问题，并且我解决了我最初问题的一项任务。然而，我仍然在努力获得一个像样的预处理图像。

一般来说，我试图用图表或理想情况下（但不一定）一个函数来近似增材制造中焊道几何横截面的不同形状。这些区域是外部形状以及各个层。（见下图）在此之前，我必须对图像进行预处理，以便我可以应用我的算法来预测层之间的距离以及每层的宽度。

到目前为止，我应用了一些预处理方法来提取代表焊道几何形状的相关像素，这些像素显示为白色像素（参见第三张图像），并且与预测每个焊道层的高度和形状相关。我使用精明的边缘检测和阈值方法在不同的颜色空间（包括灰度）和多种形态学操作（例如之前的闭合腐蚀和膨胀）中导出了这张图像。

如您所见，我的结果并不好，我要么丢失了太多“相关”过渡区域的信息，要么在焊道层之间获得了太多噪音。“嘈杂”区域是各个金属层之间的过渡区域，并且仅以这种方式出现，因此通常没有“更好”或“更清晰”的过渡，因此更少的“噪音”。图 3 和图 4 是我使用的一些图像预处理方法的示例。

在我看来，某种基于密度的去噪（例如对于关于白色像素的二进制图像）可能有助于消除层之间的噪声，因此在不需要的区域中，同时保留相关过渡区域中的像素。

如果任何有图像处理或图像视觉经验的人能给我一些建议，我将不胜感激！

如果您需要查看我的代码，请告诉我。谢谢！:)

从文档：

• https://nextjs.org/docs/basic-features/image-optimization
• https://nextjs.org/docs/api-reference/next/image

自动图像优化允许在浏览器支持时以 WebP 等现代格式调整图像大小、优化和提供图像。这避免了将大图像传送到具有较小视口的设备。它还允许 Next.js 自动采用未来的图像格式并将它们提供给支持这些格式的浏览器。

我的用例如下：

• 博客网站
• 博客文章的身体图像
• 缩略图

这是我到目前为止一直在做的事情（没有任何优化）：

• 身体图像（我只将最大 150kb 的图像上传到我的存储空间）。
• 缩略图（我将它们限制在 30kb 以内）。

我目前没有设置任何图像优化。我只是将图像上传到我的存储中，并且我在上传组件上设置了文件大小限制，因此我可以避免大文件。

现在我将使用next/image，这是否意味着我不再需要处理这些文件大小了？将较大的图像上传到我的存储并信任 Next 进行优化是否安全？或者，无论 Next.js 如何为它们提供服务，我仍然应该上传较小尺寸的图像吗？

例如：如果我将3mb图像上传到我的存储怎么办？Next.js 将如何处理该图像？

我还应该对我的上传组件强制执行文件大小限制吗？

在我的网站（在博客上）我使用了 WebP 格式的所有图像仍然谷歌页面速度洞察力给出了下一代服务器图像的错误......为什么会发生这种情况任何一个帮助...... 我注意到的另一件事是我已经上传（例如） 30 KB 的图像和 Google 页面速度洞察它显示的大小为 40 + KB 我无法理解为什么会发生这种情况......我网站中的每个图像都会发生同样的情况

Ps：我的所有图片都在 50 KB 以下，但它显示的大小是灾难性的......

amazon 上有一个特定的 url，它在 s3 上存储了一些图像，相关的亚马逊域已经在 next.config.js 的域中配置，但没有在前面加载。如果我放置任何外部 url、unsplah 或其他，它会正常加载。

有问题的网址是：idinheiro-admin-images.s3.sa-east-1.amazonaws.com

并且控制台上发生的错误在带有 404 (Bad Request) 的 url 中

-- 错误控制台 --

-- next.config.js --

-- 使用组件 --

我正在寻找一种解决方案来调整、优化和使用 webp 格式来处理我网站上的图像。我已经在使用 AWS，想知道是否需要使用 IMGix 或 ImageKit 来完成此操作，或者是否可以使用 AWS。

提前感谢您查看我的问题！

我在我的 Next JS 应用程序中使用默认组件来优化图像，但发现如果使用默认图像优化组件，除了 Vercel 之外，该站点无法托管在其他任何地方。除此之外，该网站也不能导出以托管在其他网络托管平台上。

内置图像组件的缺点使我想到了next-optimized-images包含图像优化和其他好处的包作为内置的 NextImage组件。

它需要我创建一个babel.rc具有以下配置的：

我还将我next.config.js的修改为以下内容：

next-optimized-image内置Img组件可以这样使用：

完成所有这些并运行后npm run dev，我的控制台中出现以下错误：

我该如何解决这个问题？提前致谢