Optimización de imagenes para Web

Hola a todos, hoy os traigo la practica numero 3 de Ensamblado de Publicaciones Electrónicas sobre la optimización de imágenes para Web.




Optimización a png:

• Otoño: 

Imagen original: posee unas dimensiones de 394 x 270 px, un peso de 311,7 KB, no admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 100%: posee unas dimensiones de 394 x 270 px, un peso de 103,9 KB, admite transparencia, tiene una calidad buena, modo de color RGB y esta en 8 bits.

Imagen a escala 50%: posee unas dimensiones de 197 x 135 px, un peso de 26 KB, admite transparencia, tiene una calidad baja, modo de color RGB y esta en 8 bits.

• Mujer embarazada: 

Imagen original: posee unas dimensiones de 454 x 303 px, un peso de 403 KB, no admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 100%: posee unas dimensiones de 454 x 303 px, un peso de 134,3 KB, admite transparencia, tiene una calidad buena, modo de color RGB y esta en 8 bits.

Imagen a escala 50%: posee unas dimensiones de 227 x 152 px, un peso de 33,7 KB, admite transparencia, tiene una calidad baja, modo de color RGB y esta en 8 bits.

Optimización a jpg:

• Perro:

Imagen original: posee unas dimensiones de 340 x 237 px, un peso de 236,1 KB, admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 100%: posee unas dimensiones de 340 x 237 px, un peso de 236,1 KB, no admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 50%: posee unas dimensiones de 170 x 119 px, un peso de 59,3 KB, no admite transparencia, tiene una calidad baja y modo de color RGB.

• Chica con fruta: 

Imagen original: posee unas dimensiones de 170 x 255 px, un peso de 127 KB, admite transparencia, tiene una calidad buena, modo de color RGB y 8 bits.

Imagen a escala 100% calidad 50%: posee unas dimensiones de 170 x 255 px, un peso de 127 KB, no admite transparencia, tiene una calidad media y modo de color RGB.

Imagen a escala 75% calidad 20%: posee unas dimensiones de 128 x 191 px, un peso de 71,6 KB, no admite transparencia, tiene una calidad baja y modo de color RGB.

• Zanahoria: 

Imagen original: posee unas dimensiones de  472 x 472 px, un peso de 652,7 KB, admite transparencia, tiene una calidad buena, modo de color RGB y 8 bits. 

Imagen a escala 100% calidad 20%: posee unas dimensiones de 472 x 472 px, un peso 652,7 KB, no admite transparencia, tiene una calidad media y modo de color RGB.

Imagen a escala 50% calidad 10%: posee unas dimensiones de 236 x 236 px, un peso de 163,2 KB, no admite transparencia, tiene una calidad baja y modo de color RGB.

Optimización a gif:

• Brainstorm: 

Imagen original:  posee unas dimensiones de 5000 x 3000 px, un peso de 42,9 MB, admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 100%: posee unas dimensiones de 5000 x 3000 px, un peso de 14,3 MB, admite transparencia, tiene una calidad media y modo de color RGB.

Imagen a escala 50%: posee unas dimensiones de 2500 x 1500 px, un peso 3,58 MB, admite transparencia, tiene una calidad media y modo de color RGB.

• Puerta Bonita: 

Imagen original: posee unas dimensiones de 938 x 240 px, un peso de 659,5 KB, no admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 100%: posee unas  dimensiones de 938 x 240 px, un peso de 219,8 KB, admite transparencia, tiene una calidad media, modo de color RGB y admite animaciones.

Imagen a escala 50%: posee unas dimensiones de 469 x 120 px, un peso de 55 KB, admite transparencia, tiene una calidad baja, modo de color RGB y admite animaciones.

Optimización en heredado:

• Bosque: 

Imagen original: posee unas dimensiones de 283 x 283 px, un peso de 234,6 KB, admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen optimizada: posee unas dimensiones de 283 x 283 px, un peso de 78,2 KB, admite transparencia, tiene una calidad baja y modo de color RGB.

Optimización a svg:

• Adventure awaits: 

Imagen original: posee unas dimensiones de 493 x 343 px, un peso de 495,4 KB, no admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 50%: posee unas dimensiones de 247 x 171 px, un peso de 123,7 KB, no admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 35%: posee unas dimensiones de 173 x 120 px, un peso de 60,8 KB, no admite transparencia, tiene una calidad media y modo de color RGB.

• Gato: 

Imagen original: posee unas dimensiones de 417 x 274 px, un peso de 334,7 KB, admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 100%: posee unas dimensiones de 417 x 274 px, un peso de 334,7 KB, no admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 50%: posee unas dimensiones de 209 x 137 px, un peso de 83,9 KB, no admite transparencia, tiene una calidad media y modo de color RGB.

• Bosque svg: 

Imagen original: posee unas dimensiones de 283 x 283 px, un peso de  234,6 KB, admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala 100%: posee unas dimensiones de 283 x 283 px, un peso de 234,6 KB, no admite transparencia, tiene una calidad buena y modo de color RGB.

Imagen a escala  50%: posee unas dimensiones de 141 x 141 px, un peso de 58,2 KB, no admite transparencia, tiene una calidad baja y modo de color RGB.

Opinón: en mi opinión el formato .png es el mejor para subir imágenes a la Web debito a su peso tan bajo permitiría una rapidez y fluidez alta, además de darnos ciertas utilidades que este formato posee.