Developah: ¿Poner una imagen en HTML? ¡Claro que sé hacerlo! ¡Eso lo sabe hacer todo el mundo!

🧵Abro hilo.
A ver, maticemos un poco antes de que me caigan encima, que puede sonar prepotente.

En HTML suelen pasar dos cosas:

✅Es MUY FÁCIL hacer algo.
✅Es DIFÍCIL hacerlo correctamente.

¿Cómo pondrías una imagen?
— Fácil. Uso etiqueta `<img>` y en el atributo `src` pongo la imagen.
✅¿Funciona? Sí
❌¿Es correcto? No

En HTML, TODAS las etiquetas `<img>` deben tener el atributo `alt`, donde se debe especificar un «texto alternativo» de reemplazo por si, por alguna razón, las imágenes no están disponibles, se muestre dicho texto.
✅¿Ahora tiene los atributos obligatorios? Sí
❌¿Es correcto? No

Movidos por el afán SEO (posicionarse en buscadores), una mala estrategia (muy común) es colocar una lista de palabras clave.

El objetivo de `alt` es proporcionar una frase alternativa (con sentido) a la imagen.
⁉️ ¿Y si la imagen no necesita una descripción?
Quizás deberías considerar si se trata de elementos de decoración y sería mejor colocarla con CSS.

Una forma de mejorar el SEO, en lugar de añadir palabras clave de forma indiscriminada, mejora el nombre de la imagen.
✅¿Mejor? Sí
✅¿Se podría mejorar? También

Podemos usar las siguientes etiquetas:

`<figure>` engloba el conjunto visual
`<figcaption>` asocia información al contenido visual

No tiene que usarse necesariamente con imágenes: también videos, fragmentos de código, etc...
✅¡Esto tiene mejor pinta! Sí
❌¿Hemos terminado? Para nada

Es importante saber que formato es el más adecuado que podemos usar para nuestras imágenes. Y esto depende de lo que se muestra en ellas.

En este caso usamos JPG (muy común), pero no es el mejor para todos los casos.
Hay muchos formatos interesantes hoy en día. Cito los más relevantes:

✅SVG
✅PNG
❌GIF -> MP4 ó APNG
✅APNG

✅JPG
❌JPEG2000 -> JPG ó WebP
❌JPEG-XR -> JPG ó WebP
✅WebP
🟧AVIF
🟧JPEG-XL

Más información:
lenguajehtml.com/html/multimedi…
Formatos menos conocidos como APNG (PNG animado), WebP (alternativa a JPG con soporte de transparencia y animación) o AVIF y JPEG-XL (mejoras del JPG clásico) son buenas opciones, pero algunos navegadores podrían no soportarlos, y no podemos permitir eso...
Así que vamos a usar `<picture>` para indicar fallbacks:

—Si el navegador soporta AVIF, lo usa
—Si no lo soporta, intenta con JPEG XL.
—Si no lo soporta, intenta con WebP.
—Si no soporta ninguno, usa un `<img>` normal.

—Si no soporta imágenes (lector de voz), usa texto `alt`.
✅¡Oye, esto está genial! Sí
❌¿Perfecto, no? Que va

Imagina que tienes una página-galería con >50 imágenes HD. Sería ideal que el navegador sólo cargue imágenes a medida que se hace scroll (lazy load).

Existe atributo `loading="lazy"` en `<img>` e `<iframe>` para ello:
Sin embargo, mucho ojo al soporte actual.

—No está soportado en Internet Explorer
—Firefox no lo soporta en `<iframe>` aún
—Safari no lo tiene activado por defecto

Existe un polyfill que puede ser interesante para casos en los que se necesite soporte:
github.com/mfranzke/loadi…
❌¿Ya estaría, no? Nope

Una buena recomendación en etiquetas de imagen es incluir atributos `width` y `height` con las dimensiones específicas de la imagen.

Esto permite al navegador conocer el tamaño antes de descargar la imagen y evitar saltos en la página mientras carga.
❌¿YA?

En la cabecera de la página HTML (etiqueta `<head>`) puedes incluir una etiqueta `<link rel="preload">` donde indicar al navegador que precargue una imagen (la más grande de la página) previamente, consiguiendo una web más rápida y mejorarando el LCP de Google Web Vitals.
❌QUE SI QUIERE BOLSA, SEÑORA

También existe un atributo `decoding="async"` que se puede utilizar en algunos casos para indicar al navegador que no procese la imagen aún y que lo haga más tarde, aprovechando los recursos en otros detalles y mejorando la velocidad de carga.
Y no sé que más decir...
¿Se ha quedado un buen día, no?
(Silba)
Ah... espera... ¿Todavía sigues ahí?
Yo después de compartir todos estos consejos y ver como se dispara el número de likes y RT del hilo.
Creo que me merezco un follow, ¿no? Estoy en las siguientes redes (a parte de Twitter @Manz ):

