Get best of the week

[marcador] Trabajar con imágenes en la web

Una de las decisiones que debe tomar un desarrollador front-end al crear un sitio web se refiere a la elección de cómo incluir imágenes en las páginas web. Este método puede ser usar una etiqueta HTML <img>. Esto puede ser una propiedad CSS backgroundo una etiqueta de <image>elemento <svg>. Elegir el enfoque correcto para trabajar con imágenes es muy importante, ya que esto puede afectar en gran medida el rendimiento y la disponibilidad del proyecto. El material, cuya traducción publicamos hoy, está dedicado al estudio de varias formas de incluir imágenes en páginas web. Aquí, se discutirán las ventajas y desventajas de estos métodos. Además, hablaremos sobre cuándo y por qué se usan generalmente.





Elemento HTML <img>


Un elemento <img>en las versiones más simples de su uso contiene solo el atributo necesario para su correcto funcionamiento src:

<img src="cool.jpg" alt="">

▍ Establecer atributos de ancho y alto


Si el ancho y el alto de la imagen no se ajustan, entonces al cargar la página y luego cargar la imagen, es posible que sea necesario reconstruir el diseño de la página. Para evitar esto, puede establecer los atributos widthy la heightetiqueta <img>:

<img src="cool.jpg" width="200" height="100" alt="">

Aunque este enfoque puede recordar un poco a alguien de la "vieja escuela", por así decirlo, en realidad es bastante útil. Para comprender mejor esto, demostraremos lo anterior con un ejemplo. A saber, le sugiero que vea este breve video .


Marco del video. La imagen de la izquierda no tiene ancho ni alto. Se definen las imágenes de la derecha.

AquíNetworkse muestra la barra de herramientas del desarrolladordelnavegador y se demuestra el proceso de cargar un par de imágenes. Uno de ellos se encuentra a la izquierda, representado por la etiqueta<img>, que atribuyewidthyheightno se establece. En otros valores de estos atributos se establecen.

¿Has notado que en la página el espacio para la imagen correcta está reservado incluso antes de cargar esta imagen? Se trata de los atributos dadoswidthyheight. Presta atención a lo que sucede con los subtítulos de las imágenes durante el proceso de carga. Esta es una demostración clara de la fuerza de los atributoswidthyheight.

→ Aquí hay un ejemplo de trabajo

▍ Ocultar la imagen usando CSS


La imagen se puede ocultar usando CSS. Es cierto que dicha imagen todavía se carga cuando se carga la página. Por lo tanto, al hacerlo, se debe tener precaución. Si es necesario ocultar una determinada imagen, solo se puede usar con fines decorativos.

Aquí está el código CSS que oculta la imagen:

img {
    display: none;
}

Repito: con este enfoque, el navegador descargará la imagen, haciendo esto incluso si resulta ser invisible. El punto aquí es que un elemento <img>se considera un elemento reemplazable , por lo que nuestra capacidad para administrar dicho elemento desde CSS es limitada.

▍Sobre la disponibilidad de contenido


La disponibilidad de las imágenes que se muestran en las páginas con un elemento HTML <img>está garantizada por sus atributos alt. Tal atributo debe contener una descripción clara de la imagen. Esto puede ser muy útil para los usuarios que usan lectores de pantalla.

Sin embargo, si altno es necesario describir la imagen, aún no se recomienda eliminar este atributo. El hecho es que si se hace esto, entonces el contenido del atributo será "expresado" src. Esto es muy malo para la accesibilidad al contenido.

Pero el atributo altes útil no solo en el caso anterior. Si por alguna razón la imagen no se carga y tiene un atributoalt, se mostrará el texto de este atributo en lugar de la imagen. Quiero ilustrar lo anterior con el siguiente ejemplo.

Tenemos un par de imágenes:

<img class="food-thumb" width="300" height="200" src="cheescake.jpg">
<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">

El atributo srccontiene una dirección incorrecta para el archivo de imagen; este archivo no puede ser cargado por el navegador. El primero <img>no tiene un atributo alt, y el segundo tiene un atributo en el que se escribe una cadena vacía. ¿Cómo crees que se mostrarán estos elementos en la página?


A la izquierda hay una imagen sin el atributo alt. A la derecha, con el atributo alt vacío.

