f Correcto uso y optimización de imágenes en la web - El Maquetador Web, Maquetación Freelance, Curso HTML HTML5 CSS Tutorial Diseño Responsive Adaptable

¿Necesitas Maquetar o Diseñar una web? ... Consulta nuestra sección Maquetación Freelance o solicita presupuesto a elmaquetadorweb@gmail.com

1.7.15

Correcto uso y optimización de imágenes en la web

Lo primero que hay que saber es que todas las imágenes que mostramos a través de una pantalla van a 72pp de resolución (120pp para carteles de grandes dimensiones y 300pp para imprimir).

A continuación vamos a explicar los diferentes formatos de imagen que podemos usar en la web y lo que es mas importante cuando tenemos que usarlos.

Básicamente existen 3 formatos de imágenes que podemos usar:

- GIF > Se usa para imágenes de menos de 256 colores, admite transparencia aunque sea un poco brusca. Es prácticamente igual que el PNG de 8 bits pero pesa más, por lo tanto recomendamos no usarlo.

- PNG 8 Bits admite como máximo 256 colores y transparencia brusca. Pesa menos que un GIF por lo que recomendamos su utilización en detrimento del GIF.

- PNG 24 Bits > Usaremos este formato exclusivamente con imágenes que sean transparentes de mas de 256 colores. Decir que el peso de este tipo de imágenes es muy alto.

- JPG > se utiliza para imágenes de mas 256 colores que no sean transparentes.

En imagen de abajo podemos ver una exportación para web de Adobe Photoshop con los diferentes formatos y pesos.


Al ser una fotografía de más de 256 colores y sin transparencia el formato correcto a elegir es el JPG.

Como podemos observar el PNG-8 se ve mal por que solo admite 256 colores. El PNG-24 ocupa 259,6 KB que es una barbaridad si lo comparamos con los 34,9 KB que ocupa el JPEG.

Como hemos visto, las diferencias entre los formatos es muy grande, y entre los dos tipos de PNG lo es también, por lo que merece la pena probar primero si se ve correctamente en PNG-8, sino lo ponemos en PNG-24.

Si lo que queremos son compresiones más extremas con los PNG podemos usar herramientas como PNGGauntletpngquant o pngoo





2 comentarios:

  1. Todo correcto. pero hay formato mas en discordia: WebP. En markha lo estamos usando y nos está dando bastante buemos resultados.

    ResponderEliminar
  2. Todo correcto con el WebP. Pero sólo es soportado por Chrome y Opera... Nada todavía con Internet Explorer y Firefox.

    Si podés asegurar que todos tus usuarios son Chrome / Opera adelante.. Caso contrario...a seguir utilizando los formatos clásicos.

    ResponderEliminar