markdown 加载图片_优化HTML和Markdown图像加载

markdown 加载图片

This is the third article about image optimization I implemented in my blog on Nuxt with Netlify CMS.

这是我在Netxify CMS上的Nuxt博客中实现的关于图像优化的第三篇文章。

Check previous ones if you haven’t already:

如果您还没有，请检查以前的那些：

1. Image optimization service for Netlify CMS and Nuxt — about how I have chosen to use Netlify Large Media for that.

   针对Netlify CMS和Nuxt的图像优化服务 -关于我选择如何使用Netlify Large Media的信息。

2. Fixing Netlify Large Media install — about my terrifying experience setting up Netlify Large Media.

   修复Netlify Large Media的安装 -关于我设置Netlify Large Media的可怕经历。

In this article, I’m going to talk about how I implemented all this on my website. What worked and what didn’t.

在本文中，我将讨论如何在我的网站上实现所有这些功能。 什么有效，什么无效。

HTML中的图像 (Images in HTML)

Let’s start with the images set using HTML.

让我们从使用HTML设置的图像开始。

This is how it’s done with me:

这是我的工作方式：

从Netlify Large Media加载优化的图像 (Loading optimized images from Netlify Large Media)

I add ?nf_resize&w=250 to load an image with a width reduced to 250 pixels and proportional heigh.

我添加?nf_resize&w=250来加载宽度减小到250像素且成比例的?nf_resize&w=250的图像。

Why I chose 250px? I checked what is the maximum width of the particular image when it's rendered and set the width accordingly.

为什么选择250px ？ 我检查了渲染特定图像时的最大宽度，并相应地设置了宽度。

On my site, images usually are shown in different sizes. For desktop browsers, it’s fixed width. On mobile, it’s wired to screen width, so it could range from 30px to 236px (something like this), so I simply chose 250px since it never gets bigger than this.

在我的网站上，图片通常以不同大小显示。 对于桌面浏览器，它是固定宽度。 在移动设备上，它是连接到屏幕宽度，所以它的范围可以从30px到236px (像这样)，所以我干脆选择了250px ，因为它从来没有得到比这更大。

Additional parameters that can be specified on image request from Netlify Large Media you may find in docs.

您可以在docs中找到来自Netlify Large Media的图像请求中可以指定的其他参数。

延迟加载 (Lazy loading)

Adding loading="lazy" say that browser should load an image only when it's close to the viewable viewport.

添加loading="lazy"表示浏览器仅在图像靠近可见视口时才加载图像。

When I didn’t set that at the beginning, the page loaded in the following way: on page open, browser paints the first HTML and starts loading all images used on the current page and until it finishes page are shown as loading. If the page contains many pictures, that take time. Sometimes a lot.

当我没有在开始时进行设置时，页面会以以下方式加载：打开页面时，浏览器绘制第一个HTML并开始加载当前页面上使用的所有图像，直到页面显示为加载完成。 如果页面包含许多图片，则需要花费一些时间。 有时很多。

When you set loading="lazy" browser loads only images that are in the viewable part of the page and in the area of 1250px- 2500px down it (doc). At least on Chromium browsers it should work this way.

设置loading="lazy"浏览器仅加载页面可见部分中的图片，并且该页面2500px为( doc ) 1250px - 2500px 。 至少在Chromium浏览器上，它应该以这种方式工作。

So, yeah, it could speed up page load a lot, since loading first 3 images and then others, as needed, is faster than loading more at once.

因此，是的，它可以大大加快页面加载速度，因为先加载前3张图像，然后再加载其他图像(比一次加载更多图像要快)。

However, I didn’t set this for the first images on the pages, as advised officially here. These images are anyway going to be loaded on the page open.

但是，我并没有设置此为页面上的第一个图像，建议正式在这里 。 无论如何，这些图像将被加载到open页面上。

尝试srcset和sizes (Trying srcset and sizes)

I also tried to do responsive image loading with the following code from Mozilla:

我还尝试使用Mozilla的以下代码进行响应式图像加载：

<img srcset="path_to_image.png?nf_resize=fit&w=180 180w,
             path_to_image.png?nf_resize=fit&w=250 250w"
     sizes="(max-width: 400px) 180px, 250px" 
     src="path_to_image.png?nf_resize=fit&w=250" 
     alt=". . ." 
/>

