Imágenes responsivas

Una imagen vale más que mil palabras y las imágenes son parte integral de cada página. Sin embargo, a menudo también representan la mayoría de los bytes descargados. Con el diseño web adaptable, no solo nuestros diseños pueden cambiar según las características del dispositivo, sino también las imágenes.

Pete LePage

El diseño web adaptable implica que no solo nuestros diseños pueden cambiar según el dispositivo de usuario, pero el contenido también puede cambiar. Por ejemplo, en alta alta resolución (2x), los gráficos de alta resolución garantizan nitidez. Una imagen un 50% de ancho puede funcionar bien cuando el navegador es de 800 px de ancho, pero utiliza demasiado espacio en un teléfono angosto y requiere la misma sobrecarga de ancho de banda cuando se reduzca para adaptarse a una pantalla más pequeña.

Dirección artística

Otras veces, es posible que sea necesario cambiar la imagen de manera más drástica: cambia el proporciones, recortar e incluso reemplazar toda la imagen. En este caso, cambiar la imagen generalmente se conoce como dirección artística. Consulta responsiveimages.org/demos/ para más información ejemplos.

Imágenes responsivas

¿Sabías que las imágenes representan, en promedio, más del 60% de los bytes necesarios para cargar una página web?

En este curso, aprenderás a trabajar con imágenes en la Web moderna que tus imágenes se vean geniales y se carguen rápidamente en cualquier dispositivo.

Durante el proceso, adquirirás una variedad de habilidades y técnicas para integrar imágenes responsivas en tu flujo de trabajo de desarrollo. Al final del en el curso, desarrollarás contenido con imágenes que se adapten y respondan diferentes tamaños de viewport y situaciones de uso.

Este es un curso gratuito que se ofrece a través de Udacity

Realizar el curso

Imágenes en lenguaje de marcado

El elemento img es potente: descarga, decodifica y renderiza. y los navegadores modernos admiten una gran variedad de formatos de imagen. Incluyendo que funcionan en todos los dispositivos no es diferente que la de las computadoras de escritorio y solo requiere algunos ajustes menores para crear una buena experiencia.

Resumen

• Usa tamaños relativos de imágenes para evitar que se excedan accidentalmente el contenedor.
• Usa el elemento picture cuando quieras especificar diferentes imágenes según según las características del dispositivo (también conocida como dirección artística).
• Usa srcset y el descriptor x en el elemento img para proporcionar sugerencias al navegador a fin de saber cuál es la mejor imagen para elegir entre las distintas densidades.
• Si tu página solo tiene una o dos imágenes que no se utilizan en ningún otro lugar en tu sitio, considera usar imágenes intercaladas para reducir las solicitudes de archivos.

Usa tamaños relativos para las imágenes

Recuerda usar unidades relativas cuando especifiques los anchos de las imágenes para evitarlos accidentalmente desborde el viewport. Por ejemplo, width: 50%; causas que el ancho de la imagen sea el 50% del elemento que la contiene (no el 50% de la viewport o 50% del tamaño real de píxeles).

Debido a que CSS permite que el contenido desborde del contenedor, quizás debas usar max- ancho: 100% para evitar que las imágenes y otro contenido desborde Por ejemplo:

img, embed, object, video {
    max-width: 100%;
}

Asegúrate de proporcionar descripciones significativas mediante el atributo alt en img elementos; estos ayudan a que tu sitio sea más accesible, ya que brindan contexto a la pantalla lectores y otras tecnologías de asistencia.

Mejora los img con srcset para dispositivos con valores altos de PPP

El atributo srcset mejora el comportamiento del Elemento img, lo que facilita proporcionar varios archivos de imagen para diferentes características de dispositivos. Similar a image-set Función de CSS nativo de CSS, srcset permite que el navegador elija la mejor según las características del dispositivo, por ejemplo, una imagen de 2x en una pantalla de 2x y, posiblemente, en el futuro, una imagen de 1x en un dispositivo 2x cuando está en una red con ancho de banda limitado.

<img src="photo.png" srcset="[e-mail] 2x" ...>

