我喜欢降价促销。我将其与Template Toolkit结合使用，基本上不需要编写任何html。我的网页是静态的，只有Google Analytics（分析）使用的js代码段。我最想保持这种状态。我的JavaScript经验为零。
我可以使用一些应用于DIV的类来做某种程度的简单页面布局。
所以这个
<DIV class=picr3>
![Shelterbelt-12][2]
Planting a shelterbelt, or any tree project...
***
</DIV>
[2]: /Images/Shelterbelt/Shelterbelt-12.jpg
是我需要使用的所有html，以使图像大小浮动到右侧的Content div宽度的30％。该系统并不完美，但是它的大小调整得相当不错，而且由于页面是静态的，因此可以很好地缓存并快速交付。
对我来说更重要：我可以花时间编写内容，而很少调整布局。
问题：如果我在手机上提供漂亮的桌面图像，下载时间会很高。如果我提供降低分辨率的图像以快速访问电话，则看起来就像是在桌面上的废话。
在HTML中，我们现在有了元素，并结合了srcset和size属性。这将原来是简单的img标签的内容变成了这样：
<picture>
<source media="(max-width: 700px)" sizes="(max-width: 500px) 50vw, 10vw"
srcset="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w">
<source media="(max-width: 1400px)" sizes="(max-width: 1000px) 100vw, 50vw"
srcset="stick-figure.png 416w, stick-figure-hd.png 416w">
<img src="stick-original.png" alt="Human">
</picture>
在这一点上，我正在考虑将自己的解决方案沿这条线推进：
用
使用标准的命名约定，对大型版本说出whatimage-L.jpg，对于中型版本说出-M.jpg，而-S。 jpg（小版）。
预处理生成的markdown文件，以从嵌入式markdown生成完整的元素。我认为这在我有限的perl编程能力之内。
陷阱？
这个轮子已经发明了吗？
更好的方法来解决这个问题？我应该咬一口子，并用一个javascript代码段来做到这一点吗？
我在徘徊于“曲折的迷宫，完全不同”的迷途中还缺少其他解决方案吗？
主持人注意：这可能更适合网站管理员。似乎是更多程序。如果您认为它应该在那儿，请移动它。