{"id":5610,"date":"2016-07-26T17:19:18","date_gmt":"2016-07-26T16:19:18","guid":{"rendered":"http:\/\/www.espai.es\/blog\/?p=5610"},"modified":"2021-09-13T19:45:19","modified_gmt":"2021-09-13T17:45:19","slug":"imagenes-responsive","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/","title":{"rendered":"Imagenes responsive en HTML5"},"content":{"rendered":"

Hola a todos y saludos desde el \u00e1rea Web de la Escola Espai<\/a>. En el art\u00edculo de hoy, veremos c\u00f3mo implementar correctamente im\u00e1genes responsive usando el nuevo elemento HTML5 <picture><\/strong> y los atributos srcset<\/strong> y sizes<\/strong> del elemento <img><\/strong>.<\/p>\n

El problema de usar una \u00fanica resoluci\u00f3n en im\u00e1genes responsive<\/h2>\n

La forma m\u00e1s c\u00f3moda y sencilla de emplear im\u00e1genes grandes en dise\u00f1os responsive<\/strong>, ha\u00a0consistido tradicionalmente en el uso de c\u00f3digo CSS<\/strong> como el siguiente;<\/p>\n

img {\r\n  display: block;\r\n  margin: 0 auto;\r\n  max-width: 100%;\r\n  width: 80%;\r\n}<\/pre>\n
Con un c\u00f3digo como ese, lo que logramos es que las im\u00e1genes responsive se adapten a su contenedor (en este caso ocupar\u00e1 como m\u00e1ximo un 80% del ancho disponible y estar\u00e1 centrada), que se hagan m\u00e1s peque\u00f1as si es necesario y que no crezcan\u00a0por encima de su tama\u00f1o original para evitar que acaben pixeladas.<\/p>\n
Sin embargo, con la proliferaci\u00f3n de pantallas de alta densidad de pixels (pantallas retina, 4k…), nos encontramos con el problema que si queremos mostrar una imagen con mucho detalle en dispositivos con alta densidad de pixels y la misma imagen en un m\u00f3vil con baja resoluci\u00f3n, no queda m\u00e1s remedio que emplear im\u00e1genes con diferentes resoluciones. De lo contrario, la soluci\u00f3n anteriormente mencionada no es muy recomendable, ya que, o bien enviamos una imagen absurdamente grande al m\u00f3vil (con la lentitud y la consecuente mala experiencia de usuario que implica), o bien enviamos una imagen con insuficiente calidad a un dispositivo con una pantalla capaz de mostrar mucho detalle.<\/p>\n
Otro posible problema es que, por motivos art\u00edsticos (art direction), en un dispositivo con pantalla panor\u00e1mica queramos un imagen igualmente panor\u00e1mica,\u00a0mientras que en un m\u00f3vil\u00a0en modo retrato queramos mostrar solo parte de dicha imagen o, incluso, una imagen totalmente diferente.<\/p>\n
\"Im\u00e1genes
A este gatete le gustan mucho las im\u00e1genes responsive.<\/p><\/div>\n
 <\/p>\n
Afortunadamente HTML5 nos ayuda a resolver estos problemas con el nuevo elemento <picture><\/strong>, y con los nuevos atributos srcset<\/strong> y sizes<\/strong> del elemento <img><\/strong>. Con cualquiera de las dos opciones, lo que lograremos es que solo se carguen\u00a0las im\u00e1genes adecuadas para el dispositivo del usuario<\/strong>.<\/p>\n
Los nuevos atributos srcset y sizes del elemento <img><\/h2>\n
Una posibilidad consiste en utilizar los nuevos atributos srcset<\/strong> y sizes<\/strong> del elemento <img><\/strong>.<\/p>\n
Veamos un ejemplo;<\/p>\n
<img src=\"movil.jpg\"\r\n  srcset=\"pc.jpg 1024w, tablet.jpg 640w, movil.jpg 320w\"\r\n  sizes=\"(min-width: 576px) 33.3vw, 100vw\"\r\n  alt=\"Ejemplo\"><\/pre>\n
En el atributo\u00a0srcset<\/strong> se indica la colecci\u00f3n de im\u00e1genes disponibles separadas por comas, y despu\u00e9s de cada nombre de archivo se indica el ancho (el n\u00famero de pixels) de la imagen seguido de la letra w (width).<\/p>\n
En el atributo\u00a0sizes<\/strong> vamos a indicar (de nuevo, separados por comas) en que tama\u00f1os se va a usar la imagen, en este caso, indicamos que vamos a usar la imagen en dos posibles tama\u00f1os, ocupando todo el ancho (100vw), o ocupando una tercera parte (33.3vw), y adem\u00e1s cuando se produce dicho cambio (min-width: 576px). Los dos tama\u00f1os que indicamos corresponden a nuestro dise\u00f1o responsive; que en este caso corresponder\u00eda a un dise\u00f1o donde se muestra la imagen en una columna que ocupa todo el ancho o bien, otro dise\u00f1o donde la imagen\u00a0se muestra en un dise\u00f1o de tres columnas ocupando cada una de ellas una tercera parte del ancho.<\/p>\n
Con este m\u00e9todo es el navegador el que decide cual es la imagen adecuada<\/strong>, incluso existe la posibilidad que en caso necesario obtenga m\u00e1s de una imagen (por ejemplo, si el dise\u00f1o cambia ante alguna acci\u00f3n del usuario, como por ejemplo, si hace zoom).<\/p>\n
En lugar de indicar diferentes tama\u00f1os,\u00a0podemos indicar diferentes densidades de pixels. Veamos un ejemplo;<\/p>\n
<img\u00a0src=\"espai.jpg\"\r\n  srcset=\"espaiHD.jpg 2x, espai4K.jpg 3x\"\r\n  alt=\"Ejemplo\"><\/pre>\n
En este caso, el navegador elegir\u00e1 la imagen espai.jpg para pantallas normales (1x), espaiHD.jpg para pantallas de alta densidad (2x) de pixels y espai4K.jpg para pantallas con muy alta densidad (3x) de pixels.<\/p>\n
\"Logo<\/a>
Webp, un nuevo formato de imagen para la web.<\/p><\/div>\n
Si queremos simplemente mostrar nuestras im\u00e1genes responsive con la mejor calidad posible en cada resoluci\u00f3n, este (usar el elemento <img><\/strong>) es el m\u00e9todo recomendable. Si adem\u00e1s queremos cambiar la imagen (no solo su tama\u00f1o\/calidad) seg\u00fan el tipo de dispositivo (art direction), o queremos usar un formato de imagen m\u00e1s moderno como webp<\/a>, es m\u00e1s recomendable el siguiente m\u00e9todo utilizando\u00a0el nuevo elemento <picture><\/strong>.<\/p>\n
HTML5 y el nuevo elemento <picture><\/h2>\n
El nuevo elemento <picture><\/strong> es m\u00e1s recomendable cuando necesitamos mayor flexibilidad y\/o control.<\/p>\n
Veamos un ejemplo;<\/p>\n
<picture>\r\n  <source media=\"(min-width: 800px)\" srcset=\"img\/pc.png\">\r\n  <source media=\"(min-width: 480px)\" srcset=\"img\/tablet.png\">\r\n  <img src=\"img\/movil.jpg\" alt=\"Ejemplo\">\r\n<\/picture><\/pre>\n
Nota:<\/strong> El orden de los elementos <source><\/strong> es importante tal y como veremos a continuaci\u00f3n, tambi\u00e9n lo es el del elemento <img><\/strong> que debe de ser el \u00faltimo hijo del elemento <picture><\/strong>.<\/p>\n
Tal y como se pude intuir f\u00e1cilmente, en este ejemplo tenemos 3 im\u00e1genes diferentes. La imagen por defecto la definimos en el elemento <img><\/strong> y\u00a0ser\u00e1 la que tenga la resoluci\u00f3n m\u00e1s baja (adem\u00e1s en este caso es .jpg). Esta ser\u00e1 la que se utilice, por ejemplo, para tel\u00e9fonos m\u00f3viles. Despu\u00e9s, tenemos un par de elementos <source><\/strong> que indican diferentes im\u00e1genes si se cumple una serie de condiciones.<\/p>\n
En este caso, el navegador est\u00e1 forzado a elegir la primera opci\u00f3n\u00a0<\/strong>(de ah\u00ed la importancia del orden de los elementos <source><\/strong><\/strong>) que cumpla las condiciones <\/strong>que indican\u00a0las media queries\u00a0<\/strong>(o bien la que indica el elemento <img><\/strong><\/strong> si no se cumple ninguna). Por lo tanto, el navegador\u00a0no tiene la capacidad de decidir<\/strong> cual se adapta mejor a cada caso, se limita a \u00abcumplir ordenes\u00bb<\/strong>. Por eso, a no ser que tengamos muy claro que es lo que queremos, si solo necesitamos hacer que la misma imagen a diferentes resoluciones se adapte al dise\u00f1o,\u00a0es m\u00e1s recomendable el m\u00e9todo anterior.<\/strong><\/p>\n
Otro caso en el que deber\u00edamos\u00a0de emplear el elemento <picture><\/strong>, es si quisi\u00e9ramos usar un nuevo formato de imagen m\u00e1s moderno en aquellos navegadores que lo soportan. En dicho caso, podemos usar algo como en el siguiente ejemplo;<\/p>\n
<picture>\r\n  <source srcset=\"espai.webp\" type=\"image\/webp\">\r\n  <img src=\"espai.jpg\" alt=\"Ejemplo\">\r\n<\/picture><\/pre>\n
Obviamente, en este caso tambi\u00e9n podr\u00edamos usar media queries<\/strong> al igual que en el ejemplo anterior.<\/p>\n
En los elementos <source><\/strong> tambien podemos utilizar los atributos srcset<\/strong> y sizes<\/strong> de forma similar a la empleada en el elemento <img>,<\/strong>\u00a0ofreciendo de este modo un amplio abanico de combinaciones y posibilidades (aunque es a costa de complicar sensiblemente el c\u00f3digo HTML).<\/p>\n
Herramientas para crear autom\u00e1ticamente im\u00e1genes responsive<\/h2>\n
Afortunadamente existen herramientas que nos ahorran el tedioso trabajo de crear las m\u00faltiples versiones de la misma imagen para diferentes resoluciones.<\/p>\n
Un ejemplo es esta p\u00e1gina,\u00a0Responsive Image Breakpoints Generator<\/a>, en la cual podemos subir una imagen, configurar los diferentes tama\u00f1os que deseamos, y descargar de forma c\u00f3moda todas las versiones de la imagen a diferentes resoluciones y optimizadas para su uso en la Web. Para nuestra comodidad, incluso nos generar\u00e1 el c\u00f3digo HTML necesario para utilizarlas tanto con el elemento <img><\/strong> como con el elemento <picture><\/strong>.<\/p>\n
Y nada m\u00e1s. Espero que este art\u00edculo os haya sido de inter\u00e9s, y que os haya ayudado un poco a comprender c\u00f3mo funcionan realmente las im\u00e1genes responsive y c\u00f3mo implementarlas en\u00a0HTML5 con el nuevo elemento <picture><\/strong> y los nuevos atributos srcset<\/strong> y sizes<\/strong> de <img><\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Hola a todos y saludos desde el \u00e1rea Web de la Escola Espai. En el art\u00edculo de hoy, veremos c\u00f3mo implementar correctamente im\u00e1genes responsive usando el nuevo elemento HTML5 <picture> y los atributos srcset y sizes del elemento <img>. El problema de usar una \u00fanica…<\/p>\n","protected":false},"author":23,"featured_media":5619,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7,5],"tags":[78,522,518,519,270,521,520],"class_list":["post-5610","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-programacion","tag-html5","tag-imagenes-responsive","tag-img","tag-picture","tag-responsive","tag-sizes","tag-srcset"],"yoast_head":"\nImagenes responsive en HTML5 - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"Como utilizar el nuevo elemento picture y los nuevos atributos srcset y sizes del elemento img para implementar imagenes responsive en HTML5.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Imagenes responsive en HTML5 - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"Como utilizar el nuevo elemento picture y los nuevos atributos srcset y sizes del elemento img para implementar imagenes responsive en HTML5.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-26T16:19:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-13T17:45:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/responsive-images-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"360\" \/>\n\t<meta property=\"og:image:height\" content=\"240\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Abel Camarena\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abel Camarena\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/\"},\"author\":{\"name\":\"Abel Camarena\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"headline\":\"Imagenes responsive en HTML5\",\"datePublished\":\"2016-07-26T16:19:18+00:00\",\"dateModified\":\"2021-09-13T17:45:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/\"},\"wordCount\":1297,\"commentCount\":5,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/responsive-images-featured.jpg\",\"keywords\":[\"HTML5\",\"imagenes responsive\",\"img\",\"picture\",\"responsive\",\"sizes\",\"srcset\"],\"articleSection\":[\"Dise\u00f1o Web\",\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/\",\"name\":\"Imagenes responsive en HTML5 - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/responsive-images-featured.jpg\",\"datePublished\":\"2016-07-26T16:19:18+00:00\",\"dateModified\":\"2021-09-13T17:45:19+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"description\":\"Como utilizar el nuevo elemento picture y los nuevos atributos srcset y sizes del elemento img para implementar imagenes responsive en HTML5.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/responsive-images-featured.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/responsive-images-featured.jpg\",\"width\":360,\"height\":240,\"caption\":\"Imagenes Responsive\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Imagenes responsive en HTML5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\",\"name\":\"Abel Camarena\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"caption\":\"Abel Camarena\"},\"sameAs\":[\"http:\/\/www.espai.es\"],\"url\":\"https:\/\/www.espai.es\/blog\/author\/abel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Imagenes responsive en HTML5 - Blog Escola Espai","description":"Como utilizar el nuevo elemento picture y los nuevos atributos srcset y sizes del elemento img para implementar imagenes responsive en HTML5.","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:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/","og_locale":"es_ES","og_type":"article","og_title":"Imagenes responsive en HTML5 - Blog Escola Espai","og_description":"Como utilizar el nuevo elemento picture y los nuevos atributos srcset y sizes del elemento img para implementar imagenes responsive en HTML5.","og_url":"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/","og_site_name":"Blog Escola Espai","article_published_time":"2016-07-26T16:19:18+00:00","article_modified_time":"2021-09-13T17:45:19+00:00","og_image":[{"width":360,"height":240,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/responsive-images-featured.jpg","type":"image\/jpeg"}],"author":"Abel Camarena","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Abel Camarena","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/"},"author":{"name":"Abel Camarena","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"headline":"Imagenes responsive en HTML5","datePublished":"2016-07-26T16:19:18+00:00","dateModified":"2021-09-13T17:45:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/"},"wordCount":1297,"commentCount":5,"image":{"@id":"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/responsive-images-featured.jpg","keywords":["HTML5","imagenes responsive","img","picture","responsive","sizes","srcset"],"articleSection":["Dise\u00f1o Web","Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/","url":"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/","name":"Imagenes responsive en HTML5 - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/responsive-images-featured.jpg","datePublished":"2016-07-26T16:19:18+00:00","dateModified":"2021-09-13T17:45:19+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"description":"Como utilizar el nuevo elemento picture y los nuevos atributos srcset y sizes del elemento img para implementar imagenes responsive en HTML5.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/responsive-images-featured.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/responsive-images-featured.jpg","width":360,"height":240,"caption":"Imagenes Responsive"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2016\/07\/imagenes-responsive\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Imagenes responsive en HTML5"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897","name":"Abel Camarena","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","caption":"Abel Camarena"},"sameAs":["http:\/\/www.espai.es"],"url":"https:\/\/www.espai.es\/blog\/author\/abel\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2016\/07\/responsive-images-featured.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/5610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=5610"}],"version-history":[{"count":34,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/5610\/revisions"}],"predecessor-version":[{"id":12268,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/5610\/revisions\/12268"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/5619"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=5610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=5610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=5610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}