Tarea anterior
Fondos8/14
A la lista de tareas
  1. 1. Propiedad background-color
  2. 2. Propiedad background-image
  3. 3. Propiedad background-repeat
  4. 4. Propiedad background-position
  5. 5. Un poco más de background-position
  6. 6. Propiedad background-attachment
  7. 7. Propiedad background
  8. 8. Formato JPEG
  9. 9. Formato PNG-8
  10. 10. Formato PNG-24
  11. 11. Formato GIF
  12. 12. Elementos anidados con fondos
  13. 13. Efectos con fondos repetitivos
  14. 14. Sprites
Siguiente tarea
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Formato JPEG

En las próximas tareas veremos los formatos de imagen más comunes para la web. Y comprenderemos dónde y cómo utilizarlos mejor al crear páginas web.

El primer formato es JPEG. Este formato es bueno para fotos y malo para esquemas, dibujos, textos y gráficos.

Al guardar una imagen en formato JPEG, puede establecer el nivel de calidad. Esto le permite reducir el peso del archivo manteniendo una calidad de imagen suficientemente buena.

Sin embargo, si ajustas el nivel de calidad demasiado bajo, aparecerán artefactos.

JPEG no admite transparencias, por lo que una imagen JPEG es siempre un rectángulo. Puedes simular la transparencia configurando la imagen con el mismo color de fondo que el contenedor de fotos en tu editor de imágenes.

Utiliza JPEG para publicar fotos con la mejor relación tamaño de archivo/calidad.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Formato JPEG</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box box1"> <div class="block"></div> </div> <div class="box box2"> <div class="block"></div> </div> <div class="box box3"> <div class="block"></div> </div> </body> </html>
CSS
.box { width: 300px; height: 140px; margin: 20px auto; box-shadow: 1px 1px 3px #999999; } .box1 { background-color: #2ecc71; } .box2 { background-color: #f1c40f; } .box3 { background-image: linear-gradient(to bottom, #2ecc71, #f1c40f); } .block { height: 134px; background-repeat: no-repeat; background-position: 50% 50%; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. En primer lugar, dar a los elementos con la clase block una imagen de fondo cat_cage.jpg.
    2. A continuación, ajústelos a otra imagen de menor calidad cat_cage_low.jpg.

    © 2023-2025, codigoheroe.com