TIPOS DE IMÁGENES
Lossy y Lossless (con perdida / sin perdida). Esto depende del formato de imagen.
- Lossless.- Son formatos sin pérdida, la calidad de imagen no se cambia, las imágenes suelen ser pesadas.
- Lossy.- Perder la calidad, pero se mejora el tamaño y la carga en el navegador.
Las imágenes que pierden calidad llegan a ser más pequeñas pero se cargan más rápido.
Formatos:
- GIF (Graphics Interchange Format): Formato de imagen sin pérdida, no se puede comprimir
- PNG 8 (Portable Network Graphics): Formato de imagen sin pérdida, uso de colores de 256, se utiliza para logotipos e iconos para la página.
- PNG 24 (Portable Network Graphics): Formato de imagen sin pérdida, uso de colores ilimitados, alta calidad, si intentamos comprimir no ayudará demasiado por la gran cantidad de colores.
- JPG / JPEG Photographic Experts Group: Formato de imagen con pérdida, perdemos calidad a la hora de comprimirlas, pero llegan a ser óptimas para la carga en la página web.
- SVG - Vector (Scalable Vector Graphics): Formato de imagen muy ligero sin pérdida, con svg no perdemos calidad ya que esta compuesta por vectores.
Tabla de diferencias:
⠀
OPTIMIZACIÓN DE IMÁGENES
El tamaño óptimo para tus proyectos:
► El tamaño promedio es de 70 kb
Como optimizar:
⠀
ETIQUETA IMG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imágenes</title>
</head>
<body>
<main>
<section>
<figure>
<img src="./pics/tinified/small.jpg" alt="Es una imagen de una computadora.">
</figure>
<figure>
<img src="./pics/tinified/medium.jpg" alt="Es una imagen de una computadora.">
</figure>
<figure>
<img src="./pics/tinified/large.jpg" alt="Es una imagen de una computadora.">
</figure>
</section>
</main>
</body>
</html>
⠀
ETIQUETA FIGURE
Documentación etiqueta <figure>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imágenes</title>
</head>
<body>
<main>
<section>
<figure>
<img
src="./pics/tinified/small.jpg"
alt="Es una imagen de una computadora."
/>
<figcaption>Es una imagen de una computadora</figcaption>
</figure>
</section>
</main>
</body>
</html>
Figure ► es una etiqueta contenedora.
figcaption ► es la etiqueta en la cual se coloca la descripción de la imagen.
⠀
ETIQUETA VIDEO
Documentación etiqueta <video>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video</title>
</head>
<body>
<main>
<section>
<video controls preload="auto">
<source src="./video.mp4#t=10,60" />
<source src="./video.mp3#t=10,60" />
<source src="./video.m4v#t=10,60" />
<source src="./video.avi#t=10,60" />
</video>
</section>
</main>
</body>
</html>
controls ► habilita los botones de reproducción.
preload ► nos ayuda a que el video se renderiza cuando se carga la página.
source ► Es una etiqueta que nos ayuda con la renderización del formato adecuado.
Curso Definitivo de HTML y CSS
COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE
0 Comentarios
para escribir tu comentario
