{"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\/fr\/dev\/carga-previa-de-imagenes-receptivas\/","title":{"rendered":"Pr\u00e9chargement d&#039;image r\u00e9actif"},"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\">Table des mati\u00e8res<\/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=\"Basculer la table des mati\u00e8res\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Basculer<\/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\/fr\/dev\/carga-previa-de-imagenes-receptivas\/#Descripcion-general-de-imagenes-receptivas\" >Pr\u00e9sentation de l&#039;imagerie r\u00e9active<\/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\/fr\/dev\/carga-previa-de-imagenes-receptivas\/#Descripcion-general-de-la-precarga\" >Aper\u00e7u de la pr\u00e9charge<\/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\/fr\/dev\/carga-previa-de-imagenes-receptivas\/#Imagenes-receptivas-precarga-cargas-de-imagenes-mas-rapidas\" >Images r\u00e9actives + pr\u00e9chargement = t\u00e9l\u00e9chargements d&#039;images plus rapides<\/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\/fr\/dev\/carga-previa-de-imagenes-receptivas\/#imagesrcset-y-imagesizes\" >imagesrcset  y 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\/fr\/dev\/carga-previa-de-imagenes-receptivas\/#Casos-de-uso\" >Cas d&#039;utilisation<\/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\/fr\/dev\/carga-previa-de-imagenes-receptivas\/#Carga-previa-de-imagenes-receptivas-inyectadas-dinamicamente\" >Pr\u00e9charge d&#039;image r\u00e9active inject\u00e9e dynamiquement<\/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\/fr\/dev\/carga-previa-de-imagenes-receptivas\/#Carga-previa-de-imagenes-de-fondo-con-conjunto-de-imagenes\" >Pr\u00e9chargement des images d&#039;arri\u00e8re-plan avec un jeu d&#039;images<\/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\/fr\/dev\/carga-previa-de-imagenes-receptivas\/#Carga-previa-de-imagenes-receptivas-en-accion\" >Pr\u00e9chargement d&#039;images r\u00e9actif en 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\/fr\/dev\/carga-previa-de-imagenes-receptivas\/#Precarga-y\" >Pr\u00e9charge et<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\/fr\/dev\/carga-previa-de-imagenes-receptivas\/#Resumen\" >r\u00e9sum\u00e9<\/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>30 sept. 2019<\/time><\/p>\n<\/header>\n<p>Este post me da la posibilidad de discutir dos de mis cosas favoritas: im\u00e1genes receptivas. <em>y<\/em> precarga.  Como alguien que estuvo muy involucrado en el desarrollo de ambas funciones, \u00a1estoy muy emocionado de verlos trabajar juntos!<\/p>\n<h2 id=\"responsive-images-overview\"><span class=\"ez-toc-section\" id=\"Descripcion-general-de-imagenes-receptivas\"><\/span>Pr\u00e9sentation de l&#039;imagerie r\u00e9active <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>petit<\/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> atributo.  los <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>Aper\u00e7u de la pr\u00e9charge <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>relier<\/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>pr\u00e9charge<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">as<\/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>Images r\u00e9actives + pr\u00e9chargement = t\u00e9l\u00e9chargements d&#039;images plus rapides <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\">\u00c0 partir de Chrome 73<\/a>, le navigateur peut pr\u00e9charger la bonne variante des images responsives sp\u00e9cifi\u00e9es dans <code>srcset<\/code> avant de d\u00e9couvrir le <code>img<\/code> hashtag!<\/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>  y <code>taille d&#039;image<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Pour pr\u00e9charger les images responsives, de nouveaux attributs ont \u00e9t\u00e9 r\u00e9cemment ajout\u00e9s \u00e0 la <code>&lt;enlace&gt;<\/code> \u00e9l\u00e9ment: <code>imagesrcset<\/code> y <code>taille d&#039;image<\/code>.  Se usan con <code>&lt;enlace rel=\"preload\"&gt;<\/code> et correspond au <code>srcset<\/code> y <code>les tailles<\/code> syntaxe utilis\u00e9e dans <code>&lt;img&gt;<\/code> \u00e9l\u00e9ment.<\/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\">les tailles<\/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>Vous pouvez le faire en ajoutant ce qui suit \u00e0 votre 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>relier<\/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>pr\u00e9charge<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">as<\/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\">taille d&#039;image<\/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> y <code>les tailles<\/code> s&#039;appliquera.<\/p>\n<h2 id=\"use-cases\"><span class=\"ez-toc-section\" id=\"Casos-de-uso\"><\/span>Cas d&#039;utilisation <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>Pr\u00e9charge d&#039;image r\u00e9active inject\u00e9e dynamiquement <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>Ouvert <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/responsive-preload.glitch.me\/no_preload.html\">este portal web de ejemplo<\/a> dans un nouvel onglet.<\/p>\n<\/li>\n<li>\n<p>presse <code>Ctrl + Maj + J<\/code> (ou alors <code>Commande + Option + J<\/code> sur Mac) pour ouvrir DevTools.<\/p>\n<\/li>\n<li>\n<p>Clique sur le <strong>Rapporter<\/strong> langue.<\/p>\n<\/li>\n<li>\n<p>Dans le <strong>Constriction<\/strong> liste d\u00e9roulante, s\u00e9lectionnez <strong>3G rapide<\/strong>.<\/p>\n<\/li>\n<li>\n<p>Deshabilita el <strong>D\u00e9sactiver le cache<\/strong> bo\u00eete.<\/p>\n<\/li>\n<li>\n<p>Recharge la page.<\/p>\n<\/li>\n<\/ol>\n<figure class=\"w-figure\">\n<img alt='exemple-1-avant-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>Utilisant <code>pr\u00e9charge<\/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='exemple-1-apr\u00e8s-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>Pour voir la diff\u00e9rence que fait le pr\u00e9chargement, vous pouvez inspecter la m\u00eame galerie d&#039;images charg\u00e9e dynamiquement mais <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/responsive-preload.glitch.me\/preload.html\">avec la premi\u00e8re image pr\u00e9charg\u00e9e<\/a> en suivant les \u00e9tapes du premier exemple.<\/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\/\">pr\u00e9chargeur de navigateur<\/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>Pr\u00e9chargement des images d&#039;arri\u00e8re-plan avec un jeu d&#039;images <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Si vous avez des images d&#039;arri\u00e8re-plan diff\u00e9rentes pour diff\u00e9rentes densit\u00e9s d&#039;\u00e9cran, vous pouvez les sp\u00e9cifier dans votre CSS avec le <code>s\u00e9rie d&#039;images<\/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\">s\u00e9rie d&#039;images<\/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>, qui peut \u00eatre beaucoup de 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\">image de fond r\u00e9active<\/a>.<\/p>\n<figure class=\"w-figure\">\n<img alt='exemple-2-avant-6150023' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/example-2-before-6150023.png'><figcaption class=\"w-figcaption\">Dans cet exemple, le t\u00e9l\u00e9chargement de l&#039;image ne commence pas tant que le CSS n&#039;est pas compl\u00e8tement t\u00e9l\u00e9charg\u00e9, ce qui entra\u00eene un retard inutile dans l&#039;affichage de l&#039;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>relier<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span>pr\u00e9charge<\/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\">as<\/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>Vous pouvez inspecter le comportement de l&#039;exemple ci-dessus avec <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/responsive-preload.glitch.me\/background_preload.html\">Image d&#039;arri\u00e8re-plan personnalisable pr\u00e9charg\u00e9e<\/a>.<\/p>\n<figure class=\"w-figure\">\n<img alt='exemple-2-apr\u00e8s-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>Pr\u00e9chargement d&#039;images r\u00e9actif en action <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Le pr\u00e9chargement de vos images responsives peut les acc\u00e9l\u00e9rer en th\u00e9orie, mais que faites-vous en pratique?<\/p>\n<p>Pour r\u00e9pondre, j&#039;ai cr\u00e9\u00e9 deux copies d&#039;un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChromeLabs\/sample-pie-shop\">Boutique de d\u00e9monstration PWA<\/a>: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/20190710t144416-dot-pie-shop-app.appspot.com\/apparel\">celui qui ne pr\u00e9charge pas les images<\/a>y <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/20190710t132936-dot-pie-shop-app.appspot.com\/apparel\">celui qui pr\u00e9charge certains d&#039;entre eux<\/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>Cela m&#039;a donn\u00e9 les r\u00e9sultats suivants pour <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.webpagetest.org\/result\/190710_VM_30b9d4c993a1e60befba17e1261ba1ca\/\">pas de pr\u00e9charge<\/a> et pour <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.webpagetest.org\/result\/190710_7B_a99e792121760f81a270b4b9c847797b\/\">pr\u00e9charge d&#039;image<\/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\">Dernier h\u00e9ros peint<\/a> m\u00e9trica, que mejor\u00f3 en 1,2 segundos.  \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='exemple-3-3734804' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/example-3-3734804.png'><figcaption class=\"w-figcaption\">La pellicule montre que les images arrivent beaucoup plus rapidement lorsqu&#039;elles sont pr\u00e9charg\u00e9es, ce qui se traduit par une exp\u00e9rience utilisateur consid\u00e9rablement am\u00e9lior\u00e9e.<\/figcaption><\/figure>\n<h2 id=\"preload-and-lesspicturegreater\"><span class=\"ez-toc-section\" id=\"Precarga-y\"><\/span>Pr\u00e9charge et <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> y <code>les tailles<\/code>, mais pas le <code><picture><\/code> \u00e9l\u00e9ment, qui r\u00e9pond au cas d&#039;utilisation de la &quot;direction artistique&quot;.<\/p>\n<p>Pourquoi ce cas d&#039;utilisation est-il &quot;n\u00e9glig\u00e9&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>photo<\/code> le soutien se fait sentir.<\/p>\n<p>Si vous \u00eates en condition de pr\u00e9-charge <code><picture><\/code> es viable que pueda usar la pr\u00f3xima t\u00e9cnica como soluci\u00f3n.<\/p>\n<p>Compte tenu du sc\u00e9nario suivant:<\/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>photo<\/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\">moiti\u00e9<\/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\">moiti\u00e9<\/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>photo<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Les <code><picture><\/code> La logique de l&#039;\u00e9l\u00e9ment (ou logique de s\u00e9lection de la source d&#039;image, pour \u00eatre pr\u00e9cis), serait de passer en revue la <code>moiti\u00e9<\/code> attributs de la <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>relier<\/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>pr\u00e9charge<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\">as<\/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\">moiti\u00e9<\/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>relier<\/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>pr\u00e9charge<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\">as<\/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\">moiti\u00e9<\/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>relier<\/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>pr\u00e9charge<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\">as<\/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\">moiti\u00e9<\/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>r\u00e9sum\u00e9 <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\/fr\/dev\/carga-previa-de-imagenes-receptivas\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\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\/fr\/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\":\"fr-FR\"},{\"@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\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/carga-previa-de-imagenes-receptivas\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@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\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@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":"Carga previa de im\u00e1genes receptivas - 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\/fr\/dev\/carga-previa-de-imagenes-receptivas\/","og_locale":"fr_FR","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\/fr\/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":"fr-FR"},{"@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":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/carga-previa-de-imagenes-receptivas\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@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":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","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":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@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\/fr\/wp-json\/wp\/v2\/posts\/83347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=83347"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83347\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/83348"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=83347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=83347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=83347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}