Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Diseño web responsive: Imágenes

Cómo funcionan las imágenes en la web

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
Daremos un repaso rápido a cómo ha funcionado el uso de las imágenes en los proyectos web hasta poco antes de la introducción del diseño responsive y cómo ha evolucionado a partir del mismo, analizando el código necesario para ello.
04:28

Transcripción

Cuando hablamos de imágenes en la web, es importante recordar un poco los inicios de cómo empezó todo acerca del uso de imágenes en Internet. En su momento, se ideó la etiqueta img para poder enriquecer los archivos html pudiendo incluir contenido visual, imágenes, iconos o incluso también pequeños gráficos para que la web no fuese de manera predominante un compendio de bloques de textos informativos. A día de hoy, está claro que el concepto web ha evolucionado muchísimo y las imágenes son parte vital, aportando información y enriqueciendo enormemente la experiencia. El funcionamiento de una imagen a nivel básico mediante el marcado html es tremendamente sencillo. Tenemos una etiqueta img con un atributo fuente o src, donde se le indica la ruta al fichero de la imagen. Generalmente, también se le añade la opción de un texto alternativo que aparecería en aquellos dispositivos o sistemas donde no se pudiera mostrar la imagen. Entonces lo que ocurre es que el navegador coge esa imagen, reserva un espacio donde colocarla, y escala ese espacio para que la imagen encaje perfectamente. De manera opcional, se puede atribuir valores de altura y anchura. Sin embargo, en un contexto de diseño adaptable o responsive queremos que la imagen varíe de tamaño en función del dispositivo. Y por eso, generalmente, este etiquetado de imagen se incluye dentro de algún tipo de contenedor. Vamos a verlo con un ejemplo en el navegador. Tengo aquí abierto un archivo html y un archivo de estilo, Style.ccs, que también tengo abierto en el navegador. Realmente lo único que tengo es una imagen, un poco de texto de relleno. Y en lo que nos tenemos que fijar es que aquí tengo el marcado de una imagen. Justo como habíamos dicho antes tiene un atributo fuente, un atributo rsc y también un texto alternativo. Y esta imagen está incluida dentro de un contenedor. Ya veremos con más detalle este tipo de contenedores, pero esto es lo que me permite darle cierto estilo a esta clase, que la tengo también aquí dentro, y entonces a todas las imágenes contenidas dentro del contenedor, con este nombre, con esta clase, pues le estoy diciendo que el ancho de la imagen ocupe el cien por cien del ancho del contenedor y que la altura se escale proporcionalmente. ¿Qué es lo que consigo con esto? Pues si me acerco al navegador, vamos a mostrarlo aquí, en pantalla, lo que tendría es el contenedor y dentro del contenedor la imagen. Lo bueno es que ahora estoy usando Chrome y tengo el emulador abierto para mostrar qué es lo que ocurriría si voy reescalando el tamaño del viewport. Estoy simulando en este caso, si pudiese acceder con un tablet, con un dispositivo móvil o con pantallas con otra resolución, bueno pues la imagen. Como hemos dicho que el ancho se va a escalar proporcionalmente y la altura también, pues esto es lo que ocurriría. Este es el método tradicional. Es lo que habitualmente estábamos acostumbrados a hacer. Sin embargo, en un contexto actual responsive habría que mejorar la manera de trabajar. Me explico, y es que hay situaciones en las que solo vamos a tener imágenes muy grandes. Por ejemplo, que se muestren a full width, a ancho completo. Y pongámonos en la situación de que estamos accediendo a este artículo y estamos viendo esta imagen desde una pantalla de alta resolución, por ejemplo, de 27 pulgadas además, uno de los últimos Apple. Bueno, pues para poder verla a muy buena calidad, vamos a tener que subir una imagen de muy buena resolución, una imagen que pese mucho. Y sin embargo, quizás desde una tablet con una pantalla menor o desde otros ordenadores con una resolución menor de pantalla, no vamos a necesitar que el ordenador se descargue una imagen de tanto peso. Tendríamos que tener esa flexibilidad a la hora de poder cargar diferentes imágenes para no tener que descargar información que no necesitamos. Y es ahí, donde entra el concepto de uso y creación de imágenes responsive.

Diseño web responsive: Imágenes

Aprende los conceptos básicos sobre la creación y el uso de imágenes en un entorno digital responsive, donde lo que importa es el usuario y los contenidos que le interesan.

1:54 horas (24 Videos)
Actualmente no hay comentarios.
 
Fecha de publicación:25/10/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.