Debajo de la imagen sin el atributoalt, el espacio de página está reservado, lo que puede confundir al usuario y afectar la disponibilidad de contenido. Y otra imagen ocupa muy poco espacio que se necesita para mostrar el "contenido" de un atributo vacíoalt. Como resultado, se parece más a un punto que a una imagen. Esto sucede debido a la configuración de la propiedad deborderimagen.

Sin embargo, cuandoaltalgo está escritoen el atributo, la imagen se verá diferente.


A la derecha está la imagen en el atributo alt del cual

está escrito el texto. Esto es mucho mejor que nada. Además, si no puede cargar el archivo que se muestra<img>, puede agregarle un pseudo-elemento .

▍ Imágenes receptivas



Imágenes de diferentes tamaños

El elemento<img>es bueno porque puede configurarse de modo que muestre diferentes versiones de la imagen en las áreas de visualización de la página de diferentes tamaños. Esto, por ejemplo, puede usarse para imágenes usadas en artículos.

Un conjunto receptivo de imágenes se puede personalizar de dos maneras.

1. atributo srcset


Aquí está el código de imagen que usa el atributo srcset:

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">

Este es un ejemplo simple. No lo considero una solución ideal srcsetpara describir imágenes de diferentes tamaños que se muestran en pantallas con diferentes características. El hecho es que en tal situación, la última palabra permanece con el navegador, y el desarrollador no puede influir en la elección del navegador.

2. Elemento de imagen HTML


Aquí está el código que usa el elemento <picture>:

<picture>
  <source srcset="large.jpg" media="(min-width: 800px)" />
  <source srcset="medium.jpg" media="(min-width: 500px)" />
  <img src="small.jpg" />
</picture>

Otra opción para crear imágenes receptivas es usar un elemento <picture>. Este enfoque me gusta más porque es más simple y porque brinda resultados más predecibles.

Aquí hay un proyecto de demostración para esta sección.

▍ Cambiar el tamaño de las imágenes



A la izquierda hay una imagen que no tiene un conjunto de propiedades de ajuste de objetos CSS. A la derecha hay una imagen que tiene esta propiedad establecida con

propiedades CSSobject-fityobject-positionson excelentes herramientas que puede usar con un elemento<img>. Nos dan control sobre cómo cambia y se posiciona el contenido de un elemento<img>. Esto es similar a trabajar con una propiedad CSSbackground.

La propiedadobject-fitpuede tener los siguientes valores:fill,contain,cover,none,scale-down.

Aquí se explica cómo usarlo:

img {
    object-fit: cover;
    object-position: 50% 50%;
}

Ahora que hemos descubierto un poco el elemento <img>, es hora de seguir adelante y dominar la próxima técnica de manipulación de imágenes.

Imágenes de propiedad CSS


Cuando use la propiedad CSS para mostrar imágenes background, necesita que esta propiedad se aplique a un elemento con cierto contenido, o a un elemento que tenga dimensiones. Por lo general, el área principal de uso de esta propiedad son los elementos decorativos.

▍ Cómo usar la propiedad de fondo CSS


Para usar la propiedad CSS background, primero necesitamos un elemento:

<div class="element">Some content</div>

Entonces necesitas un estilo:

.element {
    background: url('cool.jpg');
}

▍ Establecer varias imágenes en la propiedad de fondo


Una buena característica de las imágenes que se muestran con las propiedades CSS backgroundes que puede haber varias imágenes de este tipo. Estas imágenes se pueden manipular usando CSS:

.element {
    background: url('cool-1.jpg'), url('cool-2.jpg');
}

▍ Ocultar la imagen


Con CSS, puede ocultar y mostrar imágenes en un área de visualización específica. Al mismo tiempo, las imágenes que no se mostrarán no se cargarán. Si la imagen en CSS no está configurada como visible, entonces no se cargará. Esta es una ventaja adicional de la propiedad CSS backgroundsobre el elemento <img>.

@media (min-width: 700px) {
    .element {
        background: url('cool-1.jpg');
    }
}

Este ejemplo describe una imagen de fondo que se muestra solo cuando el ancho de la ventana gráfica es mayor 700px.

▍Sobre la disponibilidad de contenido