En los navegadores que no son compatibles con srcset, el navegador simplemente usa el navegador predeterminado archivo de imagen especificado por el atributo src. Por eso es importante incluir siempre una imagen de 1x que se pueda mostrar en cualquier dispositivo, independientemente del capacidades de integración. Cuando se admite srcset, la lista separada por comas de imágenes o condiciones se analizan antes de realizar solicitudes y solo las se descargue y muestre la imagen adecuada.

Aunque las condiciones pueden incluir desde la densidad de píxeles hasta el ancho y de altura, actualmente solo se admite la densidad de píxeles. Para equilibrar el saldo actual con funciones futuras, continúa proporcionando simplemente la imagen de 2x en el atributo.

Dirección artística en imágenes responsivas con picture

Para cambiar imágenes según las características del dispositivo, lo que también se conoce como arte usa el elemento picture. El El elemento picture define una solución declarativa para varias versiones de una imagen basadas en diferentes características, como el tamaño y la resolución del dispositivo, la orientación y más.

Nota: El elemento picture está comenzando a implementarse en navegadores. Aunque todavía no está disponible en todos los navegadores, recomendamos utilizarlo debido a la gran compatibilidad con versiones anteriores y el posible uso del polyfill Picturefill. Para obtener más detalles, consulta el sitio ResponsiveImages.org.

Usa el elemento picture cuando se genere una imagen. existe en varias densidades, o cuando un diseño adaptable determina una una imagen un poco diferente en algunos tipos de pantallas. Similar al video, varios elementos source pueden lo que permite especificar diferentes archivos de imagen según las consultas de medios o el formato de imagen.

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

Probar

En el ejemplo anterior, si el ancho del navegador es de al menos 800 px, entonces Se usan head.jpg o head-2x.jpg, según la resolución del dispositivo. Si el botón navegador tiene entre 450 px y 800 px, entonces se vuelve a usar head-small.jpg o head-small- 2x.jpg, según la resolución del dispositivo. Anchos de pantalla de menos de 450 px y retrocompatibilidad en la que el elemento picture no está el navegador, en su lugar, renderiza el elemento img y siempre debe incluidos.

Imágenes de tamaño relativo

Cuando no se conoce el tamaño final de la imagen, puede ser difícil especificar densidad de las fuentes de imágenes. Esto es especialmente cierto para las imágenes que abarcan un ancho proporcional al navegador y son flexibles, según la configuración tamaño del navegador.

En lugar de proporcionar densidades y tamaños de imagen fijos, puedes especificar el tamaño de cada imagen proporcionada agregando un descriptor de ancho junto con el tamaño de la de imagen, lo que le permite al navegador calcular automáticamente la métrica densidad de píxeles y elegir la mejor imagen para descargar.

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

Probar

En el ejemplo anterior, se renderiza una imagen que tiene la mitad del ancho del viewport (sizes="50vw") y, según el ancho del navegador y el píxel de su dispositivo, relación de aspecto, permite que el navegador elija la imagen correcta sin importar el tamaño la ventana del navegador. Por ejemplo, en la siguiente tabla, se muestra a qué imagen navegador elegiría:

Ancho del navegador	Proporción de píxeles del dispositivo	Imagen utilizada	Resolución efectiva
400px	1	200.jpg	1x
400px	2	400.jpg	2x
320px	2	400.jpg	2.5x
600px	2	800.jpg	2.67 veces
640px	3	1000.jpg	3.125 veces
1100px	1	800.png	1.45 veces

Ten en cuenta los puntos de interrupción en las imágenes responsivas

En muchos casos, el tamaño de la imagen puede cambiar en función del diseño del sitio. puntos de interrupción. Por ejemplo, en una pantalla pequeña, es posible que quieras que la imagen abarcan todo el ancho del viewport, mientras que en pantallas más grandes, solo debe tomar una proporción pequeña.

<img src="400.png"
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

Probar

En el ejemplo anterior, el atributo sizes usa varias consultas de medios para lo siguiente: especificar el tamaño de la imagen. Si el ancho del navegador es superior a 600 px, la imagen es el 25% del ancho de la viewport; cuando tiene entre 500 px y 600 px, la imagen es el 50% del ancho de la viewport; y menos de 500 px, es de ancho completo.

