怎样使博客文章中添加的图片清晰显示

在 blogger 中添加图片时，经常会出现显示不清晰的情况，我们来探讨一下该如何解决。

首先，我们要了解清楚我们的 blog 站点大部分读者会是谁，他们偏向怎样的浏览情况。

例如，若他们多数使用旧式 Windows 系统，则显示器分辨率偏向 1024*768；而如果是以 MacBook pro 为主，则显示器具有较高的分辨率；而如果大部分读者是在手机端浏览，则显示的分辨率会更低。

其次，我们要了解图片的来源，准确说是源图片的格式、大小、分辨率是多少。
不同的格式会造成在显示效果上的差异，而图片占据存储空间的大小，也会影响到加载速度，甚至是是否能够完整显示，而分辨率则会从根本上限制在浏览终端上的显示效果。

我们来针对几种情况说明一下：
1）低分辨率的图片在高分辨率的设备下显示模糊
这个比较容易理解。一张 50*50 像素的照片，若选择以放大的方式添加到 blog 文章中，则实际会以超过 50*50 像素的方式显示，图片会是模糊的；而如果以「实际大小」的方式添加到 blog 文章中，则会因为图片的「放大」展示效果，图片就会给人模糊的感觉。

所以在这种情况下，一般需要增加图片的分辨率，避免添加像素质量过低的图片，这是从源头上解决图片显示模糊的问题。

2）低分辨率设备添加的图片在高分辨率设备下显示模糊
例如，你在 1024*768 的旧式 Windows 电脑上截取了一张包含文字的图片，你以「原始大小」的方式添加到 blog 文章中，但是如果浏览者是在更高分辨率的设备下，则这张图片会因为拉伸而显示模糊。

在这种情况下，我们需要结合浏览观众的情况进行取舍。

3）结合浏览观众对图片进行选择
若你在 1024*768 的旧式 Windows 电脑上添加和浏览图片，或者说其它浏览者也多半是这个分辨率（几年前就是这样的情况），那么你可以很简单地以「原始大小」在 blog 文章添加图片即可，展示效果会是「最清晰」的情况。

如果你在 1024*768 的旧式 Windows 电脑上截取和添加图片，但浏览观众以高分辨率设备为主，则图片会因为拉伸而显示模糊；但是反过来，你在高分辨率设备上制作（截取）和添加图片，浏览者在低分辨率下则会因为压缩而清晰显示。

添加到 blog 中的图片，应该进行「瘦身」处理，可以选择合适的工具进行压缩，以减少图片的占用空间，这样在浏览时则可以加快加载速度。在 web 上浏览的图片，则应该以 web 图片格式为主，例如 .png 格式。

若浏览者以手机设备为主，则需要对 blog 进行专门的移动端适配，添加的图片也需要考虑这种情况。目前来说，在多数手机上浏览图片，图片横向分辨率达到 640 像素即可，在更高分辨率的手机上浏览，则需要提高图片的分辨率，但是如果图片分辨率过高，一来在低分辨率下显示会因为过度压缩反而显示不清晰，二来也会显著提升图片占据的存储空间，影响图片加载速度。

为了在 blog 中添加的图片在多数设备上清晰浏览，我们需要在添加图片时，尽量让图片的分辨率略高于显示设备，这样在实际放大显示时不会过于模糊。一个有效的经验是，如果在本机截取屏幕生成图片，我们可以借助系统提供的图片预览工具，在工具中对图片进行放大和缩小，显示效果最佳时，记录下当前显示分辨率（一般屏幕截图工具能够做到），在 blog 中添加图片时，通过修改添加图片的相关 HTML 控制语句，可以达到清晰显示图片的效果。


小测试：
下面是一张在 MacBook pro（屏幕分辨率 2560*1600）上截取的图片，图片实际分辨率为 198*198，最佳显示分辨率为 100*100（系统「预览」工具在「1倍」效果下显示的分辨率）。

1）以「原始大小」添加

2）以 100*100 的像素大小添加

切换到 HTML 编辑模式，将图片的 width 和 height 属性值分别设置为最佳分辨率，即：width=100，height=100