Club para webmasters › Foros › Creación de páginas web › Imágenes borrosas en resultados de Google
- Este debate tiene 3 respuestas, 2 mensajes y ha sido actualizado por última vez el hace 1 año, 1 mes por RaulSkelly.
-
AutorEntradas
-
Buenas chorris!
Tengo una web hecha con el tema Bricks, que usa Rank Math como plugin de SEO, y con todas las imágenes subidas en formato webp.
Si buscáis Tailordoc en google, os saldrá en primera posición. Si vais a ver las imágenes, veréis que salen muy pixeladas cuando se seleccionan, y de hecho, muestra una dirección en su URL completamente desconocida, con un base64.
data:image/jpeg;base64,/9j/4AAQSkZJR….
Es la primera vez que me pasa y no encuentro mucha solución al respecto en foros y demás…
Sabríais a qué puede deberse?
Gracias de antemano! Saludos!
jorge_rl02ParticipanteBuenas! No se la solución pero puede ser que algún plugin de cache como LiteSpeed/WPRocket/Imagify esté codificando las imágenes a base64. Nunca me paso pero buscaría por ese lado.
jorge_rl02ParticipanteMira el código en el header de tu web: el plugin Rocket Lazy Load esta usando el cifrado base64
class RocketLazyLoadScripts{constructor(){this.v=»1.2.3″,this.triggerEvents=[«keydown»,»mousedown»,»mousemove»,»touchmove»,»touchstart»,»touchend»,»wheel»],this.userEventHandler=this._triggerListener.bind(this),this.touchStartHandler=this._onTouchStart.bind(this),this.touchMoveHandler=this._onTouchMove.bind(this),this.touchEndHandler=this._onTouchEnd.bind(this),this.clickHandler=this._onClick.bind(this),this.interceptedClicks=[],window.addEventListener(«pageshow»,t=>{this.persisted=t.persisted}),window.addEventListener(«DOMContentLoaded»,()=>{this._preconnect3rdParties()}),this.delayedScripts={normal:[],async:[],defer:[]},this.trash=[],this.allJQueries=[]}_addUserInteractionListener(t){if(document.hidden){t._triggerListener();return}this.triggerEvents.forEach(e=>window.addEventListener(e,t.userEventHandler,{passive:!0})),window.addEventListener(«touchstart»,t.touchStartHandler,{passive:!0}),window.addEventListener(«mousedown»,t.touchStartHandler),document.addEventListener(«visibilitychange»,t.userEventHandler)}_removeUserInteractionListener(){this.triggerEvents.forEach(t=>window.removeEventListener(t,this.userEventHandler,{passive:!0})),document.removeEventListener(«visibilitychange»,this.userEventHandler)}_onTouchStart(t){«HTML»!==t.target.tagName&&(window.addEventListener(«touchend»,this.touchEndHandler),window.addEventListener(«mouseup»,this.touchEndHandler),window.addEventListener(«touchmove»,this.touchMoveHandler,{passive:!0}),window.addEventListener(«mousemove»,this.touchMoveHandler),t.target.addEventListener(«click»,this.clickHandler),this._renameDOMAttribute(t.target,»onclick»,»rocket-onclick»),this._pendingClickStarted())}_onTouchMove(t){window.removeEventListener(«touchend»,this.touchEndHandler),window.removeEventListener(«mouseup»,this.touchEndHandler),window.removeEventListener(«touchmove»,this.touchMoveHandler,{passive:!0}),window.removeEventListener(«mousemove»,this.touchMoveHandler),t.target.removeEventListener(«click»,this.clickHandler),this._renameDOMAttribute(t.target,»rocket-onclick»,»onclick»),this._pendingClickFinished()}_onTouchEnd(t){window.removeEventListener(«touchend»,this.touchEndHandler),window.removeEventListener(«mouseup»,this.touchEndHandler),window.removeEventListener(«touchmove»,this.touchMoveHandler,{passive:!0}),window.removeEventListener(«mousemove»,this.touchMoveHandler)}_onClick(t){t.target.removeEventListener(«click»,this.clickHandler),this._renameDOMAttribute(t.target,»rocket-onclick»,»onclick»),this.interceptedClicks.push(t),t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation(),this._pendingClickFinished()}_replayClicks(){window.removeEventListener(«touchstart»,this.touchStartHandler,{passive:!0}),window.removeEventListener(«mousedown»,this.touchStartHandler),this.interceptedClicks.forEach(t=>{t.target.dispatchEvent(new MouseEvent(«click»,{view:t.view,bubbles:!0,cancelable:!0}))})}_waitForPendingClicks(){return new Promise(t=>{this._isClickPending?this._pendingClickFinished=t:t()})}_pendingClickStarted(){this._isClickPending=!0}_pendingClickFinished(){this._isClickPending=!1}_renameDOMAttribute(t,e,r){t.hasAttribute&&t.hasAttribute(e)&&(event.target.setAttribute(r,event.target.getAttribute(e)),event.target.removeAttribute(e))}_triggerListener(){this._removeUserInteractionListener(this),»loading»===document.readyState?document.addEventListener(«DOMContentLoaded»,this._loadEverythingNow.bind(this)):this._loadEverythingNow()}_preconnect3rdParties(){let t=[];document.querySelectorAll(«script[type=rocketlazyloadscript]»).forEach(e=>{if(e.hasAttribute(«src»)){let r=new URL(e.src).origin;r!==location.origin&&t.push({src:r,crossOrigin:e.crossOrigin||»module»===e.getAttribute(«data-rocket-type»)})}}),t=[…new Map(t.map(t=>[JSON.stringify(t),t])).values()],this._batchInjectResourceHints(t,»preconnect»)}async _loadEverythingNow(){this.lastBreath=Date.now(),this._delayEventListeners(this),this._delayJQueryReady(this),this._handleDocumentWrite(),this._registerAllDelayedScripts(),this._preloadAllScripts(),await this._loadScriptsFromList(this.delayedScripts.normal),await this._loadScriptsFromList(this.delayedScripts.defer),await this._loadScriptsFromList(this.delayedScripts.async);try{await this._triggerDOMContentLoaded(),await this._triggerWindowLoad()}catch(t){console.error(t)}window.dispatchEvent(new Event(«rocket-allScriptsLoaded»)),this._waitForPendingClicks().then(()=>{this._replayClicks()}),this._emptyTrash()}_registerAllDelayedScripts(){document.querySelectorAll(«script[type=rocketlazyloadscript]»).forEach(t=>{t.hasAttribute(«data-rocket-src»)?t.hasAttribute(«async»)&&!1!==t.async?this.delayedScripts.async.push(t):t.hasAttribute(«defer»)&&!1!==t.defer||»module»===t.getAttribute(«data-rocket-type»)?this.delayedScripts.defer.push(t):this.delayedScripts.normal.push(t):this.delayedScripts.normal.push(t)})}async _transformScript(t){return new Promise((await this._littleBreath(),navigator.userAgent.indexOf(«Firefox/»)>0||»»===navigator.vendor)?e=>{let r=document.createElement(«script»);[…t.attributes].forEach(t=>{let e=t.nodeName;»type»!==e&&(«data-rocket-type»===e&&(e=»type»),»data-rocket-src»===e&&(e=»src»),r.setAttribute(e,t.nodeValue))}),t.text&&(r.text=t.text),r.hasAttribute(«src»)?(r.addEventListener(«load»,e),r.addEventListener(«error»,e)):(r.text=t.text,e());try{t.parentNode.replaceChild(r,t)}catch(i){e()}}:async e=>{function r(){t.setAttribute(«data-rocket-status»,»failed»),e()}try{let i=t.getAttribute(«data-rocket-type»),n=t.getAttribute(«data-rocket-src»);t.text,i?(t.type=i,t.removeAttribute(«data-rocket-type»)):t.removeAttribute(«type»),t.addEventListener(«load»,function r(){t.setAttribute(«data-rocket-status»,»executed»),e()}),t.addEventListener(«error»,r),n?(t.removeAttribute(«data-rocket-src»),t.src=n):t.src=»data:text/javascript;base64,»+window.btoa(unescape(encodeURIComponent(t.text)))}catch(s){r()}})}async _loadScriptsFromList(t){let e=t.shift();return e&&e.isConnected?(await this._transformScript(e),this._loadScriptsFromList(t)):Promise.resolve()}_preloadAllScripts(){this._batchInjectResourceHints([…this.delayedScripts.normal,…this.delayedScripts.defer,…this.delayedScripts.async],»preload»)}_batchInjectResourceHints(t,e){var r=document.createDocumentFragment();t.forEach(t=>{let i=t.getAttribute&&t.getAttribute(«data-rocket-src»)||t.src;if(i){let n=document.createElement(«link»);n.href=i,n.rel=e,»preconnect»!==e&&(n.as=»script»),t.getAttribute&&»module»===t.getAttribute(«data-rocket-type»)&&(n.crossOrigin=!0),t.crossOrigin&&(n.crossOrigin=t.crossOrigin),t.integrity&&(n.integrity=t.integrity),r.appendChild(n),this.trash.push(n)}}),document.head.appendChild(r)}_delayEventListeners(t){let e={};function r(t,r){!function t(r){!e[r]&&(e[r]={originalFunctions:{add:r.addEventListener,remove:r.removeEventListener},eventsToRewrite:[]},r.addEventListener=function(){arguments[0]=i(arguments[0]),e[r].originalFunctions.add.apply(r,arguments)},r.removeEventListener=function(){arguments[0]=i(arguments[0]),e[r].originalFunctions.remove.apply(r,arguments)});function i(t){return e[r].eventsToRewrite.indexOf(t)>=0?»rocket-«+t:t}}(t),e[t].eventsToRewrite.push(r)}function i(t,e){let r=t[e];Object.defineProperty(t,e,{get:()=>r||function(){},set(i){t[«rocket»+e]=r=i}})}r(document,»DOMContentLoaded»),r(window,»DOMContentLoaded»),r(window,»load»),r(window,»pageshow»),r(document,»readystatechange»),i(document,»onreadystatechange»),i(window,»onload»),i(window,»onpageshow»)}_delayJQueryReady(t){let e;function r(r){if(r&&r.fn&&!t.allJQueries.includes(r)){r.fn.ready=r.fn.init.prototype.ready=function(e){return t.domReadyFired?e.bind(document)(r):document.addEventListener(«rocket-DOMContentLoaded»,()=>e.bind(document)(r)),r([])};let i=r.fn.on;r.fn.on=r.fn.init.prototype.on=function(){if(this[0]===window){function t(t){return t.split(» «).map(t=>»load»===t||0===t.indexOf(«load.»)?»rocket-jquery-load»:t).join(» «)}»string»==typeof arguments[0]||arguments[0]instanceof String?arguments[0]=t(arguments[0]):»object»==typeof arguments[0]&&Object.keys(arguments[0]).forEach(e=>{let r=arguments[0][e];delete arguments[0][e],arguments[0][t(e)]=r})}return i.apply(this,arguments),this},t.allJQueries.push(r)}e=r}r(window.jQuery),Object.defineProperty(window,»jQuery»,{get:()=>e,set(t){r(t)}})}async _triggerDOMContentLoaded(){this.domReadyFired=!0,await this._littleBreath(),document.dispatchEvent(new Event(«rocket-DOMContentLoaded»)),await this._littleBreath(),window.dispatchEvent(new Event(«rocket-DOMContentLoaded»)),await this._littleBreath(),document.dispatchEvent(new Event(«rocket-readystatechange»)),await this._littleBreath(),document.rocketonreadystatechange&&document.rocketonreadystatechange()}async _triggerWindowLoad(){await this._littleBreath(),window.dispatchEvent(new Event(«rocket-load»)),await this._littleBreath(),window.rocketonload&&window.rocketonload(),await this._littleBreath(),this.allJQueries.forEach(t=>t(window).trigger(«rocket-jquery-load»)),await this._littleBreath();let t=new Event(«rocket-pageshow»);t.persisted=this.persisted,window.dispatchEvent(t),await this._littleBreath(),window.rocketonpageshow&&window.rocketonpageshow({persisted:this.persisted})}_handleDocumentWrite(){let t=new Map;document.write=document.writeln=function(e){let r=document.currentScript;r||console.error(«WPRocket unable to document.write this: «+e);let i=document.createRange(),n=r.parentElement,s=t.get(r);void 0===s&&(s=r.nextSibling,t.set(r,s));let a=document.createDocumentFragment();i.setStart(a,0),a.appendChild(i.createContextualFragment(e)),n.insertBefore(a,s)}}async _littleBreath(){Date.now()-this.lastBreath>45&&(await this._requestAnimFrame(),this.lastBreath=Date.now())}async _requestAnimFrame(){return document.hidden?new Promise(t=>setTimeout(t)):new Promise(t=>requestAnimationFrame(t))}_emptyTrash(){this.trash.forEach(t=>t.remove())}static run(){let t=new RocketLazyLoadScripts;t._addUserInteractionListener(t)}}RocketLazyLoadScripts.run();
Sí, utilizo WP Rocket y utilizo el delay en los scripts para mejorar el rendimiento. Probaré a desactivar el plugin y veré si es este el causante. Luego, habrá que ver qué configuración exacta es la que genera estos enlaces en las imágenes.
Gracias Jorge!
-
AutorEntradas
- Debes estar registrado para responder a este debate.