{"id":83347,"date":"2022-10-09T00:58:46","date_gmt":"2022-10-08T22:58:46","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/carga-previa-de-imagenes-receptivas\/"},"modified":"2021-07-06T10:03:26","modified_gmt":"2021-07-06T08:03:26","slug":"carga-previa-de-imagenes-receptivas","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/carga-previa-de-imagenes-receptivas\/","title":{"rendered":"Responsive Image Preload"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-previa-de-imagenes-receptivas\/#Descripcion-general-de-imagenes-receptivas\" >Responsive Imaging Overview<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-previa-de-imagenes-receptivas\/#Descripcion-general-de-la-precarga\" >Preload overview<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-previa-de-imagenes-receptivas\/#Imagenes-receptivas-precarga-cargas-de-imagenes-mas-rapidas\" >Responsive images + preloading = faster image uploads<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-previa-de-imagenes-receptivas\/#imagesrcset-y-imagesizes\" >imagesrcset and imagesizes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-previa-de-imagenes-receptivas\/#Casos-de-uso\" >Use cases<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-previa-de-imagenes-receptivas\/#Carga-previa-de-imagenes-receptivas-inyectadas-dinamicamente\" >Dynamically Injected Responsive Image Preload<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-previa-de-imagenes-receptivas\/#Carga-previa-de-imagenes-de-fondo-con-conjunto-de-imagenes\" >Preloading Background Images with Image Set<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-previa-de-imagenes-receptivas\/#Carga-previa-de-imagenes-receptivas-en-accion\" >Responsive image preloading in action<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-previa-de-imagenes-receptivas\/#Precarga-y\" >Preload and<picture> ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-previa-de-imagenes-receptivas\/#Resumen\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          A partir de Chrome 73, el link rel = \u00abpreload\u00bb y las im\u00e1genes receptivas se pueden combinar para cargar im\u00e1genes m\u00e1s r\u00e1pido.\n        <\/p>\n<p>\n          <time>Sep 30, 2019<\/time><\/p>\n<\/header>\n<p>Este post me da la posibilidad de discutir dos de mis cosas favoritas: im\u00e1genes receptivas. <em>and<\/em> preload. As someone who was very involved in the development of both features, I am so excited to see them work together!<\/p>\n<h2 id=\"responsive-images-overview\"><span class=\"ez-toc-section\" id=\"Descripcion-general-de-imagenes-receptivas\"><\/span>Responsive Imaging Overview <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Suponga que est\u00e1 navegando por la web en una pantalla de 300 p\u00edxeles de ancho y la p\u00e1gina solicita una imagen de 1500 p\u00edxeles de ancho.  Esa p\u00e1gina b\u00e1sicamente desperdici\u00f3 muchos de sus datos celulares debido a que su pantalla no puede hacer nada con toda esa resoluci\u00f3n adicional.  Idealmente, el navegador deber\u00eda conseguir una versi\u00f3n de la imagen que sea solo una <em>little<\/em> m\u00e1s ancho que el tama\u00f1o de su pantalla, digamos 325 p\u00edxeles.  Esto asegura una imagen de alta resoluci\u00f3n sin desperdiciar datos.  Y, lo que es mejor, la imagen se cargar\u00e1 m\u00e1s r\u00e1pido.  Las im\u00e1genes receptivas posibilitan a los navegadores buscar diferentes recursos de im\u00e1genes en diferentes dispositivos.  Si no usa una CDN de imagen, debe guardar varias dimensiones para cada imagen y especificarlas en el <code>srcset<\/code> attribute. the <code>w<\/code> value le dice al navegador el ancho de cada versi\u00f3n.  Seg\u00fan el dispositivo, el navegador puede optar el adecuado:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>small.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">srcset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>small.jpg 500w, medium.jpg 1000w, large.jpg 1500w<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\u2026<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"preload-overview\"><span class=\"ez-toc-section\" id=\"Descripcion-general-de-la-precarga\"><\/span>Preload overview <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La precarga le posibilita informar al navegador sobre los recursos cr\u00edticos que desea cargar lo antes viable, antes de que se detecten en HTML.  Esto es sobre todo \u00fatil para recursos que no se pueden descubrir f\u00e1cilmente, como fuentes incluidas en hojas de estilo, im\u00e1genes de fondo o recursos cargados desde un script.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">ace<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>image<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>important.png<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"responsive-images-+-preload-faster-image-loads\"><span class=\"ez-toc-section\" id=\"Imagenes-receptivas-precarga-cargas-de-imagenes-mas-rapidas\"><\/span>Responsive images + preloading = faster image uploads <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Las im\u00e1genes receptivas y la precarga han estado disponibles durante los \u00faltimos a\u00f1os, pero a la vez faltaba algo: no hab\u00eda forma de precargar im\u00e1genes receptivas. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2019\/03\/nic73#more\">Starting in Chrome 73<\/a>, the browser can preload the correct variant of responsive images specified in <code>srcset<\/code> before i discover the <code>img<\/code> label!<\/p>\n<p>Dependiendo de la estructura de su sitio, \u00a1eso podr\u00eda significar una visualizaci\u00f3n de im\u00e1genes significativamente m\u00e1s r\u00e1pida!  Realizamos pruebas en un sitio que usa Javascript para cargar im\u00e1genes adaptables de forma diferida.  La precarga dio como consecuencia que las im\u00e1genes se cargaran 1,2 segundos m\u00e1s r\u00e1pido.<\/p>\n<h2 id=\"imagesrcset-and-imagesizes\"><span class=\"ez-toc-section\" id=\"imagesrcset-y-imagesizes\"><\/span><code>imagesrcset<\/code>  and <code>imagesizes<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To preload responsive images, new attributes were recently added to the <code>&lt;enlace&gt;<\/code> element: <code>imagesrcset<\/code> and <code>imagesizes<\/code>.  Se usan con <code><\/code> and matches the <code>srcset<\/code> and <code>sizes<\/code> syntax used in <code>&lt;img&gt;<\/code> element.<\/p>\n<p>A modo de ejemplo, si desea precargar una imagen receptiva especificada con:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>wolf.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">srcset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">sizes<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>50vw<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>A rad wolf<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>You can do it by adding the following to your HTML <code><\/code>:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">ace<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>image<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>wolf.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">imagesrcset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">imagesizes<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>50vw<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Esto inicia una solicitud usando la misma l\u00f3gica de selecci\u00f3n de recursos que <code>srcset<\/code> and <code>sizes<\/code> will apply.<\/p>\n<h2 id=\"use-cases\"><span class=\"ez-toc-section\" id=\"Casos-de-uso\"><\/span>Use cases <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"preloading-dynamically-injected-responsive-images\"><span class=\"ez-toc-section\" id=\"Carga-previa-de-imagenes-receptivas-inyectadas-dinamicamente\"><\/span>Dynamically Injected Responsive Image Preload <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Supongamos que est\u00e1 cargando din\u00e1micamente im\u00e1genes heroicas como parte de una presentaci\u00f3n de diapositivas y sabe qu\u00e9 imagen se mostrar\u00e1 primero.  En ese caso, probablemente desee evitar esperar el script antes de cargar la imagen en cuesti\u00f3n, puesto que eso retrasar\u00eda cuando los usuarios puedan verla.<\/p>\n<p>Puede inspeccionar este problema en un portal web con una galer\u00eda de im\u00e1genes cargada din\u00e1micamente:<\/p>\n<ol>\n<li>\n<p>Opened <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/responsive-preload.glitch.me\/no_preload.html\">este portal web de ejemplo<\/a> in a new tab.<\/p>\n<\/li>\n<li>\n<p>press <code>Control + Shift + J<\/code> (or <code>Command + Option + J<\/code> on Mac) to open DevTools.<\/p>\n<\/li>\n<li>\n<p>Click on the <strong>Net<\/strong> tongue.<\/p>\n<\/li>\n<li>\n<p>At <strong>Constriction<\/strong> drop down list, select <strong>Fast 3G<\/strong>.<\/p>\n<\/li>\n<li>\n<p>Deshabilita el <strong>Disable cache<\/strong> box.<\/p>\n<\/li>\n<li>\n<p>Reload the page.<\/p>\n<\/li>\n<\/ol>\n<figure class=\"w-figure\">\n<img alt='example-1-before-6341790' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/example-1-before-6341790.png'><figcaption class=\"w-figcaption\">Esta cascada muestra que las im\u00e1genes solo comienzan a cargarse luego de que el navegador haya finalizado de ejecutar el script, lo que introduce un retraso innecesario en el momento en que la imagen se muestra inicialmente al usuario.<\/figcaption><\/figure>\n<p>Using <code>preload<\/code> ayuda aqu\u00ed debido a que la imagen empieza a cargarse antes de tiempo y es probable que ya est\u00e9 all\u00ed cuando el navegador necesite mostrarla.<\/p>\n<figure class=\"w-figure\">\n<img alt='example-1-after-5070924' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/example-1-after-5070924.png'><figcaption class=\"w-figcaption\">Esta cascada muestra que la primera imagen comenz\u00f3 a cargarse a la vez que el script, evitando demoras innecesarias y dando como consecuencia una visualizaci\u00f3n m\u00e1s r\u00e1pida de las im\u00e1genes.<\/figcaption><\/figure>\n<p>To see the difference preloading makes, you can inspect the same dynamically loaded image gallery but <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/responsive-preload.glitch.me\/preload.html\">with the first image preloaded<\/a> following the steps in the first example.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Una forma alternativa de evitar el problema ser\u00eda usar un carrusel basado en marcas y tener la <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/hacks.mozilla.org\/2017\/09\/building-the-dom-faster-speculative-parsing-async-defer-and-preload\/\">browser preloader<\/a> recoger los recursos necesarios.  A pesar de todo, este enfoque puede no ser siempre pr\u00e1ctico.  (A modo de ejemplo, si est\u00e1 reutilizando un componente existente, que no est\u00e1 basado en marcas).<\/p>\n<\/div>\n<h3 id=\"preloading-background-images-using-image-set\"><span class=\"ez-toc-section\" id=\"Carga-previa-de-imagenes-de-fondo-con-conjunto-de-imagenes\"><\/span>Preloading Background Images with Image Set <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If you have different background images for different screen densities, you can specify them in your CSS with the <code>image-set<\/code> sintaxis.  A continuaci\u00f3n, el navegador puede optar cu\u00e1l mostrar en funci\u00f3n de la <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/devicePixelRatio\">DPR<\/a>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token property\">background-image<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">image-set<\/span><span class=\"token punctuation\">(<\/span> <span class=\"token string\">\"cat.png\"<\/span> 1x<span class=\"token punctuation\">,<\/span> <span class=\"token string\">\"cat-2x.png\"<\/span> 2x<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<div class=\"w-aside w-aside--note\">\n<p>La sintaxis anterior ignora el hecho de que se necesitan prefijos de proveedor para esta funci\u00f3n en los navegadores basados \u200b\u200ben Chromium y WebKit.  Si planea utilizar esta funci\u00f3n, deber\u00eda considerar utilizar <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/postcss\/autoprefixer\">Autoprefixer<\/a> para abordar eso de forma autom\u00e1tica.<\/p>\n<\/div>\n<p>El problema con las im\u00e1genes de fondo CSS es que el navegador las descubre solo luego de haber descargado y procesado todo el CSS de la p\u00e1gina. <code><\/code>, which can be a lot of CSS ...<\/p>\n<p>Puede inspeccionar este problema en un portal web de ejemplo con <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/responsive-preload.glitch.me\/background_no_preload.html\">responsive background image<\/a>.<\/p>\n<figure class=\"w-figure\">\n<img alt='example-2-before-6150023' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/example-2-before-6150023.png'><figcaption class=\"w-figcaption\">In this example, the image download does not begin until the CSS is completely downloaded, causing unnecessary delay in displaying the image.<\/figcaption><\/figure>\n<p>La precarga de im\u00e1genes receptiva proporciona una forma sencilla y sin pirater\u00eda de cargar esas im\u00e1genes m\u00e1s r\u00e1pido.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>preload<\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>cat.png<\/span> <span class=\"token attr-name\">ace<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>image<\/span> <span class=\"token attr-name\">imagesrcset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>cat.png 1x, cat-2x.png 2x<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>You can inspect how the above example behaves with <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/responsive-preload.glitch.me\/background_preload.html\">Preloaded customizable background image<\/a>.<\/p>\n<figure class=\"w-figure\">\n<img alt='example-2-after-6171228' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/example-2-after-6171228.png'><figcaption class=\"w-figcaption\">Aqu\u00ed la imagen y el CSS comienzan a descargarse a la vez, evitando retrasos y dando como consecuencia una imagen de carga m\u00e1s r\u00e1pida.<\/figcaption><\/figure>\n<h2 id=\"preloading-responsive-images-in-action\"><span class=\"ez-toc-section\" id=\"Carga-previa-de-imagenes-receptivas-en-accion\"><\/span>Responsive image preloading in action <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Preloading your responsive images can speed them up in theory, but what do you do in practice?<\/p>\n<p>To answer that I created two copies of a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChromeLabs\/sample-pie-shop\">PWA demo shop<\/a>: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/20190710t144416-dot-pie-shop-app.appspot.com\/apparel\">one that doesn&#039;t preload images<\/a>and <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/20190710t132936-dot-pie-shop-app.appspot.com\/apparel\">one that preloads some of them<\/a>.  Puesto que el sitio carga im\u00e1genes de forma diferida con JavaScript, es probable que se beneficie de la precarga de las que estar\u00e1n en la ventana gr\u00e1fica inicial.<\/p>\n<p>That gave me the following results for <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.webpagetest.org\/result\/190710_VM_30b9d4c993a1e60befba17e1261ba1ca\/\">no preload<\/a> and to <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.webpagetest.org\/result\/190710_7B_a99e792121760f81a270b4b9c847797b\/\">image preload<\/a>.  Mirando los n\u00fameros sin procesar, vemos que Iniciar renderizado se mantuvo igual, el \u00edndice de velocidad mejor\u00f3 ligeramente (273 ms, puesto que las im\u00e1genes llegan m\u00e1s r\u00e1pido, pero no ocupan una gran parte del \u00e1rea de p\u00edxeles), pero la m\u00e9trica real que captura la diferencia es la <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/WPO-Foundation\/webpagetest\/blob\/master\/docs\/Metrics\/HeroElements.md\">Last painted hero<\/a> metric, which improved by 1.2 seconds. \ud83c\udf89\ud83c\udf89<\/p>\n<p>Decididamente, nada captura la diferencia visual como una comparaci\u00f3n de tira de pel\u00edcula:<\/p>\n<figure class=\"w-figure\">\n<img alt='example-3-3734804' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/example-3-3734804.png'><figcaption class=\"w-figcaption\">The filmstrip shows that images arrive significantly faster when preloaded, resulting in a vastly improved user experience.<\/figcaption><\/figure>\n<h2 id=\"preload-and-lesspicturegreater\"><span class=\"ez-toc-section\" id=\"Precarga-y\"><\/span>Preload and <code><picture><\/code>? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Si est\u00e1 familiarizado con las im\u00e1genes receptivas, es viable que se pregunte \u00ab\u00bfQu\u00e9 pasa con <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/picture\"><code><picture><\/code><\/a>? \u00ab.<\/p>\n<p>El Web Performance Working Group est\u00e1 hablando de agregar un id\u00e9ntico de precarga para <code>srcset<\/code> and <code>sizes<\/code>, but not the <code><picture><\/code> element, which addresses the &quot;art direction&quot; use case.<\/p>\n<p>Why is this use case &quot;neglected&quot;?<\/p>\n<p>Aunque adem\u00e1s hay inter\u00e9s en solucionar ese caso de uso, a\u00fan hay una serie de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/calendar.perfplanet.com\/2018\/how-the-sausage-is-made-webperfwg-meeting-summary\/\">problemas t\u00e9cnicos para solucionar<\/a> lo que significa que una soluci\u00f3n aqu\u00ed tendr\u00eda una complejidad significativa.  Al mismo tiempo de eso, parece que en su mayor parte, el caso de uso se puede abordar hoy, inclusive si de una manera hacky (ver m\u00e1s abajo).<\/p>\n<p>Dado eso, Web Performance WG ha decidido enviar <code>srcset<\/code> primero y ver si la demanda de id\u00e9ntico <code>picture<\/code> support arises.<\/p>\n<p>If you are in pre-charge condition <code><picture><\/code> es viable que pueda usar la pr\u00f3xima t\u00e9cnica como soluci\u00f3n.<\/p>\n<p>Given the following scenario:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>picture<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>source<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>small_cat.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">half<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>(max-width: 400px)<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>source<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>medium_cat.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">half<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>(max-width: 800px)<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>huge_cat.jpg<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>picture<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>the <code><picture><\/code> Element logic (or image source selection logic, to be precise), would be to go over the <code>half<\/code> attributes of the <code><source><\/code> \u00edtems en orden, busque el primero que coincida y utilice el recurso adjunto.<\/p>\n<p>Porque la precarga receptiva no tiene la noci\u00f3n de \u00aborden\u00bb o \u00abprimera coincidencia\u00bb, los puntos de interrupci\u00f3n deben traducirse en algo como:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>small_cat.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">ace<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>image<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">half<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>(max-width: 400px)<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>medium_cat.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">ace<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>image<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">half<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>(min-width: 400.1px) and (max-width: 800px)<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>large_cat.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">ace<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>image<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">half<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>(min-width: 800.1px)<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"summary\"><span class=\"ez-toc-section\" id=\"Resumen\"><\/span>Summary <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La precarga de im\u00e1genes receptivas nos brinda oportunidades nuevas y emocionantes para precargar im\u00e1genes receptivas de formas que antes solo eran posibles a trav\u00e9s de hacks.  Es una nueva adici\u00f3n importante a la caja de herramientas del desarrollador consciente de la velocidad y nos posibilita asegurarnos de que las im\u00e1genes importantes que anhelamos mostrar a nuestros usuarios lo antes viable estar\u00e1n all\u00ed cuando las necesitemos.<\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>A partir de Chrome 73, el link rel = \u00abpreload\u00bb y las im\u00e1genes receptivas se pueden combinar para cargar im\u00e1genes m\u00e1s r\u00e1pido. 30 de septiembre de 2019 Este post me&#8230;<\/p>","protected":false},"author":1,"featured_media":83348,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83347","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Carga previa de im\u00e1genes receptivas - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"A partir de Chrome 73, el link rel = &quot;preload&quot; y las im\u00e1genes receptivas se pueden combinar para cargar im\u00e1genes m\u00e1s r\u00e1pido. 30 de septiembre de 2019 Este\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-previa-de-imagenes-receptivas\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Carga previa de im\u00e1genes receptivas\" \/>\n<meta property=\"og:description\" content=\"A partir de Chrome 73, el link rel = &quot;preload&quot; y las im\u00e1genes receptivas se pueden combinar para cargar im\u00e1genes m\u00e1s r\u00e1pido. 30 de septiembre de 2019 Este\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/carga-previa-de-imagenes-receptivas\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-08T22:58:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9015084.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-previa-de-imagenes-receptivas\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-previa-de-imagenes-receptivas\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Carga previa de im\u00e1genes receptivas\",\"datePublished\":\"2022-10-08T22:58:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-previa-de-imagenes-receptivas\\\/\"},\"wordCount\":1545,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-previa-de-imagenes-receptivas\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-9015084.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-previa-de-imagenes-receptivas\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-previa-de-imagenes-receptivas\\\/\",\"name\":\"Carga previa de im\u00e1genes receptivas - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-previa-de-imagenes-receptivas\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-previa-de-imagenes-receptivas\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-9015084.jpg\",\"datePublished\":\"2022-10-08T22:58:46+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"A partir de Chrome 73, el link rel = \\\"preload\\\" y las im\u00e1genes receptivas se pueden combinar para cargar im\u00e1genes m\u00e1s r\u00e1pido. 30 de septiembre de 2019 Este\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-previa-de-imagenes-receptivas\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-previa-de-imagenes-receptivas\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-9015084.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-9015084.jpg\",\"width\":1200,\"height\":800,\"caption\":\"hero-9015084-4841632-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Responsive Image Preload - R Marketing Digital","description":"A partir de Chrome 73, el link rel = \"preload\" y las im\u00e1genes receptivas se pueden combinar para cargar im\u00e1genes m\u00e1s r\u00e1pido. 30 de septiembre de 2019 Este","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/en\/dev\/carga-previa-de-imagenes-receptivas\/","og_locale":"en_US","og_type":"article","og_title":"Carga previa de im\u00e1genes receptivas","og_description":"A partir de Chrome 73, el link rel = \"preload\" y las im\u00e1genes receptivas se pueden combinar para cargar im\u00e1genes m\u00e1s r\u00e1pido. 30 de septiembre de 2019 Este","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/carga-previa-de-imagenes-receptivas\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-08T22:58:46+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9015084.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/carga-previa-de-imagenes-receptivas\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/carga-previa-de-imagenes-receptivas\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Carga previa de im\u00e1genes receptivas","datePublished":"2022-10-08T22:58:46+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/carga-previa-de-imagenes-receptivas\/"},"wordCount":1545,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/carga-previa-de-imagenes-receptivas\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9015084.jpg","articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/carga-previa-de-imagenes-receptivas\/","url":"https:\/\/rmarketingdigital.com\/dev\/carga-previa-de-imagenes-receptivas\/","name":"Responsive Image Preload - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/carga-previa-de-imagenes-receptivas\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/carga-previa-de-imagenes-receptivas\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9015084.jpg","datePublished":"2022-10-08T22:58:46+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"A partir de Chrome 73, el link rel = \"preload\" y las im\u00e1genes receptivas se pueden combinar para cargar im\u00e1genes m\u00e1s r\u00e1pido. 30 de septiembre de 2019 Este","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/carga-previa-de-imagenes-receptivas\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/dev\/carga-previa-de-imagenes-receptivas\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9015084.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9015084.jpg","width":1200,"height":800,"caption":"hero-9015084-4841632-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/83347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=83347"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/83347\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/83348"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=83347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=83347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=83347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}