Haz que las imágenes de los productos sean expandibles

J. Sitio web de Crews con una imagen expandible del producto.

Los clientes desean ver lo que comprarán. En los sitios de venta minorista, los usuarios esperan puedan ver primeros planos de alta resolución de los productos para tener una mejor visualización los detalles participantes del estudio se frustraron si no podían.

Un buen ejemplo de imágenes expandibles y que se pueden presionar es el J. Sitio de la tripulación. La superposición que desaparece indica que una imagen se puede presionar, lo que proporciona una imagen en una imagen con detalles finos visibles.

Otras técnicas de imagen

Imágenes de compresión

El técnica de imagen compresiva entrega una imagen de 2x altamente comprimida a todos los dispositivos, sin importar el del dispositivo. Según el tipo de imagen y el nivel de compresión, la calidad de la imagen puede no cambiar, pero el tamaño del archivo disminuye de manera significativa.

Probar

Precaución: Ten cuidado con la técnica de compresión, ya que requiere más memoria y decodificación. Cambiar el tamaño de imágenes grandes para adaptarlas a pantallas más pequeñas es costoso y puede resultar particularmente difícil en dispositivos de gama baja en los que la memoria y el procesamiento son limitados.

Reemplazo de imágenes de JavaScript

El reemplazo de imágenes de JavaScript verifica las capacidades del dispositivo y “realiza correcto”. Puedes determinar la proporción de píxeles del dispositivo window.devicePixelRatio, obtener el ancho y el alto de la pantalla, y hasta realizar un análisis de conexión de red a través de navigator.connection o mediante para cada solicitud. Cuando hayas recopilado toda esta información, puedes decidir cuál imagen que se cargará.

Un gran inconveniente de este enfoque es que el uso de JavaScript implica que retrasar la carga de imágenes hasta que, al menos, finalice el analizador de lectura previa. Esta Esto significa que las imágenes ni siquiera comenzarán a descargarse hasta después del evento pageload. incendios. Además, lo más probable es que el navegador descargue la red 1x y la 2x con imágenes, lo que aumentó el peso de la página.

Incorporación de imágenes: de trama y vectoriales

Existen dos formas fundamentalmente diferentes de crear y almacenar imágenes. esto afecta la forma en que implementas imágenes de manera responsiva.

Las imágenes de trama, como fotografías y otras imágenes, se representados como una cuadrícula de puntos individuales de color. Es posible que las imágenes de trama desde una cámara o un escáner, o crearse con el elemento lienzo HTML. Formatos como PNG, JPEG y WebP para almacenar imágenes de trama.

Las imágenes vectoriales, como logotipos y arte lineal, se definen como un conjunto de curvas, líneas, formas, colores de relleno y gradientes. Las imágenes vectoriales se pueden crear con programas como Adobe Illustrator o Inkscape, o escritos a mano en código con un formato vectorial como SVG.

SVG

SVG permite incluir gráficos vectoriales adaptables en una página web. El La ventaja de los formatos de archivos vectoriales sobre los de trama es que el navegador una imagen vectorial de cualquier tamaño. Los formatos vectoriales describen la geometría de la imagen (cómo se construye a partir de líneas, curvas, colores, etc.). Los formatos de trama, por otro lado, solo tienen información sobre puntos individuales de color, por lo que el navegador tiene que adivinar cómo rellenar los espacios en blanco al escalar.

A continuación, se muestran dos versiones de la misma imagen: una imagen PNG a la izquierda y un SVG en la derecha. El archivo SVG se ve muy bien en cualquier tamaño, mientras que el PNG que está a su lado comienza a verse borrosa en pantallas más grandes.

Si deseas reducir la cantidad de solicitudes de archivos que realiza tu página, puedes codificar de imágenes integradas con formato SVG o de URI de datos. Si ves la fuente de esta página, verás que los dos logotipos que aparecen a continuación se declaran intercalados: un URI de datos y un SVG.

