Ditulis oleh: Ditulis pada: 12/18/2019
Gambar Blogger Support WEBP Dengan Auto WEBP Statically - Saat ini Statically sudah memiliki fitur auto WEBP dengan Statically Imgpx dan tentunya ini sangat berguna agar semua gambar di postingan blog kita bisa support WEBP.
Nah sebelumnya saya sudah membahas tentang cara menggunakan Staticaly untuk sumber CDN gambar Blogger. Jika Anda sudah mengikuti cara ini, maka sekarang gambar postingan Anda sudah support WEBP.
Dan saya juga sudah membagikan cara mudah menggunakan CDN Staticaly pada gambar Blogger dengan javascript. Jika Anda sudah mengikuti cara ini juga, maka sekarang gambar postingan Anda sudah support WEBP juga.
Dengan auto WEBP Statically ini, kita tidak perlu lagi menuliskan fallback image di HTML karena Statically sudah rewrite itu. Jadi sekarang Statically otomatis merubah semua gambar menjadi WEBP di semua browser yang mendukung WEBP.
Jadi cukup dengan merubah URL gambar blogger seperti berikut ini.
<img border="0" data-original-height="815" data-original-width="1280" src="https://4.bp.blogspot.com/-huIADrjEcTY/W6nUEm9nqSI/AAAAAAAAzM0/PhzkECo_SZYX0bL1ILxfNW11pOx-X2TUACLcBGAs/s1600/gambar-blogger.png" />Menjadi seperti berikut ini.
<img border="0" data-original-height="815" data-original-width="1280" src="https://cdn.statically.io/img/4.bp.blogspot.com/-huIADrjEcTY/W6nUEm9nqSI/AAAAAAAAzM0/PhzkECo_SZYX0bL1ILxfNW11pOx-X2TUACLcBGAs/s1600/gambar-blogger.png" />Maka gambar sudah support WEBP tanpa perlu menuliskan fallback lagi.
Dan tentu saja ini sangat berguna juga untuk gambar thumbnail blogger. Untuk cara merubah thumbnail Blogger agar support WEBP seperti cara yang sebelumnya saya bagikan itu sebenarnya tetap work. Namun saya kasih alternatif lain dengan tidak menggunakan tag <picture>.
Jadi untuk kode thumbnail Blogger tetap menggunakan kode seperti data:post.thumbnailUrl, data:post.postImageUrl, atau data:post.firstImageUrl seperti berikut contohnya.
<b:if cond='data:post.thumbnailUrl'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title' height='9' width='16'/>
</b:if>Kemudian silahkan gunakan script berikut untuk merubah protocol URL image dan otomatis menambahkan lazyload. Script ini juga akan otomatis merubah gambar di post dan di widget.
for(var imgEl=document.querySelectorAll("img"),i=0;i<imgEl.length;i++)imgEl[i].getAttribute("src")&&(imgEl[i].setAttribute("data-src",imgEl[i].getAttribute("src").replace(/.*?:\/\//g , "https://cdn.statically.io/img/")),imgEl[i].removeAttribute("src"),imgEl[i].className+=" lazyload");
!function(t,e){var a=e(t,t.document);t.lazySizes=a,"object"==typeof module&&module.exports&&(module.exports=a)}("undefined"!=typeof window?window:{},function(t,e){"use strict";var a,n;if(function(){var e,a={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};n=t.lazySizesConfig||t.lazysizesConfig||{};for(e in a)e in n||(n[e]=a[e])}(),!e||!e.getElementsByClassName)return{init:function(){},cfg:n,noSupport:!0};var i=e.documentElement,l=t.Date,s=t.HTMLPictureElement,o="addEventListener",r="getAttribute",c=t[o],d=t.setTimeout,m=t.requestAnimationFrame||d,u=t.requestIdleCallback,p=/^picture$/i,h=["load","error","lazyincluded","_lazyloaded"],f={},g=Array.prototype.forEach,y=function(t,e){return f[e]||(f[e]=new RegExp("(\\s|^)"+e+"(\\s|$)")),f[e].test(t[r]("class")||"")&&f[e]},b=function(t,e){y(t,e)||t.setAttribute("class",(t[r]("class")||"").trim()+" "+e)},v=function(t,e){var a;(a=y(t,e))&&t.setAttribute("class",(t[r]("class")||"").replace(a," "))},A=function(t,e,a){var n=a?o:"removeEventListener";a&&A(t,e),h.forEach(function(a){t[n](a,e)})},z=function(t,n,i,l,s){var o=e.createEvent("Event");return i||(i={}),i.instance=a,o.initEvent(n,!l,!s),o.detail=i,t.dispatchEvent(o),o},w=function(e,a){var i;!s&&(i=t.picturefill||n.pf)?(a&&a.src&&!e[r]("srcset")&&e.setAttribute("srcset",a.src),i({reevaluate:!0,elements:[e]})):a&&a.src&&(e.src=a.src)},C=function(t,e){return(getComputedStyle(t,null)||{})[e]},E=function(t,e,a){for(a=a||t.offsetWidth;a<n.minSize&&e&&!t._lazysizesWidth;)a=e.offsetWidth,e=e.parentNode;return a},k=function(){var t,a,n=[],i=[],l=n,s=function(){var e=l;for(l=n.length?i:n,t=!0,a=!1;e.length;)e.shift()();t=!1},o=function(n,i){t&&!i?n.apply(this,arguments):(l.push(n),a||(a=!0,(e.hidden?d:m)(s)))};return o._lsFlush=s,o}(),T=function(t,e){return e?function(){k(t)}:function(){var e=this,a=arguments;k(function(){t.apply(e,a)})}},S=function(t){var e,a=0,i=n.throttleDelay,s=n.ricTimeout,o=function(){e=!1,a=l.now(),t()},r=u&&s>49?function(){u(o,{timeout:s}),s!==n.ricTimeout&&(s=n.ricTimeout)}:T(function(){d(o)},!0);return function(t){var n;(t=!0===t)&&(s=33),e||(e=!0,n=i-(l.now()-a),0>n&&(n=0),t||9>n?r():d(r,n))}},x=function(t){var e,a,n=99,i=function(){e=null,t()},s=function(){var t=l.now()-a;n>t?d(s,n-t):(u||i)(i)};return function(){a=l.now(),e||(e=d(s,n))}},L=function(){var s,m,u,h,f,E,L,N,P,_,I,M,R=/^img$/i,$=/^iframe$/i,H="onscroll"in t&&!/(gle|ing)bot/.test(navigator.userAgent),F=0,j=0,O=0,W=-1,Q=function(t){O--,(!t||0>O||!t.target)&&(O=0)},D=function(t){return null==M&&(M="hidden"==C(e.body,"visibility")),M||"hidden"!=C(t.parentNode,"visibility")&&"hidden"!=C(t,"visibility")},U=function(t,a){var n,l=t,s=D(t);for(N-=a,I+=a,P-=a,_+=a;s&&(l=l.offsetParent)&&l!=e.body&&l!=i;)(s=(C(l,"opacity")||1)>0)&&"visible"!=C(l,"overflow")&&(n=l.getBoundingClientRect(),s=_>n.left&&P<n.right&&I>n.top-1&&N<n.bottom+1);return s},q=function(){var t,l,o,c,d,u,p,f,g,y,b,v,A=a.elements;if((h=n.loadMode)&&8>O&&(t=A.length)){for(l=0,W++;t>l;l++)if(A[l]&&!A[l]._lazyRace)if(!H||a.prematureUnveil&&a.prematureUnveil(A[l]))tt(A[l]);else if((f=A[l][r]("data-expand"))&&(u=1*f)||(u=j),y||(y=!n.expand||n.expand<1?i.clientHeight>500&&i.clientWidth>500?500:370:n.expand,a._defEx=y,b=y*n.expFactor,v=n.hFac,M=null,b>j&&1>O&&W>2&&h>2&&!e.hidden?(j=b,W=0):j=h>1&&W>1&&6>O?y:F),g!==u&&(E=innerWidth+u*v,L=innerHeight+u,p=-1*u,g=u),o=A[l].getBoundingClientRect(),(I=o.bottom)>=p&&(N=o.top)<=L&&(_=o.right)>=p*v&&(P=o.left)<=E&&(I||_||P||N)&&(n.loadHidden||D(A[l]))&&(m&&3>O&&!f&&(3>h||4>W)||U(A[l],u))){if(tt(A[l]),d=!0,O>9)break}else!d&&m&&!c&&4>O&&4>W&&h>2&&(s[0]||n.preloadAfterLoad)&&(s[0]||!f&&(I||_||P||N||"auto"!=A[l][r](n.sizesAttr)))&&(c=s[0]||A[l]);c&&!d&&tt(c)}},V=S(q),G=function(t){var e=t.target;return e._lazyCache?void delete e._lazyCache:(Q(t),b(e,n.loadedClass),v(e,n.loadingClass),A(e,X),z(e,"lazyloaded"),void 0)},K=T(G),X=function(t){K({target:t.target})},J=function(t,e){try{t.contentWindow.location.replace(e)}catch(a){t.src=e}},Y=function(t){var e,a=t[r](n.srcsetAttr).replace(/.*?:\/\//g,"https://cdn.statically.io/img/");(e=n.customMedia[t[r]("data-media")||t[r]("media")])&&t.setAttribute("media",e),a&&t.setAttribute("srcset",a)},Z=T(function(t,e,a,i,l){var s,o,c,m,h,f;(h=z(t,"lazybeforeunveil",e)).defaultPrevented||(i&&(a?b(t,n.autosizesClass):t.setAttribute("sizes",i)),o=t[r](n.srcsetAttr),s=t[r](n.srcAttr).replace(/.*?:\/\//g,"//"),l&&(c=t.parentNode,m=c&&p.test(c.nodeName||"")),f=e.firesLoad||"src"in t&&(o||s||m),h={target:t},b(t,n.loadingClass),f&&(clearTimeout(u),u=d(Q,2500),A(t,X,!0)),m&&g.call(c.getElementsByTagName("source"),Y),o?t.setAttribute("srcset",o):s&&!m&&($.test(t.nodeName)?J(t,s):t.src=s),l&&(o||m)&&w(t,{src:s})),t._lazyRace&&delete t._lazyRace,v(t,n.lazyClass),k(function(){var e=t.complete&&t.naturalWidth>1;f&&!e||(e&&b(t,"ls-is-cached"),G(h),t._lazyCache=!0,d(function(){"_lazyCache"in t&&delete t._lazyCache},9)),"lazy"==t.loading&&O--},!0)}),tt=function(t){if(!t._lazyRace){var e,a=R.test(t.nodeName),i=a&&(t[r](n.sizesAttr)||t[r]("sizes")),l="auto"==i;(!l&&m||!a||!t[r]("src")&&!t.srcset||t.complete||y(t,n.errorClass)||!y(t,n.lazyClass))&&(e=z(t,"lazyunveilread").detail,l&&B.updateElem(t,!0,t.offsetWidth),t._lazyRace=!0,O++,Z(t,e,l,i,a))}},et=x(function(){n.loadMode=3,V()}),at=function(){3==n.loadMode&&(n.loadMode=2),et()},nt=function(){if(!m){if(l.now()-f<999)return void d(nt,999);m=!0,n.loadMode=3,V(),c("scroll",at,!0)}};return{_:function(){f=l.now(),a.elements=e.getElementsByClassName(n.lazyClass),s=e.getElementsByClassName(n.lazyClass+" "+n.preloadClass),c("scroll",V,!0),c("resize",V,!0),t.MutationObserver?new MutationObserver(V).observe(i,{childList:!0,subtree:!0,attributes:!0}):(i[o]("DOMNodeInserted",V,!0),i[o]("DOMAttrModified",V,!0),setInterval(V,999)),c("hashchange",V,!0),["focus","mouseover","click","load","transitionend","animationend"].forEach(function(t){e[o](t,V,!0)}),/d$|^c/.test(e.readyState)?nt():(c("load",nt),e[o]("DOMContentLoaded",V),d(nt,2e4)),a.elements.length?(q(),k._lsFlush()):V()},checkElems:V,unveil:tt,_aLSL:at}}(),B=function(){var t,a=T(function(t,e,a,n){var i,l,s;if(t._lazysizesWidth=n,n+="px",t.setAttribute("sizes",n),p.test(e.nodeName||""))for(i=e.getElementsByTagName("source"),l=0,s=i.length;s>l;l++)i[l].setAttribute("sizes",n);a.detail.dataAttr||w(t,a.detail)}),i=function(t,e,n){var i,l=t.parentNode;l&&(n=E(t,l,n),i=z(t,"lazybeforesizes",{width:n,dataAttr:!!e}),i.defaultPrevented||(n=i.detail.width)&&n!==t._lazysizesWidth&&a(t,l,i,n))},l=function(){var e,a=t.length;if(a)for(e=0;a>e;e++)i(t[e])},s=x(l);return{_:function(){t=e.getElementsByClassName(n.autosizesClass),c("resize",s)},checkElems:s,updateElem:i}}(),N=function(){!N.i&&e.getElementsByClassName&&(N.i=!0,B._(),L._())};return d(function(){n.init&&N()}),a={cfg:n,autoSizer:B,loader:L,init:N,uP:w,aC:b,rC:v,hC:y,fire:z,gW:E,rAF:k}});Semoga bermanfaat.