Opción 1 Usar el elemento Picture
Opción 2 Usar SVG
Opción 3 Usar imágenes y convertirlas en responsive con css
El nuevo elemento <picture> de HTML5 permite describir con todo detalle cómo deben cargarse las imágenes de tu sitio web. Ya no serán necesarios los hacks de CSS o JavaScript para gestionar las imágenes responsive de los diseños web. Además, los usuarios se aprovecharán de las ventajas de cargar solamente las imágenes optimizadas para el dispositivo que están utilizando, lo que es especialmente útil para usuarios con móviles y conexiones lentas a Internet.
Al margen de los nuevos atributos srcset y sizes definidos recientemente para los elementos <img>, el nuevo elemento <picture> permite una mayor flexibilidad al especificar qué imágenes utiliza el sitio. Gracias a este elemento <picture>, será posible escribir código HTML limpio y semántico, dejando que el navegador haga todo el trabajo de seleccionar la mejor imagen para cada situación.
La elección del mejor archivo de imagen depende de muchos factores:
Elección basada en el diseño gráfico
¿El dispositivo es un móvil en vertical o es un monitor panorámico? Carga la mejor imagen optimizada para el tamaño de la pantalla.
Elección basada en la densidad de píxeles
¿Se trata de un dispositivo de alta resolución? Carga las imágenes de alta resolución.
Elección basada en cómo se visualizará la imagen
¿La imagen debe ocupar siempre un tamaño determinado de la ventana del navegador? Carga las imágenes en función del tamaño de la ventana del navegador.
Elección basada en el formato de la imagen
¿Soporta el navegador formatos de imagen con mucha mayor compresión que los tradicionales?Carga un formato de imagen alternativo, como por ejemplo WebP.
El uso más habitual del elemento <picture> consiste en elegir la mejor imagen exclusivamente en función de criterios artísticos. En vez de diseñar una única imagen que se escala para ajustarse al tamaño de la ventana del navegador, se pueden diseñar diferentes imágenes en función de su tamaño.
Izquierda: la misma imagen se escala para todos los tamaños de ventana. Derecha: diferentes imágenes en función del tamaño de la ventana del navegador.
Cuando se utiliza el nuevo elemento <picture> o el elemento <img> con los atributos srcset y sizes, el navegador solamente descarga la imagen adecuada para el navegador y las condiciones de acceso del usuario (tamaño del navegador, densidad en píxeles de la pantalla, formatos soportados por el navegador, etc.) La ventaja de que este comportamiento sea nativo del navegador es que se pueden aprovechar todas las funcionalidades de los navegadores, como la caché de contenidos y la precarga de imágenes.
Como sabes, Internet se inventó para mostrar fotos de gatitos, así que vamos a utilizar el elemento<picture> en acción mostrando cómo se ajusta nuestro gato al espacio disponible en el navegador.
Abrir la demo en una nueva pestaña del navegador. Para ver el elemento <picture> en acción, asegúrate de utilizar el navegador Chrome 38 y redimensiona la ventana del navegador para observar cómo cambia la imagen mostrada.
Esta demo es muy básica porque es una primera toma de contacto con las posibilidades del nuevo elemento <picture>. Sigue leyendo para conocer todas sus posibilidades.
El siguiente código HTML y CSS muestra todo lo necesario para crear la anterior demo:
<style> img {display: block; margin: 0 auto;} </style> <picture> <source media="(min-width: 650px)" srcset="images/kitten-stretching.png"> <source media="(min-width: 465px)" srcset="images/kitten-sitting.png"> <img src="images/kitten-curled.png" alt="a cute kitten"></picture>
Como puedes ver, no se utiliza ni código JavaScript ni ninguna otra librería externa. El bloque de código CSS se utiliza para aplicar unos estilos básicos a la imagen y de nuevo puedes ver que no se utilizan hacks ni media queries. Cuando el navegador soporta el elemento <picture>, tu único trabajo consiste en definir todas las imágenes responsive que tienes disponibles y es el navegador el que se encarga de seleccionar la mejor alternativa.
El elemento <picture> no define ningún atributo propio, pero puedes conseguir comportamientos muy avanzados cuando utilizas <picture> para encerrar a varios elementos <source>.
El elemento <source>, que se utiliza para cargar elementos multimedia como audios y vídeos, se ha actualizado para que también soporte la carga de imágenes. Para ello, se le han añadido los siguientes atributos:
Indica la ruta de la imagen a la que se hace referencia (ejemplo srcset="kitten.png").
También se puede indicar una lista de rutas separadas por comas y que incluyan el sufijo que indica la densidad de píxeles (ejemplo srcset="kitten.png, kitten@2X.png 2x"). Para la densidad de píxeles normales de 1 no hace falta añadir el descriptor 1x.
Lee la sección Seleccionando la imagen en función de la densidad de píxeles para saber cómo utilizarlo en la práctica.
Permite indicar cualquier media query que sea válido en el selector @media de CSS (ejemplo media="(max-width: 30em)").
Acepta cualquier valor que describa la anchura de la imagen (ejemplo sizes="100vw") o un media queryque defina la anchura de la imagen (ejemplo sizes="(max-width: 30em) 100vw").
También se puede indicar una lista ed media queries separadas por comas y que describan varias anchuras de la imagen (ejemplo sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"). En este caso se utiliza por defecto el último de los valores definidos.
Acepta como valor cualquier tipo MIME estándar (ejemplo type="image/webp" o type="image/vnd.ms-photo").
Lee la sección Seleccionando diferentes formatos de imagen para saber cómo utilizarlo en la práctica.
El navegador utiliza el valor de todos los atributos anteriores para determinar qué imagen se debe cargar de entre todas las variantes definidas. Ten en cuenta que el orden de las etiquetas es muy importante, ya que el navegador siempre utilizará el primer elemento <source> cuyas condiciones cumpla el navegador e ignorará el resto de elementos <source>.
El elemento <img> también se ha actualizado para poder utilizarlo dentro del elemento <picture> a modo de salvaguarda en el caso de que el navegador no soporte <picture> o ninguna de las condiciones de los elementos <source> se cumplan.
Añadir un elemento <img> dentro del elemento <picture> es obligatorio. Si no lo haces, el navegador no mostrará ninguna imagen.
La imagen definida por el elemento <img> será la que utilizará el elemento <picture> por defecto cuando no se puede mostrar ninguna otra de las imágenes definidas. Coloca el elemento <img> como último elemento hijo de <picture>, ya que los navegadores ignoran cualquier elemento <source> que se encuentre después de la etiqueta <img>. Si defines un texto alternativo para la imagen mediante el atributo alt, asegúrate de añadir ese atributo en la etiqueta <img>, no en <source> o <picture>.
Utiliza los descriptores 1x, 1.5x, 2x y 3x para añadir soporte para pantallas de alta densidad de píxeles, como por ejemplo las de los smartphones. El atributo srcset que permite indicar estos descriptores ahora se soporta tanto en el elemento <img> como en los elementos <source>.
El siguiente ejemplo muestra cómo soportar las pantallas de tipo 1x, 1.5x y 2.x:
<picture> <source media="(min-width: 650px)" srcset="images/kitten-stretching.png, images/kitten-stretching@1.5x.png 1.5x, images/kitten-stretching@2x.png 2x"> <source media="(min-width: 465px)" srcset="images/kitten-sitting.png, images/kitten-sitting@1.5x.png 1.5x images/kitten-sitting@2x.png 2x"> <img src="images/kitten-curled.png" srcset="images/kitten-curled@1.5x.png 1.5x, images/kitten-curled@2x.png 2x" alt="a cute kitten"></picture>
Cuando se desconoce el tamaño definitivo de una imagen, no es posible indicar el descriptor relacionado con la densidad de píxeles mencionado en la sección anterior. Así que en vez de definir imágenes de anchura fija, se puede añadir un descriptor de su anchura para que el navegador calcule automáticamente la densidad de píxeles y así descargue la mejor imagen en cada caso.
En este ejemplo se utiliza el atributo sizes para definir que la imagen siempre ocupe el 80% de la anchura de la ventana del navegador. Además, se combina con el atributo srcset para definir cuatro versiones diferentes de la misma foto de un faro, cada una con una anchura específica: 160px, 320px, 640px y 1280px:
<img src="lighthouse-160.jpg" alt="lighthouse" sizes="80vw" srcset="lighthouse-160.jpg 160w, lighthouse-320.jpg 320w, lighthouse-640.jpg 640w, lighthouse-1280.jpg 1280w">
El navegador utiliza este descriptor de la anchura para elegir la mejor imagen en función de la anchura del navegador y de la resolución de la pantalla:
En este ejemplo, la ventana de la izquierda tiene aproximadamente 800px de ancho, por lo que el navegador carga la imagen lighthouse-640.jpg. No obstante, si el dispositivo tiene una densidad de píxeles de 2x, entonces se carga la imagen lighthouse-1280.jpg.
Al añadir <picture>, el atributo sizes se puede utilizar tanto en el elemento <img> como en los elementos <source>:
<picture> <source media="(min-width: 800px)" sizes="80vw" srcset="lighthouse-landscape-640.jpg 640w, lighthouse-landscape-1280.jpg 1280w, lighthouse-landscape-2560.jpg 2560w"> <img src="lighthouse-160.jpg" alt="lighthouse" sizes="80vw" srcset="lighthouse-160.jpg 160w, lighthouse-320.jpg 320w, lighthouse-640.jpg 640w, lighthouse-1280.jpg 1280w"></picture>
Siguiendo con este mismo ejemplo, cuando el navegador tiene una anchura de 800px o superior, se carga la imagen panorámica del faro:
La anchura del navegador de la izquierda es mayor que 800px, por lo que se muestra la versión panorámica de la imagen.
El atributo type del elemento <source> se puede utilizar para cargar formatos de imagen alternativos que pueden no estar soportados por el navegador del usuario. Si por ejemplo quieres servir imágenes en formato WebP para los navegadores que lo soportan, pero al mismo tiempo mantener las imágenes JPEG para el resto de navegadores, debes utilizar lo siguiente:
<picture> <source type="image/webp" srcset="images/butterfly.webp"> <img src="images/butterfly.jpg" alt="a butterfly"></picture>
Puedes consultar el artículo Responsive Images: Use Cases and Documented Code Snippets to Get You Started del blog para desarrolladores de Opera.com para obtener la lista completa de ejemplos de uso de los elementos <picture> y <img> junto con los atributos srcset, media, sizes y type.
El elemento <picture> solamente es soportado hoy en día por la versión 38 del navegador Google Chrome. Puedes probarla con la opción de emular diferentes tipos de pantalla de las DevTools del navegador.
Este artículo fue publicado originalmente por Pearl Chen y ha sido traducido con permiso por Javier Eguiluz.
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Conseguir que tus imágenes sean realmente Responsive
Publicado el 02 de Junio de 2014 en las categorías Navegadores, CSS, Accesibilidad
Una guía para el uso de las especificaciones <picture> y srcset.
Dentro de toda la información que engloba una página web, las imágenes son a menudo una de las partes más importantes. Desde que existe internet, y ya van más de 25 años, las imágenes no han sido muy “adaptables”, siempre han tenido como un valor fijo su tamaño, el formato, el recorte que muestran. Todo ello definido por un únicosrc.
Para los desarrolladores web, las pantallas de alta resolución y los diseños Responsive han supuesto un acicate a la hora de “inventar” soluciones para que las imágenes no se queden atrás con respecto al resto de la maqueta. En un primer momento, esto supuso que las imágenes que se subían eran cada vez más y más grandes y pesadas con lo que el tamaño de los archivos se disparó, y provocó una navegación cada vez más lenta.
Hay que partir de la base de que las imágenes han sido el primer obstáculo para la implementación de páginas que sean realmente adaptables (Responsive), que escalen correctamente en sentido vertical y horizontal, y que lo hagan de manera eficiente teniendo en cuenta el contexto de navegación de cada usuario.
Y aquí viene el cambio.
La última especificación del elemento <picture> es el resultado de años de debate sobre la manera de hacer adaptables las imágenes. Permite a los desarrolladores web adoptar formas semánticas que agrupan varias versiones de la misma imagen. Cada una de estas versiones tiene las características técnicas más adecuadas a cada usuario en particular. Esta nueva especificación se está aplicando ya en Chrome,Opera, Firefox e incluso Internet Explorer.
En primer lugar vamos a echar un vistazo a las formas en que los entornos de navegación varían, es decir, la forma en que queremos que nuestras imágenes se adapten.
- Las imágenes deben ser capaces de adaptarse a diferentes dispositivos-pixel-ratio. Que las pantallas de alta resolución ofrezcan imágenes de alta resolución, pero que no necesitemos enviar esas mismas imágenes a los usuarios que no verán todos esos píxeles extra. Este uso le llamaremos device-pixel-ratio.
- Si nuestro diseño es fluido, sensible, entonces las imágenes se deben encoger y estirar para adaptarse a él. Este será el uso tipo imagen-fluida.
- Teniendo en cuenta los dos casos anteriores, necesitamos que las imágenes estén disponibles en múltiples resoluciones para que se puedan escalar de manera eficiente. Afrontar los dos casos anteriores será el caso del uso del tamaño variable de la imagen.
- En último lugar los navegadores ya soportan diferentes formatos de imagen. Se puede dar el caso de querer enviar formatos más de fantasía como el WebP para navegadores avanzados, y proveer de jpg a los navegadores que no soportan formatos tan novedosos. A esto lo llamaremos un uso de Conmutación.
La nueva especificación <picture> aporta características para estos casos, a continuación los analizamos uno a uno.
Partimos de una imagen de ancho fijo que deseamos adaptar a diversos dispositivos-pixel-ratio. Para esto utilizamos la primera herramienta que nos da la nueva especificación para agrupar y describir las fuentes de la imagen: el atributo srcset.
Tenemos dos versiones de la imagen:
small.jpg (320 × 240 píxeles)
large.jpg (640 × 480 píxeles)
Si queremos enviar large.jpg sólo a los usuarios con pantallas de alta resolución, lo hacemos así:
Srcset toma una lista separada por comas de las direcciones URL de las imágenes, cada una con una x que indica el pixel-ratio del dispositivo al que está dirigido.
Src está para los navegadores que no entienden srcset. Y el alt para los que ni siquiera muestran las imágenes.
Para los navegadores siempre las imágenes han sido la parte más pesada del contenido con lo que lo primero que un navegador va a hacer es repasar todo el código HTML, localizar las imágenes y comenzar a cargarlas. Para evitar este problema de la pre-carga, primero se empezaron a utilizar preguntas enviadas a las fuentes. Pero esto no evita tiempos de carga mayores y errores en la respuesta y la muestra de los contenidos.
Realmente es mucho más sencillo decirle al navegador el número de pixeles que necesita a través de un nuevo atributo sizes, y el número de pixeles de cada una de las fuentes disponibles con el atributo w, descritos en la etiqueta srcset. Lo único que tiene que hacer el navegador es coger la fuente más pequeña que puede mostrar nítida.
Para mostrarlo gráficamente, si tenemos tres versiones de una imagen:
large.jpg (1.024 × 768 píxeles)
medium.jpg (640 × 480 píxeles)
small.jpg (320 × 240 píxeles)
Y queremos colocar este contenido en una cuadrícula flexible que comienza con una columna hasta adaptarse a tres en los tamaños mayores, proporcionamos este código:
1
2
3
< img srcset = " 1x small.jpg, 2x large.jpg "
src = " small.jpg "<p> </p>
alt = " Una foto " />
1
2
3
4
5
6
7
< img srcset = " 1024w large.jpg,
640W medium.jpg,
small.jpg 320W "<p> </p>
tamaños = " (min-width: 36em) 33.3vw,<p> </p>
100vw "
src = " small.jpg "
alt = " Una foto " />
Utilizamos de nuevo srcset pero en lugar de x, adjuntamos una descripción con w a nuestras fuentes. Este describe el ancho real del archivo de referencia en pixeles.
De momento damos la especificación sólo de anchura. Aunque la altura también es importante, de momento lo dejamos solo en anchura.
Por lo tanto, w en srcset que indica cuántos pixeles tiene cada imagen. El siguiente atributo es size. Este indica al navegador el número de pixeles que necesita mediante la descripción de la anchura de nuestra imagen. Con esto estamos dando al navegador información sobre el diseño de nuestra página, para que pueda elegir una fuente de imagen antes de haber analizado siquiera una hoja de estilo css.
Esto lo hacemos dando al navegador una anchura en css que informa del ancho de la imagen representada. Las anchuras en css pueden ser absolutas, 99px, o relativas,33.3vw, como en nuestro ejemplo. Esto permite a la imagen ser flexible.
Si la imagen ocupa un tercio de la pantalla, el atributo size debería tener este aspecto:
Size=”33.3vw”
Pero nuestro ejemplo no es tan sencillo ya que tiene un limite en 36ems. Por debajo de este la imagen ocupará el 100% de la pantalla.
Para hacerlo, utilizamos este código:
Este es su formato:
El navegador repasa cada consulta de medios hasta que encuentra uno que coincida y luego utiliza la longitud correspondiente. Si no hay uno coincidente, el navegador utiliza la longitud por defecto.
Tanto con un size de longitud, y un conjunto de fuentes con descripciones w en la etiqueta srcset para elegir, el navegador dispones de todo lo que necesita para cargar de manera eficiente una imagen en un diseño fluido.
Además, estos atributos dan al navegador información suficiente para adaptar la imagen a diversos dispositivos-pixel-ratio. También permiten que el navegador tenga cierto margen de maniobra. Al fijar las condiciones de navegación en función de las fuentes significa que el navegador puede adaptar su elección en base a un conjunto de condiciones como si la pantalla es de alta resolución, o si opcionalmente se pueden cargar imágenes más pequeñas cuando el ancho de banda es más lento.
Y una cosa más, aunque el ejemplo mantiene un tamaño en porcentaje del ancho de la pantalla, podemos combinar anchos absolutos y relativos si por ejemplo añadimos una barra lateral de 12em añadida al diseño de tres columnas.
Utilizaríamos este código:
Supongamos en vez de estirar y adaptarse a las múltiples condiciones de los navegadores, queremos dar un nuevo formato de archivo a los navegadores que no soportan las nuevas especificaciones. Para ello utilizamos lo siguiente:
1
2
1
2
3
4
1
2
sizes="(min-width: 36em) 33.3vw,
100vw”
sizes="[media query] [length],
[media query] [length]
etc…
[default length] "
sizes="(min-width: 36em) calc(.333 * (100vw - 12em)),
100vw"
1
2
3
4
5
< picture ><p> </p>
< source type = " image/svg " src = " logo.svg " />
< source type = " image/png " src = " logo.png " />
< img src = " logo.gif " alt = " Un logo " />
</picture >
Si el navegador no entiende image/svg, entonces salta la primera fuente, y si no entiende la segunda finalmente cae en la imagen simple gif.
Todas estas características permiten disponer de un amplio conjunto de herramientas para crear imágenes verdaderamente adaptables y flexibles en una amplia gama de dispositivos.
Más información en Responsive Images Community Group
-----------------------------------------------------------------------------------------------------------------------------------------------
El principal cambio de conceptualización que ha traído el diseño web responsive ha sido sin duda la sustitución del pixel por unidades relativas. Es cierto, antes ligabamos todos los elementos del diseño (tamaño de tipografía, contenedores, imágenes, márgenes…) a una unidad fija. El pixel. Pero con el responsive todo es distinto. Trabajamos con unidades relativas: porcentajes (%), ems, rems…y las imágenes sin duda son uno de los elementos más afectados
Supongamos que tenemos una imagen de 400 píxeles de ancho por 300 píxeles de alto (un 400x300px de toda la vida). Pues bien, ver esta imagen a tamaño real requiere de un dispositivo con un ancho como mínimo de 400px, ya que una resolución inferior requeriría descroll horizontal, y esto, a menos que sea imprescindible, vamos a tratar siempre de erradicarlo.
Usaremos esta imagen de 400px por 300px como ejemplo para jugar con ella y ridensionarla para trabajar en responsive con CSS
La opción a día de hoy más factible es redimensionar dicha imagen con respecto al contenedor, para así hacerla adaptable a las distintas resoluciones posibles. y esto sólo es posible olvidándonos de la unidad píxel, y pensando en unidades relativas. El responsive design es una tendencia de diseño web que está aquí para quedarse
Olvídate igualmente en tener varias imagenes en pixeles concretos para según qué dispositivo (iphone 5 o una determinada tablet). El mundo de los dispositivos cambia muy rápido, y día a día salen al mercado nuevos elementos con conexión a internet, y con resoluciones de lo más variadas. Con el trabajo que cuesta seleccionar buenas imágenes de bancos ¿Vas a estar añadiendo una imagen cada vez que salga un nuevo dispositivo?. Mira más allá, piensa en el futuro y diseña hoy algo que esté preparado para mañana.
¿Convencido entonces? Vamos a ver como trabajar con imágenes responsives desde CSS.
Sigamos con nuestra imagen de 400px de ancho. Vamos a declarar que dicha imagen tenga un ancho relativo. En este caso del 100%
img { width: 100%};
Bien, con esto hemos logrado desprendernos de los píxeles. Ahora la imagen siempre se ajustará a su contenedor. Si está dentro de un artículo, ocupará el 100% del ancho de dicho artículo. Si está dentro de un widget en el sidebar o aside (elemento HTML5), siempre ocupará el 100% del ancho de dicho widget. Perfecto. Hemos pasado de una imagen de ancho fijo a una imagen fluida.
Vayamos al siguiente nivel. Tener una imagen fluida está genial, ya podemos empezar a utilizar el poder de las imágenes. El problema es: ¿Que pasa cuando nuestro contenedor supera el tamaño en píxeles de la imagen?. Supongamos un contenedor de 1200 píxeles. ¿Que hace nuestra imagen fluida? Llenar el 100% del espacio. Por lo tanto, nuestra imagen de 400px pasa a convertirse en una imagen de 1200px. Responsive total, eso sí, pero pixelada, eso también. Esto no es buena idea.
Tenemos que conseguir que dicha imagen sea fluida, pero hasta un límite! Solución: la regla CSS max-width. Mediante dicha regla vamos a indicar que la imagen tenga su ancho en píxeles, pero que como máximo, siempre esté al 100% de la anchura del contenedor. Dicho de forma clara:
si el contenedor tiene 300px: nuestra imagen 300px (max-width: 100%)
si el contenedor tiene 400px: nuestra imagen 400px (max-width: 100%)
si el contenedor tiene 1200px: nuestra imagen se queda en 400px!
Tenemos lo bueno de las imágenes fluidas y no tenemos pixelación por exceso de estiramiento.
img { max-width: 100%};
Con el valor height la cosa cambia un poco. Normalmente solemos guiarnos por el ancho de los dispositivos y contenedores para ubicar nuestro contenido. Rara vez en diseño web el valorheight es un elemento a tener en cuenta. Existen webs con navegación horizontal, pero la mayoría suelen ser en vertical, por lo tanto son valores a los que no se les presenta mucho control.
Sin embargo, es interesante su uso en diseño web con elementos fijos, por ejemplo un menú de navegación fixed, al que seguramente tengamos que definir un alto concreto. Pero más allá de esto, y volviendo con las imágenes responsive, lo mejor para el alto es indicar un valor auto, es decir, delegar al explorador que calcule el alto del elemento.
En la mayoría de los casos, esto hará que el alto no pierda proporción con respecto al ancho. Si el ancho de la imagen se reduce para adaptarse a responsive, el alto también lo hace. Si el ancho se queda fijo, el alto también lo hará. Así que completemos nuestra regla para imágenes responsives:
img { height: auto; max-width: 100%; }
Con esto tendremos listo nuestra web para que todas las imágenes sean responsive.
Efectivamente existen interesantes alternativas. En realidad, lo que hemos hecho es convertir todas nuestras imágenes en flexibles, lo cual hace posible que puedan ser visualizadas correctamente desde cualquier dispositivo, aumentando por tanto la experiencia de usuario.
Pero podemos ir un paso más allá, y optimizar esto aún más. Imagina que estamos accediendo desde el móvil y una imagen de 1200px de ancho se redimensiona perfectamente. Fantástico, el usuario verá la imagen correctamente, sin embargo, está descargando una imagen por encima de lo necesario. Está descargando más kb de los necesarios. Esa misma imagen redimensionada a 600px de ancho hubiera sido suficiente. Y más ligera!
Para ello, pese a que todavía no hay un estándar, si existen proyectos muy interesantes comoAdaptive Images o Picturefill. Algunos de ellos realizan redimensiones de las imágenes y cargan una u otra dependiendo de las dimensiones del dispositivo. La mayoría de ellas utilizan JavaScript. Hacerlo mediante CSS requiere utilizar la regla background-image, y no es viable hacerlo manualmente artículo por artículo. Si estas interesado en este tema te recomiendo leereste artículo.
Internet Explorer y la imágenes responsive
Nuestro querido Internet Explorer 8 y 7 como siempre poniéndonos la vida fácil. La cuestión aquí es que el navegador de Microsoft no renderiza correctamente la imagen cuando se aplica la regla max-width en estas versiones anteriores. Por tanto, no queda otra que hacer un pequeño fix. Si tienes declarados que en tu cabecera se le aplique una regla si el visitante viene desde IE8 o 7 (como te muestro a continuación):
<!doctype html> <!--[if IE 7]> <html class="ie ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html class="ie ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 7) | !(IE 8) ]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
Le podemos aplicar una regla concreta que sólo se aplique para las imágenes en las versiones de internet explorer que no sean compatibles con max-width normalmente todas las anteriores a Internet Explorer 9.
/* Fix IE problems with images */ .ie img { width: inherit; /* Make images fill their parent's space. Solves IE8. */ max-width: 100%; /* Add !important if needed. */ height: auto; /* Add !important if needed. */ }
Si estas en WordPress, todo lo anterior sirve perfectamente. No obstante, es buena idea definir la ubicación de aquellas imágenes donde se va a aplicar las reglas para convertir dichas imágenes en fluidas. Por ello, y si estas utilizando una plantilla o tema que sigue las recomendaciones de clases en su estructura, podemos limitar que esta regla sólo se aplique a las imágenes dentro de los post o dentro del sidebar:
.entry-content img, .entry-summary img, .comment-content img, .widget img, .wp-caption { max-width: 100%; height: auto; }
Esto es bueno, pues puede ocurrir que alguna de las imágenes que tengas no quieras que se redimensionen (por ejemplo un botón o algún elemento de la cabecera) es decir, aquellas imágenes fuera del contenedor que marca los artículos y elementos como widgets y demás.
Es una buena práctica que utilizamos en nuestros temas. Igualmente, haya algunos pluginsinteresantes para trabajar con imágenes responsives en WordPress, como PB Responsives Images y Simple Responsives Images.
Esta todo por hacer. Comprueba que lo único que hemos hecho ha sido convertir una imagen con dimensiones estáticas en una imagen fluida y dinámica. Pero lo importante viene a continuación, ¿Cómo hacer que esas imágenes ocupen menos en resoluciones menores? ¿Es necesario crear 3 copias de la misma imagen y cargarlas según el dispositivo?
Sin duda ese será el siguiente paso y más importante. Ya hemos conseguido una experiencia de usuario mínima viable. Ahora es necesario investigar un paso más. Una web que carga más rápido y llegue al usuario en un tiempo consecuente con una navegación fluida. Lo vemos en los próximos meses
Creación de gráficos vectoriales SVG y empleo en las páginas web de internet para mostrar diagramas, figuras, logos, iconos, texto y otros elementos sencillos. Códigos para insertarlos o impregnarlos.
En ocasiones necesitamos crear manualmente dibujos, ilustraciones, diagramas, esquemas o figuras para acompañar y complementar un artículo en nuestro blog o sitio web.
Las imágenes tradicionales en estos casos no ayudan o se hace muy complejo editarlas en un software.
La mejor opción en estos casos es usar imágenes vectoriales.
Son las imágenes que hemos visto en dibujos animados, publicidad, juegos y en muchas otras tareas en la web.
Se caracterizan por su pequeño tamaño, sencillez y nitidez.
Hay varios formatos de imágenes o gráficos vectoriales, pero el mejor de ellos es el SVG.
SVG es la abreviatura en ingles de Scalable Vector Graphics (Gráficos Vectoriales Escalables).
Es un nuevo estándar usado para la creación y representación de gráficos e imágenes vectoriales en las páginas web y aplicaciones de internet, aunque también se pueden emplear en la computadora offline.
SVG es un lenguaje gráfico que emplea el formato XML.
Las imágenes en este formato a diferencia de las tradicionales se pueden editar usando editores de texto plano como NotePad+ o hasta con el Bloc de Notas de Windows.
El formato SVG es recomendado por el W3C y es compatible por la mayoría de los navegadores web modernos.
Las imágenes SVG se caracterizan por su pequeño tamaño y por ser imágenes vectoriales.
Imagen VECTORIAL
Son usadas en las páginas cuando se necesita mostrar o representar elementos sencillos que no necesitan de alta resolución como gráficos, diagramas, mapas, logotipos, iconos, texto, etc.
En este artículo compartimos de forma sencilla, de forma tal que pueda ser entendido por todos, como crear las imágenes SVG, como insertarlas en las páginas web o usarlas offline en la computadora.
Diferencias entre las imágenes SVG y los archivos SVG
Imágenes SVG
Consisten de código impregnado en el HTML de las páginas que el navegador renderiza como imágenes vectoriales, que se pueden escalar sin perder la calidad.
Se usa en caso de elementos gráficos simples que requieren de poca cantidad de código.
Los archivos SVG
Son son archivos de texto con la extensión SVG que contienen el código para renderizar las imágenes vectoriales. Se pueden enlazar a una página como un archivo de imagen externo.
Se pueden abrir con programas de edición de imágenes vectoriales o con el navegador Internet Explorer. Este navegador permite también guardar las imágenes en formato PNG o BMP.
Una imagen en formato SVG puede ser hasta 30 veces menor que una similar en formato PNG.
1- La principal ventaja de las imágenes vectoriales es que siempre mantienen la calidad y nitidez a cualquier resolución.
Las imágenes tradicionales que usan los formatos JPG, PNG, BMP, GIF y otros similares, son imágenes en mapa de bits, matriciales o rasterizadas.
Están formadas por una serie de pixeles o puntos coloreados y al redimensionarlas o aumentar el zoom se pixelizan y pierden calidad.
Las imágenes vectoriales contienen las instrucciones para el navegador o programa de visualización de cómo crear la imagen.
Es por eso que al aumentar el zoom siguen mostrándose nítidamente a cualquier resolución.
Se puede comprobar lo anterior con la siguiente imagen.
Es un logotipo de muestra creado en formato SVG usando InkScape. Mide 800 x 500 pixeles y solo 3 KB.
Da un clic encima de ella para abrirla en una nueva pestaña y entonces aumenta el zoom del navegador usando al mismo tiempo la teclas Control y + o - del teclado numérico.
2- Otra de las ventajas de las imágenes vectoriales es su pequeño tamaño, que permite aumentar la velocidad de carga de las páginas, sin prescindir de elementos gráficos o poder emplear mayor cantidad de ellos.
3- Las imágenes son construidas por el navegador, lo que disminuye la carga y consumo de recursos en el servidor web.
4- Se pueden crear imágenes SVG animadas.
Las imágenes SVG se pueden crear de dos formas:
1- Usando programas de diseño gráfico, como son Illustrator, Corel Draw, Freehand o Visio, no obstante el mejor de ellos es InkScape.
También es posible convertir otras imágenes vectoriales como las que usan el formato WMF al formato SVG.
Otra opción es convertir imágenes tradicionales de mapa de bits al formato SVG.
2- Cuando se trata de elementos sencillos, podemos crear las imágenes impregnando en la página web el código necesario para representarlas. Algunos ejemplos se muestran más abajo.
Para eso los más entusiastas pueden introducir el código directamente o copiar y pegar el código de una imagen existente creada mediante software.
Las imágenes SVG se pueden insertar en las páginas web de dos formas:
1- Como una imagen tradicional mediante la etiqueta IMG y almacenándola en una carpeta del servidor web.
Este es el sistema empleado cuando se trata de imágenes más complejas para representar diagramas o gráficos.
La siguiente imagen en formato SVG creada con InkScape, esta insertada en esta página como una imagen tradicional.
2- Impregnando el código XML necesario usando la etiqueta SVG de HTML5.
Este es el sistema ideal cuando se trata de elementos gráficos sencillos como iconos, logotipos, texto dinámico o figuras geométricas.
De la misma imagen anterior se tomó el código y se impregnó en el HTML a continuación, solo se cambió el color del texto.
Aparentemente no hay diferencia en los dos casos.
All you need is LOVEnorfipc.com
A continuación mostramos algunos ejemplos sencillos de gráficos SVG impregnados inline en esta página y el código necesario para mostrarlos.
Un círculo
En el código los siguientes valores indican:
cx y cy = Las coordenadas del circulo en el eje x y y
r = El radio
fill = El color de relleno
stroke = El color del borde
stroke-width = ancho del borde
Un rectángulo con las esquinas redondeadas
Los valores son similares al círculo, pero es necesario usar height y width para la altura y el ancho y rx y ry para redondear las esquinas.
Texto animado
Texto que cambia su tamaño de forma dinámica al dar clic encima.
Texto
Gradiente infinito
Al dar clic encima se genera mediante Javascript de forma aleatoria un gradiente.
Gradiente infinito
Los más entusiastas que comprendan las posibilidades de las imágenes SVG y deseen conocer y explotar opciones avanzadas, pueden encontrar un completo manual publicado por el W3C:An SVG Primer
Otra opción es SVG Reference en W3School.
Iconos SVG de las redes sociales y sitios de internet
Un ejemplo práctico del uso de las imágenes SVG, es crear iconos de las redes sociales de internet para usar en los botones de compartir en las páginas.
El código impregnado en el HTML hace innecesaria la carga de imágenes externas y de esa forma las páginas cargan mucho más rápido.
En otros artículos de este sitio compartimos los códigos necesarios para crear estos iconos:
- Iconos vectoriales SVG y PNG de las redes sociales de internet
- Iconos SVG y PNG de sitios y servicios de internet
Editores de imagenes SVG
Existen varios programas y servicios en la red para crear o editar las imágenes SVG.
Algunos facilitan convertir de otros formatos y viceversa.
En otro artículo comentamos y detallamos las herramientas más populares para estas tareas: Programas y servicios para crear, editar y convertir imágenes SVG
En otras páginas de nuestro sitio ofrecemos archivos SVG para descargar que se pueden editar fácilmente y personalizar, solo cambiando parámetros como el tamaño y los colores, sencillamente usando el Blog de notas.
✓ Programas y servicios para crear, editar y convertir imágenes SVG
✓ Iconos oficiales de Google para la web, para copiar o descargar
✓ Iconos SVG y PNG de sitios y servicios de internet
✓ Iconos vectoriales SVG y PNG de las redes sociales de internet
Herramientas para el diseño responsive
https://eduarea.wordpress.com/2012/08/31/30-herramientas-utiles-de-diseno-web-responsive/