如何修复自定义Blogger模板的首页缩略图模糊问题？

可直接落地的操作步骤 #

• 校验缩略图请求的内置尺寸参数
  Blogger 博文配图支持通过URL参数自定义输出分辨率，绝大多数缩略图模糊问题的根源是模板硬编码了低分辨率的调用参数：比如默认请求宽度为180px的图，却通过CSS把缩略图容器撑到360px以上的显示尺寸，低分辨率图被强行拉伸后就会出现明显模糊。
  直接对应实际显示尺寸调整参数即可：核算缩略图容器的实际显示宽度，把URL里的尺寸参数替换为2倍宽度的规格（适配Retina高清屏的显示需求），比如容器显示宽度为300px，就把参数替换为w600-h400-c，其中c参数代表按比例裁切，不会拉伸图片原有比例。
• 移除强制触发有损压缩的冗余参数
  部分老旧模板为了压缩加载体积，会在缩略图请求后拼接-c-rw这类触发服务端二次有损压缩的参数，这类压缩输出的图片会自带软模糊的边界，直接找到对应参数删除即可，让服务端按照指定尺寸输出原生无压缩的图片资源。
• 调整CSS层的图片渲染规则
  给缩略图元素对应的CSS规则加上image-rendering: -webkit-optimize-contrast;属性，优化浏览器缩放图片时的边缘锯齿效果，同时确认CSS规则中没有设置超出图片原始分辨率的宽高值，避免无意义的像素拉伸。
• 排查第三方脚本的URL拦截逻辑
  检查模板中接入的懒加载、CDN优化类自定义脚本，确认脚本没有把Blogger内置的博文缩略图请求重定向到低分辨率的缓存节点，把博文缩略图的路径加入脚本白名单，跳过对应的拦截规则。

内容的提问来源于stack exchange，提问作者Djalel