🔵Telegram: t.me/ManzDev
🟣Twitch: twitch.tv/ManzDev
🔴Youtube: youtube.com/c/ManzDev
⚫Discord: discord.gg/2psv38AhSA

👇manz.dev

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Manz 🇮🇨⚡👾

Manz 🇮🇨⚡👾 Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Manz

23 Jul
Hace unos días hice una cortinilla para los cambios de escena en Twitch (sin After Effects o programas similares).

Los pasos que seguí:

1. Crear animación con HTML/CSS (JS opcional)
2. Establecer color #00ff00 para fondo a ignorar
3. Grabar en video la animación (ej: con OBS)
Una vez hecho esto, desde una terminal con ffmpeg convertimos el fondo verde (color #00ff00) en transparente:

`ffmpeg -i animation.mkv -filter_complex colorkey=0x00ff00:0.7:0.2 -vb 6000K chroma.webm

El `0.7` es un 70% de semejanza
El `0.2` es usar un 20% de transparencia
Por último, en OBS creamos una transición de tipo `Stinger` y seleccionamos el video que acabamos de crear.

En mi caso la animación es de 3 segundos, por lo que en "Tiempo de tipo de punto de transición" ponemos: `1500` (1,5 segundos). Image
Read 5 tweets
18 Jun
En #CSS, esencialmente, hay tres formas de hacer gradientes o degradados con múltiples colores (2 o más):

1️⃣ Gradiente lineal (en una dirección)
2️⃣ Gradiente radial (forma circular)
3️⃣ Gradiente cónico (cono visto desde arriba)

🧵Abro hilo.
A cada uno de ellos se les puede aplicar ciertas modificaciones...

1️⃣ Dirección (palabra clave o grados)
2️⃣ Forma (círculo por defecto, o elipse)
3️⃣ Desde donde parte (en grados)
Con los porcentajes (o tamaños) tras los colores, puedes indicar un punto de control donde comienza a cambiar el color (hacia el siguiente).
Read 13 tweets
14 Jun
Colección rápida de trucos poco conocidos de #CSS.

🧵Abro hilo. Image
Si tenemos colores donde los pares son repetidos (ej: #334455) se puede simplificar omitiendo el segundo dígito de cada par (#345).

Además, si hay un par más, es el canal alfa (transparencia, también abreviable).

Más sobre colores CSS: Image
Desde selectores #CSS, se pueden seleccionar etiquetas dependiendo de sus atributos HTML.

Por ejemplo, `a[href$=".pdf"]` selecciona todos los enlaces a archivos con extensión `.pdf`, pero `a[href$=".pdf" i]` hace lo mismo sin tener en cuenta mayúsculas/minúsculas. Image
Read 18 tweets
12 Jul 20
Curioso lo que ocurre si desactivas Javascript en tu navegador y comienzas a ver la reacción de ciertas páginas. Esto nos puede ayudar a entender la importancia que se le da hoy a la accesibilidad y lo preparados que estamos para cubrir enfoques progresivos...

🧵Abro hilo...
✔️Twitter nos hace viajar en el tiempo al pasado, circa 2005. La web es funcional, aunque tengo la sensación de que no sólo hemos pasado a no utilizar Javascript, sino casi también a no usar CSS3.
✔️Google. Aprobadísimo. Es perfectamente funcional y adaptado al dispositivo. Sólo en algunas pantallas observas que hemos vuelto a la era de Google+.
Read 16 tweets
27 May 19
Siempre había escuchado quejas de la web de Renfe, y ayer, tras un tweet de @MarkVillacampa, me dio curiosidad por examinar por encima el código Javascript de la web. Lo que verás a continuación te sorprenderá (o no). Abro hilo.
Lo primero, el código JS está sin minificar/ofuscar. Un código JS no tiene porque estarlo, pero al menos sería interesante hacer "strip" de comentarios y eliminarlos. Hay muchos comentarios que pueden ser útiles para el desarrollador, pero no deberían estar en producción.
A lo largo del código Javascript, vemos comentarios de historial de cambios. Se están usando los comentarios como control de versiones. Git llora en una esquina.
Read 15 tweets
25 Feb 19
Guía para crispar el ambiente en un evento tecnológico "trendy" de programación.

Abro hilo.
Si estás en una charla de React o VueJS, lleva una camiseta de Angular. Si es posible, de AngularJS.
Si es una charla de backend, lleva un peluche de PHP y ponlo en la mesa. Y siéntate cerca del ponente. Si es de frontend, también vale uno de Internet Explorer.
Read 26 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(