Si las imágenes que se muestran con la propiedad CSS backgroundno se usan correctamente, esto puede dañar la accesibilidad del contenido. Por ejemplo, la accesibilidad puede verse afectada mediante el uso de dicha imagen para marcar un artículo, lo cual es vital cuando se trabaja con un artículo.

▍ Dificultades para cargar imágenes de fondo por parte de usuarios habituales


Los usuarios comunes saben que si necesita guardar una determinada imagen, simplemente haga clic derecho sobre ella y seleccione el comando de menú contextual apropiado. Puede parecerle divertido, pero con imágenes configuradas con la propiedad CSS background, esta técnica no funciona. Dicha imagen no se puede cargar de la manera habitual. Para descargarlo, deberá examinar el código del elemento en las herramientas del desarrollador y utilizar el enlace desde url.

▍ Pseudo Elementos


Los pseudo elementos también se pueden usar con imágenes definidas por la propiedad CSS background. Por ejemplo, para mostrar una imagen encima de otra. En el caso de un elemento, <img>esto solo se puede lograr utilizando un elemento adicional superpuesto a otro elemento.

Ahora hablemos sobre el uso de imágenes SVG

Imágenes SVG


La principal fortaleza de las imágenes SVG es la capacidad de escalarlas sin perder calidad. Además <svg>, además de las imágenes SVG , un elemento también puede mostrar archivos JPG y PNG. Aquí está el código HTML para la imagen SVG:

<svg width="200" height="200">
  <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>


Imagen JPG mostrada por medio del elemento SVG ¿

Presta atención al atributopreserveAspectRatio? Gracias a él, la imagen ocupa todo el ancho y la altura del elemento<svg>, sin estirarse y no contraerse.

Si el ancho del elemento es<image>mayor, llenará el elemento padre (<svg>) en ancho, pero no se estirará.


La imagen no se estira.

Esto es muy similar a cómo funcionan las propiedades CSSobject-fit: coverobackground-size: cover.

▍Sobre la disponibilidad de contenido


Si hablamos sobre la disponibilidad de contenido cuando utilizamos imágenes SVG, puedo decir que tal conversación me recuerda inmediatamente a un elemento <title>. A continuación se muestra un ejemplo de un código en el que <svg>se agrega el siguiente elemento a la salida de la imagen :

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

Aquí, además, puede usar el elemento <desc>:

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <desc>A meaningful description about the image</desc>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

▍Dificultades para cargar imágenes <svg> por usuarios habituales


La imagen que se muestra con la ayuda <svg>, solo puede descargarla analizando su código y accediendo al enlace de la imagen. Esto es un inconveniente, pero si alguien quiere limitar la capacidad de los usuarios comunes para descargar imágenes, esta característica puede ser útil. Como mínimo, esto reducirá las posibilidades de descargar dicha imagen.

→ Aquí hay un ejemplo para esta sección

Escenarios para usar diferentes métodos de salida de imagen


▍Sección de página mostrada en la parte superior


Cuando se diseña la sección de la página ubicada en su parte superior (dicha sección se llama “Sección del héroe”), a veces es necesario hacer que muestre una imagen, además de la cual se muestran un encabezado y otros datos sobre la página. Puede parecerse a lo siguiente.


La parte superior de la página con la imagen y las inscripciones

Preste atención al hecho de que hay una imagen de fondo. ¿Cómo desarrollarías una sección de esta página? Pero, antes de responder esta pregunta, permítame formular algunos requisitos:

  • La imagen debe admitir un cambio dinámico fácil al integrar la página con el CMS de fondo.
  • Se debe colocar un elemento sobre la imagen para simplificar la lectura del texto.
  • Es necesario admitir la salida de imagen en tres tamaños: pequeño, mediano y grande. Cada uno de ellos está destinado a su propia área de visualización.

Antes de proceder a la solución de este problema, nos preguntamos sobre la naturaleza de la imagen de fondo que se utilizará aquí. Aquí hay algunas preguntas de apoyo para ayudarnos a llegar al fondo de esto:

  1. ¿Es importante la imagen desde el punto de vista del usuario, o no perderá nada si no es visible?
  2. ¿Es necesario mostrar esta imagen en áreas de visualización de todos los tamaños?
  3. ¿Es esta imagen estática, o está cambiando dinámicamente (desde CMS, por ejemplo)?