As from code, it means that on screens with a width up to 400 pixels browser should request an image with this parameters: ?nf_resize=fit&w=180 180w. Hence with a width of 180 pixels. While on screens with a width of more than 400 pixels, it should load an image with this parameters: ?nf_resize=fit&w=250 250w. So the width should be 250 pixels.

从代码开始，这意味着在宽度最大为400像素的屏幕上，浏览器应请求具有以下参数的图像： ?nf_resize=fit&w=180 180w 。 因此具有180个像素的宽度。 在宽度大于400像素的屏幕上时，应使用以下参数加载图像： ?nf_resize=fit&w=250 250w 。 因此宽度应为250像素。

But these didn’t work.

但是这些没有用。

When specifying sizes in the percentage of vw (viewport), everything works, as you will see later on with Markdown images. But with px specifications nothing worked. Images were always loading with this parameters: ?nf_resize=fit&w=250 250w 路‍♂️.

当以vw (视口)的百分比指定sizes时，一切正常，正如稍后将在Markdown图像中看到的那样。 但是用px规范没有用。 始终使用以下参数加载图像： ?nf_resize=fit&w=250 250w ♂‍♂️。

After playing with it for some time, I understood that I could simply leave it with one ?nf_resize=fit&w=250 250w parameters.

在玩了一段时间之后，我了解到我可以只留下一个?nf_resize=fit&w=250 250w参数。

My images become really responsive on mobile, and figuring out correct vw for different layouts is a considerable pain (at least for me).

我的图像在移动设备上真正变得灵敏，找出适用于不同布局的正确vw是相当痛苦的(至少对我而言)。

I have also downloaded images to compare their sizes. 250px one was 114 kb, where 180px one was 63,3 kb. Quite twice a difference, but after running Page Speed tests with 180px image, I didn't see any improvements路‍♂️.

我还下载了图像以比较它们的大小。 250px为114 kb，其中180px 250px为63.3 kb。 相差两倍，但是在以180px图像运行Page Speed测试后，我看不到任何改进。

从Markdown加载优化的图像 (Loading optimized images from Markdown)

Doing all this optimization for blog posts is a bit more complicated.

对博客帖子进行所有这些优化会更加复杂。

All my posts are written in Markdown and gets converted into HTML by markdown-it plugin.

我所有的帖子都是用Markdown编写的，并通过markdown-it插件转换为HTML。