SVG tiene gran compatibilidad en dispositivos móviles y computadoras de escritorio, y las herramientas de optimización reducir significativamente el tamaño de los SVG. Los siguientes dos logotipos SVG intercalados se ven idéntico, pero uno tiene alrededor de 3 KB y el otro solo 2 KB:

URI de datos

Los URI de datos proporcionan una forma de incluir un archivo, como una imagen, intercalado mediante la configuración el src de un elemento img como una cadena codificada en Base64 con el elemento con el siguiente formato:

<img src="data:image/svg+xml;base64,[data]">

El comienzo del código del logotipo HTML5 anterior se ve de la siguiente manera:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

(La versión completa tiene más de 5000 caracteres de longitud).

Arrastrar 'n' para soltar, como jpillora.com/base64-encoder son disponibles para convertir archivos binarios, como imágenes, en URI de datos. Al igual que los SVG, Los URI de datos son muy compatibles en dispositivos móviles y navegadores para computadoras de escritorio.

Incorporación en CSS

Los URI y los SVG de datos también se pueden intercalar en CSS, lo que se admite en en dispositivos móviles y computadoras de escritorio. Aquí hay dos imágenes de aspecto idéntico implementadas como imágenes de fondo en CSS; un URI de datos y un archivo SVG:

Profesionales y desventajas

El código intercalado para imágenes puede ser verboso, especialmente los URI de datos, ¿por qué ¿quisieras usarlo? Para reducir las solicitudes HTTP. Los SVG y los URI de datos pueden habilitar toda una página web, incluidas imágenes, CSS y JavaScript, que se recuperará con una sola solicitud.

La desventaja:

• En dispositivos móviles, los URI de datos pueden ser mucho más lentos. para mostrar en dispositivos móviles que en las imágenes de un src externo.
• Los URI de datos pueden aumentar considerablemente el tamaño de una solicitud HTML.
• Agregan complejidad al lenguaje de marcado y al flujo de trabajo.
• El formato del URI de datos es considerablemente más grande que el binario (hasta un 30%). por lo tanto, no reduce el tamaño total de descarga.
• Los URI de datos no se pueden almacenar en caché, por lo que deben descargarse para cada página en la que se usen.
• No son compatibles con IE 6 ni en 7, ya que la compatibilidad no es completa en IE8.
• Con HTTP/2, la reducción del número de solicitudes de recursos dejará de ser una prioridad.

Como con todo lo que sea adaptable, debes probar lo que funciona mejor. Usar desarrollador herramientas para medir el tamaño del archivo de descarga, la cantidad de solicitudes y el total latencia. Los URI de datos a veces pueden ser útiles para imágenes de trama, por ejemplo, en una página de inicio que solo tenga una o dos fotos que no se utilicen en ningún otro lugar. Si si necesitas intercalar imágenes vectoriales, SVG es una opción mucho mejor.

Imágenes en CSS

La propiedad background de CSS es una herramienta potente para agregar imágenes complejas a los elementos, lo que facilita agregar varias imágenes y hace que se repitan y más. Cuando se combina con consultas de medios, la propiedad background se convierte en aún más potente, ya que permite la carga condicional de imágenes según la pantalla resolución, tamaño de viewport y más.

Resumen

• Usa la mejor imagen para las características de la pantalla; ten en cuenta la pantalla. el tamaño, la resolución del dispositivo y el diseño de la página.
• Cambia la propiedad background-image en CSS para pantallas con valores altos de PPP con el siguiente código: consultas de medios con min-resolution y -webkit-min-device-pixel-ratio.
• Utiliza srcset para proporcionar imágenes de alta resolución además de la imagen 1x en el lenguaje de marcado.
• Ten en cuenta los costos de rendimiento cuando uses el reemplazo de imágenes de JavaScript o cuando se entregan imágenes de alta resolución muy comprimidas a dispositivos de menor resolución.

Usa consultas de medios para la carga condicional de imágenes o la dirección artística

Las consultas de medios no solo afectan el diseño de la página, también puedes usarlos para cargar imágenes de forma condicional o proporcionar una dirección artística según el viewport ancho.