Considere un par de opciones para resolver este problema.

La primera solución al problema.


Usando una propiedad CSS backgroundcon varias imágenes definidas en ella, una de ellas se puede usar para un elemento superpuesto en la imagen principal, y la otra para representar la imagen misma. Echa un vistazo a este CSS:

.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var('landscape.jpg');
    background-repeat: no-repeat;
    background-size: 100%, cover;
}

Este enfoque le permite lograr lo background-imageque desea, puede cambiarlo usando JavaScript:

<section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
  <!-- Hero content -->
</section>

backgroundDefiní la propiedad en un estilo incrustable. Aunque este es un código que funciona, se ve mal y no es práctico.

¿Tal vez pueda usar variables CSS aquí?

<section class="hero" style="--bg-url: url('landscape.jpg')">
  <!-- Hero content -->
</section>

Aquí está el resultado de un estudio de estilo.


Estudie el estilo del elemento

Ahora, para cambiar la imagen de fondo, solo necesitamos cambiar la variable--bg-url. Esto es un millón de veces mejor que los estilos en línea.

Análisis


  1. La solución propuesta al problema aquí solo es buena si la imagen no es particularmente importante.
  2. Puede ser adecuado si la imagen no se planea cambiar dinámicamente, utilizando el CMS utilizado en el backend del proyecto.

→ Aquí hay un ejemplo de trabajo

La segunda solución al problema.


Aquí usaremos herramientas de salida de imágenes HTML:

<section class="hero">
  <h2 class="hero__title">Using Images in CSS</h2>
  <p class="hero__desc">An article about which and when to use</p>
  <img src="landscape.jpg" alt="">
</section>

En CSS, debe ajustar el posicionamiento absoluto de la imagen colocándola debajo del texto. Además, aquí necesitamos un pseudo-elemento que desempeñará el papel del elemento superpuesto en la imagen:

.hero {
    position: relative;
}

.hero img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

Esta solución es buena porque al usarla es muy fácil cambiar el atributo de imagen src. Además, es mejor para el caso cuando la imagen de salida es importante.

Además, noto que me gusta de las <img>imágenes que, al usarlas, puede usar mecanismos de respaldo que funcionan si el archivo de imagen no se carga. Tal mecanismo auxiliar, por ejemplo, la salida en lugar de una imagen de un fondo de color simple, al menos permitirá a los usuarios leer el texto:

.hero img {
    /*   */
    background: #2962ff;
  }


El color de fondo se muestra si la imagen no se carga.

Lo bueno es que el color de fondo se muestra solo si la imagen no se carga. Nos vendrá bien.

→ Aquí hay un ejemplo de trabajo

▍ Logo del sitio web


El logo es muy importante. Los logotipos agregan singularidad a los sitios. Para mostrar un logotipo en una página, podemos recurrir a varias posibilidades:

  • Un elemento <img>que muestra una imagen PNG, JPG o SVG.
  • Imagen SVG incorporada.
  • Imagen de fondo.

Hablemos sobre la forma de mostrar las imágenes que se deben usar para los logotipos y cómo elegir exactamente lo que necesita.

Logotipo con muchos detalles.


Si el logotipo tiene muchos detalles o contiene muchas formas, mostrarlo usando la imagen SVG incorporada puede no ser una buena idea. En tal situación, recomiendo usar una etiqueta <img>mediante la cual se muestre una imagen PNG, JPG o SVG.


Logotipos varios

Aquí está el código para mostrar un logotipo similar almacenado en formato SVG:

<a href="#"><img src="logo.svg" alt="Nature Food"></a>

Logotipo simple para animar



Logotipo animado simple

Considere una situación en la que hay un logotipo simple que contiene una determinada figura o texto. Cuando pasa el cursor sobre él, debe cambiar el color de la forma y el texto. ¿Cómo hacerlo? Me parece que en esta situación es mejor usar la imagen SVG integrada:

<a href="#">
    <svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
    </svg>
</a>

Aquí están los estilos:

.logo rect,
.logo text {
  transition: 0.3s ease-out;
}

.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}

Aquí hay un proyecto de demostración para esta sección:

Logotipo receptivo


