利用阿里云oss图片处理和CDN边缘规则，将图转为webp格式
<br /><br /><font size="5">概述</font><br /><ul type="1" class="litype_1"><li>采用阿里云的图片处理，将图片加水印、调整大小、压缩为webp格式（无损压缩图片平均到原大小三分之一）<li>图片体积大幅减少，大概能减少三分之二。<li>提升网站打开速度<li>节省网站流量成本。<li>全oss的bucket（桶）支持原图保护<li>全oss的bucket（桶）支持水印机制<li>全oss的bucket（桶）支持图片压缩<li><strong>支持如果浏览器不支持webp格式，自动降级为原格式。</strong><li><strong>压缩支持GIF格式 效果参考又拍云的说明 https://www.upyun.com/webp</strong><br /></ul><br /><br /><font size="5">需要用到的技术</font><br /><ul type="1" class="litype_1"><li><strong>阿里oss附件云存储 https://addon.dismall.com/plugins/zhanmishu_storage.html (其他友商插件也支持哦~~)</strong><li>阿里云cdn边缘脚本<li>阿里云图片处理技术<br /></ul><br /><br /><font size="5">配置方法</font><br /><font size="5">1、安装上述的插件，或者其他友商oss插件。（我司插件需要关闭插件自带的水印机制）</font><br /><font size="5">2、配置水印机制</font><br /><img title="123.jpg" id="aimg_11329" aid="11329" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202107/06/165536jln5sl5np5sglyyy.jpg" src="https://www.dismall.com/data/attachment/forum/202107/06/165536jln5sl5np5sglyyy.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><font size="5">3、配置图片处理机制</font><br /><img title="1234.jpg" id="aimg_11330" aid="11330" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202107/06/165547tdc8mvkrg46v3d68.jpg" src="https://www.dismall.com/data/attachment/forum/202107/06/165547tdc8mvkrg46v3d68.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><font size="5">5、配置边缘脚本</font><br /><ol><li>m1 = and($http_accept, match_re($http_accept, '.*image\/webp.*'))<br /><li>m2 = match_re($uri, '.+(.JPEG|.jpeg|.JPG|.jpg|.PNG|.png|gif|GIF)(\?.*)?)<br /><li>if and(m1, m2) {<br /><li> rewrite(concat($uri, '/webp?', $args), 'enhance_break', 301)<br /><li>}<br /><li>if and(m2, not(m1)) {<br /><li> rewrite(concat($uri, '/safe?', $args), 'enhance_break', 301)<br /><li>}<br /><li></ol><br /><br /><img title="3.png" id="aimg_11331" aid="11331" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202107/06/165700eyjdjkzzdazf4ll6.png" src="https://www.dismall.com/data/attachment/forum/202107/06/165700eyjdjkzzdazf4ll6.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="600" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br /><br /><font size="5">最后，如果实在不会配置的，可以联系我们帮助</font><br /><ul type="1" class="litype_1"><li>QQ 87883395<li>微信 tianlanyan<br /></ul><br />图片<em>, </em>list<em>, </em>oss<em>, </em>支持
頁:
[1]