截图的乐趣
对于写博客来说，最有用的工具之一就是截图。你可以用截图做各种各样的事情。我发现它对于包含我在互联网上找到的内容特别有用。例如，你知道《纽约时报》在1969年报道过有人认为登月是伪造的吗？《纽约时报》网站的一个截图就说明了这一切
通常，最有用的截图类型是选择屏幕上的特定区域。在 Windows 上，按 Windows-Shift-S，然后拖动您想要截图的区域；在 Mac 上，则是 Command-Shift-4。
将此方法与在Microsoft Word或 Google Docs 中写博客结合起来，在文章中插入图片就变得格外容易。您无需担心寻找特殊的 HTML 语法来嵌入推文，或下载和调整图片大小来包含您找到的照片，或针对不同类型内容采用任何其他特殊方法。屏幕上显示的任何内容，您都可以截取屏幕快照，然后将其放入您的文章中！
巨型截图的问题
不幸的是，您可能会注意到，当您将截图粘贴到博客文章中并发布时，它显得太大了，而且不如您想要的那么清晰。例如，这是我在关于使用 Github Desktop 的博客文章中关于“commit”（提交）的示例图片
这大约是它在我屏幕上实际显示大小的两倍，而且清晰度远不如。要修复它，请查看图片的 markdown
并用这种特殊语法替换它（请注意，在这种形式中您不需要包含‘/images/’前缀）
这样显示出来的尺寸是正确的，并且与它在我屏幕上的清晰度相同（假设您也有高分辨率屏幕）
您可以使用编辑器的查找替换功能快速完成此操作，将 \!\[\](/images/ 替换为适当的语法，然后手动将行尾替换为 ‘ %}’。（当然，如果您知道如何在编辑器中使用正则表达式，您可以在一步内完成！）
（这幅漫画来自精彩的XKCD。）
技术细节
那么，这里发生了什么？坦率地说，这丝毫不重要。您可以随时停止阅读，去做些更有趣的事情。但是，如果您无事可做，我们就来聊聊高分辨率显示器和网络浏览器这个深奥的世界。（非常感谢Ross Wightman 引导我找到了解决这个问题的方法！）
基本问题在于，您的网络浏览器并没有将“像素”定义为……好吧，就是像素。它实际上将其定义为 1/96 英寸。原因在于，很长一段时间里，计算机显示器都是每英寸 96 点。当屏幕分辨率开始提高，我们从 CRT 显示器转向 LCD 显示器时，这就产生了一个问题：东西开始显得太小了。当设计师创建一个宽度为 96 像素的东西时，他们原本期望它能有 1 英寸宽。但在 200 dpi 的显示器上，它却不到半英寸宽！所以，当权者决定，网络浏览器中像素的定义仍旧是 1/96 英寸，无论您显示器上实际的像素尺寸是多少。
但是当我截取屏幕快照时，它实际上包含特定数量的像素。然后当我将它插入网页时，我的网络浏览器决定让每个像素占据 1/96 英寸。所以现在我就得到了一张巨大的图片！实际上并没有一个绝佳的方法来解决这个问题。网络论坛里到处是设计师们关于各种变通方法的讨论。但结果发现有一个巧妙的技巧通常效果很好。下面是图片 HTML 通常的样子
<img src="image.png">我们可以将其替换为这个稍作改动的版本
<img srcset="image.png 2w" sizes="1px">‘2w’和‘1px’告诉浏览器我们希望如何将图片宽度映射到像素。重要的是这两个数字之间的比例，在这里是 2。这意味着图片将被缩小到原来的一半，并且会以一种充分利用观看者高分辨率显示器（如果他们有的话）的方式进行。
这是浏览器中相对较新的一个功能，所以如果我们也希望使用旧软件的人也能看到正常效果，那么我们就应该同时包含我们之前看到的新旧两种方法，像这样
<img srcset="image.png 2w" sizes="1px" src="image.png”>每次需要插入图片时都手动写出来会很麻烦，但我们可以利用一个叫做 Jekyll 的东西，这是 Github Pages 使用的底层模板方法。我们可以创建自己的模板，也就是说，一小段文本，以后可以在其中填充参数，像这样
<img srcset="/images/{{ include.url }} 2w" sizes="1px" src="/images/{{ include.url }}">在fast_template中，我们将其保存在文件名为“screenshot”的文件里，这就是为什么我们可以使用之前看到的便捷语法的原因