Cuando pensé en logotipos receptivos, recordé el logotipo de Smashing Magazine. Me gusta cómo cambia su tamaño. Aquí hay un diseño que ilustra el logotipo básico y el logotipo que se muestra en grandes áreas de visualización.


Logotipo receptivo

Para implementar este comportamiento<picture>de logotipo, esideal un elementoque le permita describir dos versiones del logotipo:

<a class="logo" href="/">
    <picture>
      <source media="(min-width: 1350px)" srcset="sm-logo--full.svg"><img src="sm-logo.svg" alt="Smashing Magazine"></picture>
  </a>

En CSS, debe cambiar el ancho del logotipo en caso de que el ancho de la ventana gráfica sea igual o mayor 1350px:

.logo {
  display: inline-block;
  width: 45px;
}

@media (min-width: 1350px) {
  .logo {
    width: 180px;
  }
}

Ante nosotros hay una solución simple y comprensible para el problema de los logotipos receptivos.

→ Aquí hay un ejemplo de trabajo para esta sección

Logo con degradado



Un ejemplo de un logotipo con un degradado

Al trabajar con logotipos que tienen un degradado, debe tener en cuenta que exportar dicho logotipo desde una aplicación de diseño, como Adobe Illustrator o Sketch, puede estar lejos de ser perfecto. Durante este proceso, algo en el logotipo puede romperse.

Al usar el formato SVG, puede aplicar fácilmente un color degradado al logotipo. En el siguiente ejemplo, utilicé<linearGradient>, configurando con él el atributo de textofill:

<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
        <stop offset="0%" stop-color="#4a7def"></stop>
        <stop offset="50%" stop-color="#ab4787"></stop>
      </linearGradient>
    </defs>
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
</svg>

→ Aquí hay un ejemplo

▍Usuario de avatares


Los avatares vienen en muchas formas, pero generalmente son avatares cuadrados o redondos. En este ejemplo, quiero compartir un consejo importante que puede resultarle útil.

Para comenzar, eche un vistazo al siguiente diseño. Tenga en cuenta que hay dos avatares limpios con bordes claros.


Un par de avatares exitosos

¿Y si el usuario, como avatar, decide usar una imagen con un fondo casi blanco? Si es así, entonces el avatar se verá muy lejos de ser tan bueno.


Avatar fallido

Tenga en cuenta que la imagen anterior muestra un avatar con un fondo muy brillante. Como resultado, para comprender que tiene una forma redonda, hay que mirarlo de cerca. Esto es malo. Para solucionar este problema, debe agregar un borde interno al avatar. Este borde se usará como una solución auxiliar, aplicada cuando la imagen sea demasiado brillante.


A la izquierda hay un avatar con un fondo demasiado claro. A la derecha está el resultado de resolver este problema. Hay

varias formas de resolverlo:

  • Utilizando <img>.
  • Uso <img>y elemento auxiliar <div>.
  • Uso <div>y propiedades CSS background.
  • Usando <image>c <svg>.

¿Qué se ajusta mejor aquí? Vamos a averiguar.

Usando <img>


¿Cómo resolver este problema? Tal vez, ¿solo ajustar el borde del elemento? Estamos explorando esta posibilidad (me disculpo de inmediato por el hecho de que a continuación verán mi foto a menudo).

Aquí está el CSS:

.avatar {
    border: 2px solid #f2f2f2;
}

Así es como se ve.


El resultado no fue el esperado: el borde oscuro se encuentra fuera de los bordes de la imagen.

Lo que sucedió no nos conviene. Necesitamos que la imagen tenga un borde interior que se fusione con la imagen oscura. Como resultado, resulta que establecer el borde del elemento no nos ayudará aquí.

Usando <img> y el ayudante <div>


Permítame recordarle que nos enfrentamos a la tarea de agregar una sombra interior a la imagen. No podemos resolver este problema utilizando la sombra interna ( box-shadow) y la palabra clave inset, ya que los elementos HTML <img>no admiten la sombra interna. Para resolver este problema, debe colocar un avatar en un elemento <div>y usar otro elemento, cuyo único propósito es dibujar un borde interno.

Aquí está el código HTML:

<div class="avatar-wrapper">
     <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
     <div class="avatar-border"></div>
</div>

Aquí están los estilos:

.avatar-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
}

.avatar-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