Markdown language has some specifications and limitations on how images are described. Here is the structure of the image specification: ![Alt text people will see if picture can't be seen](https://link.of/image "Title to show under the image"). Not so many things we could specify. Luckily we can do a lot of modification on how Markdown is translated to HTML with the additional markdown-it- plugins.

Markdown语言在描述图像方面有一些规范和限制。 这是图像规范的结构： ![Alt text people will see if picture can't be seen](https://link.of/image "Title to show under the image") 。 我们可以指定的东西不多。 幸运的是，我们可以使用附加的markdown-it-插件对Markdown如何转换为HTML进行大量修改。

懒惰的图像 (Lazy images)

First of all, I found and added a plugin that adds loading="lazy" to every image that is rendered by markdown-it.

首先，我找到并添加了一个插件，该插件向markdown-it呈现的每个图像添加loading="lazy" 。

Here is it: markdown-it-image-lazy-loading. ! If you are also planning to load optimized images by adding URL parameters to images, then wait a bit before adding it. There is a way to use only the plugin I will show next without the need to install this one. Just proceed to the next section.

就是这样： markdown-it-image-lazy-loading 。 ！ 如果您还计划通过向图像添加URL参数来加载优化的图像，请稍等一下再添加。 有一种方法可以仅使用我将在接下来显示的插件，而无需安装该插件。 只需进行下一部分。

After setting loading="lazy" loading speed of blog pages with many images rocketed. This attribute is really must-have. Check the results in the next article.

设置好具有大量图片的博客页面的loading="lazy"加载速度后。 这个属性确实是必须具备的。 在下一篇文章中检查结果。

具有srcset和sizes图像 (Images with srcset and sizes)

Then I tried adding markdown-it-responsive package that should add srcset and sizes attributes to every image, but this didn't work at all. I have been getting HTML rendering error and broken pages☹️.

然后我试图加入降价，它响应包，应该添加srcset和sizes属性，每一个形象，但这并没有在所有的工作。 我一直在收到HTML呈现错误和破碎的页面☹️。

After some additional search, I have found this plugin: markdown-it-modify-token. After checking it, I understood that it would work great, and I can do everything I need with it.

经过一些额外的搜索，我找到了这个插件： markdown-it-modify-token 。 检查后，我知道它会很好用，并且我可以使用它来做我需要的一切。

Some time and this code was born:

一段时间，这段代码诞生了：

modifyToken: function(token, env) {   
   switch (token.type) {     
     case "image":       token.attrObj.srcset = 
             `${token.attrObj.src} nf_resize=fit&w=300 300w, ` + 
             `${token.attrObj.src}?nf_resize=fit&w=600 600w`;       token.attrObj.src = token.attrObj.src + "?
         nf_resize=fit&w=600";       break;   
    } 
},

By specifying srcset this way I'm saying to the browser: here is two images, with the width of 300px and 600px, decide by yourself what image to load according to 100% viewport width.

通过这样指定srcset我对浏览器说：这是两个图像，宽度分别为300px和600px ，您可以根据100％视口宽度600px决定要加载的图像。

First I also added size attribute, this way:

首先，我还通过这种方式添加了size属性：

But removed it after reading Chris Coyier article. It’s the default value for the browser, so no need to specify that additionally.

但在阅读Chris Coyier的文章后将其删除。 这是浏览器的默认值，因此无需另外指定。

It works, but the behaviour is a bit strange (at least for me). When screen width is 200px browser load image with 300px width, but when screen width is set to 250px image with 600px width is loaded... I don't understand that.

它有效，但是行为有点奇怪(至少对我而言)。 当屏幕宽度为200px浏览器将加载300px宽度的图像，但是当屏幕宽度设置为250px将加载600px宽度的图像...我不明白。

And again specifying sizes in px only led to 600px image to be loaded...

再次以px指定sizes只会导致加载600px图像...

Here is code I have tried:

这是我尝试过的代码：

token.attrObj.sizes = "(max-width: 400px) 300px, 600px"

Ok, I will just leave sizes as 100vw and let the browser decide when to load what. Hope browser is smart.

好的，我将大小保持为100vw ，让浏览器决定何时加载。 希望浏览器很聪明。

As I wrote before, the usage of markdown-it-image-lazy-loading plugin could be dropped here for additional code in

如我之前所写，可以将markdown-it-image-lazy-loading插件的用法放在此处，以获取其他代码

modifyToken: function(token, env) {}

Just add this:

只需添加：

token.attrObj.loading = "lazy";

Here, in case "image"::

在这里， case "image": ：

modifyToken: function(token, env) {   
   switch (token.type) {     
     case "image":       token.attrObj.srcset = 
             `${token.attrObj.src}?nf_resize=fit&w=300 300w, ` + 
             `${token.attrObj.src}?nf_resize=fit&w=600 600w`;       token.attrObj.src = token.attrObj.src + "?
         nf_resize=fit&w=600";break;   
    } 
},

By the way, if you want to always load images with one size, just remove srcset setter. It would look this way:

顺便说一句，如果您想始终以一种尺寸加载图像，只需删除srcset setter。 它看起来像这样：

switch (token.type) {   
  case "image":     token.attrObj.src = token.attrObj.src + "nf_resize=fit&w=600";     // token.attrObj.loading = "lazy";     break; 
}

As you remember, it’s better to have the first images without lazy load, but it’s a bit hard to do with images from Markdown. Additional logic should be written for markdown-it, and the time investment is not really worth it for me. Yes, there is a small drop a performance, as guys from Google say, but it won’t break the bank, I think.

您还记得，最好先制作没有延迟加载的图像，但是使用Markdown的图像有点困难。 应该为降价编写更多的逻辑，而时间投入对我来说并不值得。 是的，就像Google的家伙所说的那样，性能有小幅下降，但是我认为这不会破坏银行的实力。

That’s all I have done for better image loading on my site. In the next article, you could check page speed improvements I got. They are quite solid.

我要做的就是为了更好地在网站上加载图片。 在下一篇文章中 ，您可以检查我得到的页面速度改进。 他们很扎实。

To see more behind-the-curtain of my blog creation join me on Twitter as I continue sharing how I’m making it.

要查看更多博客创建的幕后花絮，请与我一起加入Twitter，同时我继续分享自己的创作方式。

Originally published at https://nikitagoncharuk.com on September 4, 2020.

最初于 2020年9月4日 发布在 https://nikitagoncharuk.com 上。

翻译自: https://medium.com/@nikitagoncharuk/optimized-image-loading-in-html-and-markdown-84c7796d2b79

markdown 加载图片