Cara Merubah Gambar Blogger Menjadi WebP Valid AMP
Table of Contents
Perlu diketahui, bahwa penggunaan Webp sudah lama dilakukan dengan cara sederhana. Dengan cara merubah format url gambarnya saja, cara tersebut hanya bisa di lakukan untuk gambar didalam artikel atau postingan.
Namun. Untuk menerapkan Webp di thumbnail sedikit lebih sulit, caranya cukup mudah untuk merubah gambar JPEG, PNG, dan lainnya dalam artikel menjadi Webp cukup memodifikasi url gambarnya saja.
Agar gambar postingan blogger menjadi ringan
Cara ini bisa digunakan untuk blog AMP dan Non AMP. Berikut cara merubah gambar atau image menjadi valid AMP:
- Contoh URL gambar awal
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-VzdeIHOu3OI0ZPaHZUa1akO8mmyZs7jiXJgYtAqGkmaTcJBWOg9UlJRlAo36kYbNyUIp5hTGKIlTz5AcBZmavC5OdW7GEMG8RxJa0p7nleR4dn0WhPW7xQpen20oXzykiNOHsg6zd0Q/s1600/ampblogger.png- Contoh URL gambar support WebP
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-VzdeIHOu3OI0ZPaHZUa1akO8mmyZs7jiXJgYtAqGkmaTcJBWOg9UlJRlAo36kYbNyUIp5hTGKIlTz5AcBZmavC5OdW7GEMG8RxJa0p7nleR4dn0WhPW7xQpen20oXzykiNOHsg6zd0Q/s1600-rw/ampblogger.pngMenggunakan statically untuk gambar auto WebP
Pada dasarnya di blogger sudah menyediakan CDN gratis yang bisa di maksimalkan, salah satunya yaitu statically.io yang dapat merubah gambar support WEBP. Berikut caranya:
1. Masuk akun blogger Anda
2. Pilih Tema > Edit HTML
3. Letakan kode script dibawah ini:
/*! lazysizes - v5.1.0 */ !function(a,b){var c=b(a,a.document);a.lazySizes=c,"object"==typeof module&&module.exports&&(module.exports=c)}("undefined"!=typeof window?window:{},function(a,b){"use strict";var c,d;if(function(){var b,c={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:!0,ricTimeout:0,throttleDelay:125};d=a.lazySizesConfig||a.lazysizesConfig||{};for(b in c)b in d||(d[b]=c[b])}(),!b||!b.getElementsByClassName)return{init:function(){},cfg:d,noSupport:!0};var e=b.documentElement,f=a.Date,g=a.HTMLPictureElement,h="addEventListener",i="getAttribute",j=a[h],k=a.setTimeout,l=a.requestAnimationFrame||k,m=a.requestIdleCallback,n=/^picture$/i,o=["load","error","lazyincluded","_lazyloaded"],p={},q=Array.prototype.forEach,r=function(a,b){return p[b]||(p[b]=new RegExp("(\\s|^)"+b+"(\\s|$)")),p[b].test(a[i]("class")||"")&&p[b]},s=function(a,b){r(a,b)||a.setAttribute("class",(a[i]("class")||"").trim()+" "+b)},t=function(a,b){var c;(c=r(a,b))&&a.setAttribute("class",(a[i]("class")||"").replace(c," "))},u=function(a,b,c){var d=c?h:"removeEventListener";c&&u(a,b),o.forEach(function(c){a[d](c,b)})},v=function(a,d,e,f,g){var h=b.createEvent("Event");return e||(e={}),e.instance=c,h.initEvent(d,!f,!g),h.detail=e,a.dispatchEvent(h),h},w=function(b,c){var e;!g&&(e=a.picturefill||d.pf)?(c&&c.src&&!b[i]("srcset")&&b.setAttribute("srcset",c.src),e({reevaluate:!0,elements:[b]})):c&&c.src&&(b.src=c.src)},x=function(a,b){return(getComputedStyle(a,null)||{})[b]},y=function(a,b,c){for(c=c||a.offsetWidth;c<d .minsize="" a._lazysizeswidth="" a="" b="" c="0,e=d.throttleDelay,g=d.ricTimeout,h=function(){b=!1,c=f.now(),a()},i=m&&g" d="[],e=[],f=d,g=function(){var" function="" h._lsflush="g,h}(),A=function(a,b){return" var="" z="">49?function(){m(h,{timeout:g}),g!==d.ricTimeout&&(g=d.ricTimeout)}:A(function(){k(h)},!0);return function(a){var d;(a=!0===a)&&(g=33),b||(b=!0,d=e-(f.now()-c),d<0 a.parentnode="" a.target="" a="" b.body="" b="" bot="" c="" d="" f="a,g=S(a);for(F-=c,I+=c,G-=c,H+=c;g&&(f=f.offsetParent)&&f!=b.body&&f!=e;)(g=(x(f," function="" g="" gle="" hidden="" i="" iframe="" img="" in="" ing="" l="" m="" navigator.useragent="" null="=J&&(J=" o="" onscroll="" opacity="" p="" return="" test="" var="" visibility="" x=""
y="">0)&&"visible"!=x(f,"overflow")&&(d=f.getBoundingClientRect(),g=H>d.left&&G<d .right="">d.top-1&&F<d .bottom="" a="" data-expand="" f="" function="" g="" h="" if="" j="" k="" m="1*p)||(m=O),r||(r=!d.expand||d.expand<1?e.clientHeight" n="" p="u[f][i](" q="" r="" return="" s="" t="" u="c.elements;if((o=d.loadMode)&&P<8&&(a=u.length)){for(f=0,Q++;f<a;f++)if(u[f]&&!u[f]._lazyRace)if(!M||c.prematureUnveil&&c.prematureUnveil(u[f]))aa(u[f]);else" var="">500&&e.clientWidth>500?500:370:d.expand,c._defEx=r,s=r*d.expFactor,t=d.hFac,J=null,O<s>2&&o>2&&!b.hidden?(O=s,Q=0):O=o>1&&Q>1&&P<6 m="" q="" r:n="" y="innerWidth+m*t,D=innerHeight+m,n=-1*m,q=m),h=u[f].getBoundingClientRect(),(I=h.bottom)">=n&&(F=h.top)<=D&&(H=h.right)>=n*t&&(G=h.left)<=y&&(I||H||G||F)&&(d.loadHidden||S(u[f]))&&(l&&P<3 aa="" f="" if="" k="!0,P" m="" o="" p="" u="">9)break}else!k&&l&&!j&&P<4 o="">2&&(g[0]||d.preloadAfterLoad)&&(g[0]||!p&&(I||H||G||F||"auto"!=u[f][i](d.sizesAttr)))&&(j=g[0]||u[f]);j&&!k&&aa(j)}},V=B(U),W=function(a){var b=a.target;if(b._lazyCache)return void delete b._lazyCache;R(a),s(b,d.loadedClass),t(b,d.loadingClass),u(b,Y),v(b,"lazyloaded")},X=A(W),Y=function(a){X({target:a.target})},Z=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.src=b}},$=function(a){var b,c=a[i](d.srcsetAttr).replace(/.*?:\/\//g,"https://cdn.statically.io/img/");(b=d.customMedia[a[i]("data-media")||a[i]("media")])&&a.setAttribute("media",b),c&&a.setAttribute("srcset",c)},_=A(function(a,b,c,e,f){var g,h,j,l,o,p;(o=v(a,"lazybeforeunveil",b)).defaultPrevented||(e&&(c?s(a,d.autosizesClass):a.setAttribute("sizes",e)),h=a[i](d.srcsetAttr),g=a[i](d.srcAttr).replace(/.*?:\/\//g,"//"),f&&(j=a.parentNode,l=j&&n.test(j.nodeName||"")),p=b.firesLoad||"src"in a&&(h||g||l),o={target:a},s(a,d.loadingClass),p&&(clearTimeout(m),m=k(R,2500),u(a,Y,!0)),l&&q.call(j.getElementsByTagName("source"),$),h?a.setAttribute("srcset",h):g&&!l&&(L.test(a.nodeName)?Z(a,g):a.src=g),f&&(h||l)&&w(a,{src:g})),a._lazyRace&&delete a._lazyRace,t(a,d.lazyClass),z(function(){var b=a.complete&&a.naturalWidth>1;p&&!b||(b&&s(a,"ls-is-cached"),W(o),a._lazyCache=!0,k(function(){"_lazyCache"in a&&delete a._lazyCache},9)),"lazy"==a.loading&&P--},!0)}),aa=function(a){if(!a._lazyRace){var b,c=K.test(a.nodeName),e=c&&(a[i](d.sizesAttr)||a[i]("sizes")),f="auto"==e;(!f&&l||!c||!a[i]("src")&&!a.srcset||a.complete||r(a,d.errorClass)||!r(a,d.lazyClass))&&(b=v(a,"lazyunveilread").detail,f&&E.updateElem(a,!0,a.offsetWidth),a._lazyRace=!0,P++,_(a,b,f,e,c))}},ba=C(function(){d.loadMode=3,V()}),ca=function(){3==d.loadMode&&(d.loadMode=2),ba()},da=function(){if(!l){if(f.now()-p<999 4.="" a._lazysizeswidth="d,d+=" a.mutationobserver="" a.setattribute="" a="" alsl:ca="" animationend="" attributes:="" b.getelementsbyclassname="" b.nodename="" b.readystate="" b:if="" b="" c.detail.dataattr="" c.detail="" c.elements.length="" c="{cfg:d,autoSizer:E,loader:D,init:F,uP:w,aC:s,rC:t,hC:r,fire:v,gW:y,rAF:z}});"
4. Gunakan kode berikut untuk menampilkan thumbnail pada homepage.
<b:if cond='data:post.thumbnailUrl'>
<picture>
<source expr:data-srcset='resizeImage(data:post.thumbnailUrl, 600, "16:9") + "?format=webp"' type='image/webp'/>
<source expr:data-srcset='resizeImage(data:post.thumbnailUrl, 600, "16:9")' type='image/jpg'/>
<img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 600, "16:9")' expr:title='data:post.title' height='9' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=' width='16'/>
</picture>
</b:if>
5. Untuk menampikan thumbnail di popular post, gunakan script berikut:
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<picture>
<source expr:data-srcset='resizeImage(data:post.thumbnail, 138, "16:9") + "?format=webp"' type='image/webp'/>
<source expr:data-srcset='resizeImage(data:post.thumbnail, 138, "16:9")' type='image/jpg'/>
<img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnail, 138, "16:9")' expr:title='data:post.title' height='9' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=' width='16'/>
</picture>
</div>
</b:if>
Script diatas sudah menggunakan lazyload jadi tidak mengurangi kecepatan blog. Itulah cara merubah gambar menjadi Webp valid AMP pada artikel kali ini dan semoga bermanfaat.
Post a Comment