Si el elemento <div>tiene un borde pintado en un 10% de negro, esto garantizará que dicho borde no sea visible en la imagen oscura y se note en la luz, resaltando su borde. Así es como se ve.


El borde interior, visible solo en imágenes brillantes

→ Aquí hay un ejemplo para esta sección

Usando <div> y la propiedad de fondo CSS


Si usara un elemento para mostrar el avatar <div>, probablemente significaría que la imagen juega un papel decorativo. Me viene a la mente un ejemplo, que se muestra a continuación. Aquí, varios avatares están simplemente dispersos por la página.


Avatares diseminados por la página. El

HTML aquí será:

<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>

Aquí está el estilo:

.avatar {
  background: var(--img-url) center/cover;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}

Aquí puedes encontrar un ejemplo de trabajo.

Usando <image> en <svg>


Creo que esta es la solución más interesante para nuestro problema. Descubrí este truco mientras estudiaba el nuevo diseño de Facebook.

Aquí está el marcado:

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <circle cx="18" cy="18" fill="white" r="18"></circle>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <circle cx="18" cy="18" r="18"></circle>
  </g>
</svg>

Primero, analicemos este código. Esto es lo que es:

  1. Una máscara recortando una imagen circular.
  2. El grupo al que se aplica la máscara.
  3. La imagen misma con el atributo preserveAspectRatio=«xMidYMid».
  4. Un círculo que se usa como borde interno.

Así es como está diseñado:

circle {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

→ Aquí puedes encontrar un ejemplo

Con los avatares, lo descubrimos. Por lo tanto, seguimos adelante.

▍ Campo de entrada con icono


Aquí hay un ejemplo de un campo de entrada con un icono.


Campo de entrada con un icono

Tales campos son bastante comunes. ¿Cómo equipar un campo con un icono? ¿Qué sucede cuando tal campo recibe foco? Explore estos problemas.

Aquí está el código HTML:

<p>
    <label for="name">Full name</label>
    <input type="text" id="name">
</p>

Creo que la mejor solución a este problema es usar imágenes de fondo definidas por CSS. Es simple, rápido y no requiere elementos HTML adicionales:

input {
    background-color: #fff;
    background-image: url('user.svg');
    background-size: 20px 20px;
    background-position: left 10px center;
    background-repeat: no-repeat;
}

Puede usar una imagen SVG codificada en URL para cambiar el color del icono cuando el campo recibe el foco. Es muy fácil de hacer. Por ejemplo, esta herramienta está diseñada para este propósito , desarrollada por Yoksel.

Aquí hay un ejemplo.

▍Estilos CSS para imprimir


Un visitante de la página puede necesitar imprimirlo en una impresora. Suponga que hay una receta culinaria en la página y necesita imprimirla para que en la cocina no tenga que mirar constantemente su teléfono o computadora.

Si hay pasos en la receta ilustrados con imágenes, es importante que caigan en su versión impresa, de lo contrario, el que imprima la página no podrá usar la receta.

Intente no incluir en páginas destinadas a imprimir imágenes que se muestran con el fondo de propiedad CSS


Si la imagen se incluye en la página con la propiedad CSS background, no se imprimirá. El lugar donde se mostró estará vacío al imprimir. De esto es de lo que estoy hablando.


Espacios vacíos en lugar de imágenes incluidas en la página usando la propiedad de fondo CSS

Habrá poco uso para una versión impresa de la receta. Esto se puede solucionar forzando al navegador a mostrar imágenes similares en la versión impresa de la página. Pero este enfoque no funciona en Firefox y en IE. Así es como se ve en CSS:

.element {
    background: url('cheesecake.png') center/cover no-repeat;
    -webkit-print-color-adjust: exact; /*        */
}

En tales situaciones, es mejor usar un elemento HTML <img>. Las imágenes incluidas en la página con este elemento se imprimen sin problemas.

→ Aquí hay un ejemplo

Resumen


Hoy hablamos sobre diferentes formas de incluir imágenes en páginas web, discutimos sus pros y sus contras, y examinamos escenarios para su uso. Esperamos que encuentre útil lo que aprendió hoy.

¡Queridos lectores! ¿Ha encontrado problemas para mostrar imágenes en páginas web?

More articles:


All Articles