Por ejemplo, en la siguiente muestra, en pantallas más pequeñas, solo se ve small.png descargado y aplicado al contenido div, mientras que en pantallas más grandes Se aplica background-image: url(body.png) al cuerpo y background-image: url(large.png) al div de contenido.

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

Probar

Usa image-set para proporcionar imágenes de alta resolución

La función image-set() en CSS mejora el comportamiento de la propiedad background. lo que facilita la tarea de proporcionar múltiples archivos de imagen para diferentes del usuario. Esto permite que el navegador elija la mejor imagen según las características del dispositivo (por ejemplo, usar una imagen de 2x en una pantalla de 2x) o una imagen de 1x en un dispositivo de 2x cuando se encuentra en una red con ancho de banda limitado.

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);

Además de cargar la imagen correcta, el navegador también la ajusta. según corresponda. En otras palabras, el navegador supone que las imágenes 2x son el doble de como las imágenes de 1x, reduce la escala de la imagen de 2x por 2, que la imagen parezca tener el mismo tamaño en la página.

La compatibilidad con image-set() aún es nueva y solo se admite en Chrome y Safari con el prefijo del proveedor -webkit. Asegúrate de incluir un imagen de resguardo para cuando image-set() no sea compatible; por ejemplo:

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
  background-image: image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
}

Probar

Lo anterior carga el recurso adecuado en navegadores que admiten image-set; de lo contrario, recurre al recurso 1x. La salvedad obvia es que, si bien Los navegadores image-set() admiten pocos navegadores. La mayoría de los navegadores obtienen el recurso 1x.

Usa consultas de medios para proporcionar imágenes de alta resolución o dirección artística

Las consultas de medios pueden crear reglas según la relación de píxeles del dispositivo, lo que permite especificar imágenes diferentes para pantallas 2x en comparación con pantallas 1x.

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
    /* High dpi styles & resources here */
}

Chrome, Firefox y Opera admiten el (min-resolution: 2dppx) estándar, mientras que los navegadores Safari y Android requieren el prefijo del proveedor anterior sintaxis sin la unidad dppx. Recuerda que estos estilos solo se cargan si el elemento el dispositivo coincide con la consulta de medios y debes especificar los estilos para el caso básico. Esto también brinda el beneficio de garantizar que algo se renderice si el navegador no admite consultas de medios específicas de la resolución.

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

Probar

También puedes usar la sintaxis de ancho mínimo para mostrar imágenes alternativas según el tamaño de viewport. Esta técnica tiene la ventaja de que la imagen no descargarse si la consulta de medios no coincide. Por ejemplo, bg.png solo es Se descarga y se aplica a body si el ancho del navegador es de 500 px o superior:

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

Usa SVG para íconos

Cuando agregues íconos a tu página, usa íconos SVG cuando sea posible o en algunos mayúsculas y minúsculas, caracteres Unicode.

Resumen

• Usa SVG o unicode para los íconos en lugar de imágenes de trama.

Cómo reemplazar íconos simples por Unicode

Muchas fuentes admiten la gran cantidad de glifos Unicode, que pueden usarse en lugar de imágenes. A diferencia de las imágenes, las fuentes Unicode escalan bien y se ven bien, no sin importar cuán pequeños o grandes aparezcan en la pantalla.

Más allá del grupo de caracteres normal, Unicode puede incluir símbolos para flechas (←), operadores matemáticos (√), formas geométricas (★), controlar imágenes (▶), notación musical (♬), Letras griegas (Ω), incluso piezas de ajedrez (♞).

La inclusión de un carácter Unicode se realiza de la misma manera que las entidades denominadas: &#XXXX, donde XXXX representa el número de caracteres Unicode. Por ejemplo:

You're a super ★

Eres genial ★

Cómo reemplazar íconos complejos por SVG

Para requisitos de íconos más complejos, los íconos SVG suelen ser ligeros, fáciles de usar y pueden diseñarse con CSS. SVG tiene varias ventajas sobre Imágenes de trama:

• Son gráficos vectoriales que se pueden escalar de forma infinita.
• Los efectos CSS, como el color, el sombreado, la transparencia y las animaciones, se directo.
• Las imágenes SVG se pueden intercalar directamente en el documento.
• Son semánticos.
• Proporcionan una mejor accesibilidad con los atributos adecuados.

With SVG icons, you can either add icons using inline SVG, like
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

Probar

Usa las fuentes de los íconos con cuidado

Ejemplo de una página que usa FontAwesome para sus íconos de fuente.

Las fuentes de íconos son populares y pueden ser fáciles de usar, pero tienen algunas desventajas en comparación con los íconos SVG:

• Son gráficos vectoriales que se pueden escalar de forma infinita, pero pueden suavizado, lo que da como resultado iconos que no son tan nítidos como se esperaba.
• Estilos limitados con CSS
• El posicionamiento de píxeles perfecto puede ser difícil, dependiendo de la altura de la línea, espaciado entre letras, etc.
• No son semánticas y pueden ser difíciles de usar en lectores de pantalla o con otras tecnologías de asistencia.
• A menos que tengan un alcance adecuado, pueden dar como resultado archivos de gran tamaño para usar únicamente un pequeño subconjunto de los iconos disponibles.

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

Probar

Hay cientos de fuentes de íconos gratuitas y pagas disponibles, incluidas las de Fonts Excelente, Pictos y glifos.

Asegúrate de equilibrar el peso de la solicitud HTTP adicional y el tamaño del archivo con la necesidad de los iconos. Por ejemplo, si solo necesitas un puñado de iconos, puede ser mejor usar una imagen o un objeto de imagen.

Optimiza las imágenes para mejorar el rendimiento

Las imágenes suelen representar la mayoría de los bytes descargados y también suelen ocupar una cantidad significativa del espacio visual en la página. Como resultado, la optimización A menudo, las imágenes pueden generar algunos de los mayores ahorros de bytes y rendimiento mejoras para tu sitio web: cuantos menos bytes deba descargar el navegador, menor será la competencia por el ancho de banda del cliente. navegador puede descargar y mostrar todos los recursos.

Resumen

• No elija un formato de imagen al azar, sino que comprenda los diferentes disponibles y usen el formato que mejor se adapte.
• Incluye herramientas de optimización y compresión de imágenes en tu flujo de trabajo para reducir tamaños de archivos.
• Disminuye la cantidad de solicitudes HTTP colocando las imágenes de uso frecuente en de imágenes.
• Para mejorar el tiempo de carga inicial de la página y reducir su peso inicial, considera cargar las imágenes solo después de que se hayan desplazado a la vista.

Elige el formato correcto

Hay dos tipos de imágenes que debes considerar: imágenes vectoriales o bien imágenes de trama. Para imágenes de trama, también debes elegir el formato de compresión correcto, por ejemplo: GIF, PNG, JPG.

Las imágenes de trama, como fotografías y otras imágenes, se representan como una cuadrícula. de puntos o píxeles individuales. Por lo general, las imágenes de trama provienen de una cámara o escáner, o se puede crear en el navegador con el elemento canvas. Como El tamaño de la imagen aumenta, al igual que el del archivo. Cuando se escalan más que su tamaño original, las imágenes de trama se ven borrosas porque el navegador debe adivinar cómo rellenar los píxeles que faltan.

Las imágenes vectoriales, como logotipos y arte lineal, se definen mediante un conjunto de curvas, líneas, formas y colores de relleno. Las imágenes vectoriales se crean con programas como Adobe Illustrator o Inkscape y se guarda en un formato vectorial como SVG Dado que las imágenes vectoriales se basan en simples, se pueden escalar sin pérdida de calidad o en el tamaño del archivo.

A la hora de elegir el formato adecuado, es importante que tengas en cuenta origen de la imagen (de trama o vector) y el contenido (colores, animación, texto, etcétera). Ningún formato se adapta a todos los tipos de imagen, y cada uno tiene sus propias ventajas. y debilidades.

Comienza con estas pautas cuando elijas el formato adecuado:

• Usa JPG para las imágenes fotográficas.
• Usa SVG para arte vectorial y gráficos de colores sólidos, como logotipos y arte lineal. Si el arte vectorial no está disponible, prueba con WebP o PNG.
• Usa PNG en lugar de GIF, ya que permite incluir más colores y ofertas de mejor calidad. proporciones de compresión.
• Para animaciones más largas, considera usar <video>, que proporciona una mejor imagen calidad y le da al usuario control sobre la reproducción.

Reduce el tamaño del archivo

Puede reducir considerablemente el tamaño del archivo de imagen realizando un “procesamiento posterior”. las imágenes después de guardar. Existen varias herramientas de compresión de imágenes: pérdida sin pérdida, en línea, GUI y línea de comandos. Cuando sea posible, es mejor intentar la optimización automática de imágenes de manera que esté integrada en tu en el flujo de trabajo.

Hay varias herramientas disponibles que realizan una compresión más profunda y sin pérdidas en JPG. y PNG sin afectar la calidad de la imagen. Durante JPG, prueba jpegtran o jpegoptim (disponible solo en Linux; ejecutar con la opción --strip-all). Durante PNG, prueba OptiPNG o PNGOUT.

Cómo usar objetos de imagen

El uso de símbolos de CSS es una técnica en la que se combinan varias imágenes en una sola "hoja de objeto" imagen. A continuación, puedes usar imágenes individuales especificando la imagen de fondo para un elemento (la hoja de objeto), más un desplazamiento para mostrar la la parte correcta.

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px;
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

Probar

El uso de objetos de objeto tiene la ventaja de reducir la cantidad de descargas varias imágenes y, al mismo tiempo, habilitar el almacenamiento en caché.

Considera la carga diferida

La carga diferida puede acelerar significativamente la carga en páginas largas que incluyen muchas imágenes en la parte inferior de la página cargándolas según sea necesario o cuando la se terminó de cargar y renderizar el contenido. Además del rendimiento mejoras, el uso de la carga diferida puede crear experiencias de desplazamiento infinitos.

Ten cuidado cuando crees páginas con desplazamiento infinito, ya que el contenido se carga como se hace visible, es posible que los motores de búsqueda nunca vean ese contenido. Además, usuarios que buscan información que esperan ver en el pie de página el pie de página porque siempre se carga contenido nuevo.

Evita las imágenes por completo

A veces, la mejor imagen no es en realidad una imagen. Siempre que sea posible, utiliza funciones nativas del navegador para proporcionar imágenes iguales funcionalidad. Los navegadores generan elementos visuales que antes habrían sido imágenes de contenedores. Esto significa que los navegadores ya no necesitan descargar imágenes y, así, evitar las imágenes con tamaños extraños. Puedes usar Unicode fuentes de iconos para renderizar iconos.

Colocar texto en lenguaje de marcado en lugar de incorporarlo en imágenes

Siempre que sea posible, el texto debe ser texto y no debe incorporarse en imágenes. Para Por ejemplo, puedes usar imágenes para los títulos o colocar información de contacto, como números telefónicos o direcciones, directamente en imágenes, evita que los usuarios copiar y pegar la información; hace que la información sea inaccesible para lectores de pantalla y no responde. En su lugar, coloca el texto en tu lenguaje de marcado y, si es necesario, usar fuentes web para lograr el estilo que necesitas.

Cómo usar CSS para reemplazar imágenes

Los navegadores modernos pueden usar funciones de CSS para crear estilos que anteriormente habrían imágenes requeridas. Por ejemplo, los gradientes complejos se pueden crear con el La propiedad background, se pueden crear sombras con box-shadow y se pueden redondear se pueden agregar esquinas con la propiedad border-radius.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sentado Pellentesque amet augue eu magna scelerisque porta ut ut dolor. Nullam placerat egestas nisl sed sollicitudin. Placerat de Fusce, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis Ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
    div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
    }
</style>

Ten en cuenta que estas técnicas requieren ciclos de renderización, puede ser significativo en los dispositivos móviles. Si las usas en exceso, perderás cualquier beneficio que puedas y puede entorpecer el rendimiento.