[英]Gatsby - Prevent small images from being inlined as a data URI
I'm attempting to provide images for each of the apple-touch-icon
sizes in my head
tag.我正在尝试为我的
head
标签中的每个apple-touch-icon
大小提供图像。 I'm doing this like so:我这样做:
// not shown: import all image files: logo57, logo76, etc
<link rel="apple-touch-icon" sizes="57x57" href={logo57} />
<link rel="apple-touch-icon" sizes="76x76" href={logo76} />
<link rel="apple-touch-icon" sizes="120x120" href={logo120} />
<link rel="apple-touch-icon" sizes="152x152" href={logo152} />
<link rel="apple-touch-icon" sizes="167x167" href={logo167} />
<link rel="apple-touch-icon" sizes="180x180" href={logo180} />
The problem is that when the page is rendered, all of these images are included directly in the page as base 64 in data URIs, not relative urls.问题在于,当页面呈现时,所有这些图像都直接包含在页面中作为数据 URI 中的 base 64,而不是相对 url。 Like so:
像这样:
<link rel="apple-touch-icon" sizes="180x180" href="data:image/png;base64,iVBORw0KGgoAAAA....">
This is problematic for a few reasons.这是有问题的,原因有几个。 For one, these images are only needed in the progressive web app scenario;
一方面,这些图像仅在渐进式 Web 应用程序场景中需要; they are not needed by normal desktop browsers and yet desktop browsers are forced to download all of these chunks of base 64, slowing down the page load.
普通桌面浏览器不需要它们,但桌面浏览器被迫下载所有这些 base 64 块,从而减慢了页面加载速度。 Secondly, even in the PWA scenario, each device will only need one of these images, not all of them, so page load time is slowed there as well.
其次,即使在 PWA 场景中,每个设备也只需要这些图像中的一个,而不是全部,因此页面加载时间也会减慢。
This is a documented optimization for images <10,000 bytes, so it may be a negligible difference that they are all loaded here.这是对小于 10,000 字节的图像的记录优化,因此它们都在这里加载可能是微不足道的差异。 But, the total size of the original pngs totals about 27kb (I don't know about after converting to base 64), and it seems like I'd rather not include this data in every page if it is not needed.
但是,原始 png 的总大小总计约 27kb(转换为 base 64 后我不知道),如果不需要,我似乎宁愿不将这些数据包含在每个页面中。
I've found that I can move the images all to the /static folder and reference them with href="logo57.png"
, but then I lose the compile time verification that these images are in fact present at the given href, as well as the including of the image hash in the file name (for caching reasons).我发现我可以将所有图像移动到 /static 文件夹并使用
href="logo57.png"
引用它们,但随后我失去了编译时验证,这些图像实际上也存在于给定的 href 中作为在文件名中包含图像哈希(出于缓存原因)。
How can I tell Gatsby to not inline these images directly into the page as data URI's?如何告诉 Gatsby 不要将这些图像作为数据 URI 直接内联到页面中?
Rather than using Webpack for these assets ( import x from "..."
) you should place them in your static
folder and reference them directly.与其将 Webpack 用于这些资产(
import x from "..."
),您应该将它们放在static
文件夹中并直接引用它们。 If your Gatsby site doesn't have a prefix (ie an index.js
file is served from /
) then you can hardcode the paths (eg href="/favicon.png"
).如果您的 Gatsby 站点没有前缀(即
index.js
文件是从/
),那么您可以对路径进行硬编码(例如href="/favicon.png"
)。 Otherwise you'll want to use withPrefix to provide the prefix in production.否则,您将需要使用withPrefix在生产中提供前缀。
You could also use GraphQL for this.您也可以为此使用 GraphQL。 If for example you have the logo in a folder called images your code would be something like this:
例如,如果您在名为 images 的文件夹中有徽标,您的代码将是这样的:
const data = useStaticQuery(graphql`
query Logo {
file(absolutePath: { regex: "/images/logo.png/" }) {
publicURL
}
}
`)
return <link rel="apple-touch-icon" sizes="57x57" href={data.file.publicURL} />
Please note, you'd need to use gatsby-source-filesystem
for your images to be available in GraphQL.请注意,您需要使用
gatsby-source-filesystem
使您的图像在 GraphQL 中可用。 It's already used by Gatsby internally so no need to install it. Gatsby 已经在内部使用了它,因此无需安装它。 Simply add it to your
gatsby-config.js
:只需将它添加到您的
gatsby-config.js
:
module.exports = {
plugins: [
{ resolve: `gatsby-source-filesystem`, options: { path: `${__dirname}/src/images` } },
// other plugins here...
],
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.