Formatos de Imagen para web

diseño web, HazmeWeb, Uncategorized / abril 26, 2014

Formatos de Imagen para web

Las imágenes son un componente muy importante de nuestra web/blog harán que sea mas vistosa y más agradable para la vista, pero en ocasiones pueden resultar una pesadilla a la hora de elegir las adecuadas y elegir el formato en el que debemos insertarlas.

Vamos a intentar aclarar un poco los formatos mas habituales, las características y las ventajas de cada uno.

Formatos mas habituales de imagen.

Hay un montón de formatos de compresión de imagen, pero para el diseño web nos centramos en los mas habituales:

.PNG

.GIF

.JPG

 

Formato .PNG

 

Según la wiki, la definición del png es esta:

“PNG (siglas en inglés de Gráficos de Red Portátiles, pronunciadas “ping”) es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes. Este formato fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de contraste y otros importantes datos.”

Este formato permite un ratio de conversión muy alto sin perdida de calidad aparente. PNG es superior a GIF porque soporta una profundidad de color de hasta 16,7 millones de coloresOtra característica del formato es que permite las transparencias.

Se utilizaba mucho antes de la era ADSL, el sistema de carga del PNG facilita el reconocimiento de la imagen en los primeros instantes de la descarga de Internet, pues va mostrando líneas de la misma distribuidas por toda la superficie disponible. Hoy en día con la velocidad de descarga del adsl no es una característica importante, resurgió con el internet en GSM de los móviles pero las velocidades de carga en móvil 3G y 4G hacen que ya no sea una característica importante.

El uso que le damos fundamentalmente ahora es para cargar imágenes sin fondo y que se adapten al fondo de la web.
Ejemplo formato PNG

Formato .GIF

La definición del formato según la wiki es esta:

“GIF es un formato sin pérdida de calidad para imágenes con hasta 256 colores, limitados por una paleta restringida a este número de colores. Por ese motivo, con imágenes con más de 256 colores (profundidad de color superior a 8), la imagen debe adaptarse reduciendo sus colores, produciendo la consecuente pérdida de calidad.”

El principal inconveniente del GIF es su limitada cantidad de color, por eso su uso principal son los dibujo. Su mayor cualidad es que con GIF podemos representar una secuencia de imágenes con un peso muy bajo. Se usa mucho para generar Banners en los que no hay muchos colores.

Otro uso que quizá es por el que mas lo conocemos es para generar secuencias cómicas, ya que debido al poco peso es muy fácil para los navegadores cargarlo y quedan casi como una secuencia de video.

Con la entrada del video “enbebido” mediante HTML (HTML5) se quedo como un formato vintage, en el que se usa para resaltar el lado cómico.Con dibujos todavía se consiguen unos resultados muy artísticos con este formato.

Ejemplo formato GIF

Formato .JPG

JPEG (del ingles Joint Photographic Experts Group, Grupo Conjunto de Expertos en Fotografía) como indica su nombre fue desarrollado por un grupo de expertos en fotografía.

La definición de JPG en wikipedia es esta:

El formato JPEG utiliza habitualmente un algoritmo de compresión con pérdida para reducir el tamaño de losarchivos de imágenes,esto significa que al descomprimir o visualizar la imagen no se obtiene exactamente la misma imagen de la que se partía antes de la compresión. Existen también tres variantes del estándar JPEG que comprimen la imagen sin pérdida de datos: JPEG2000JPEG-LS y Lossless JPEG.

El algoritmo de compresión JPEG se basa en dos fénomenos visuales del ojo humano: uno es el hecho de que es mucho más sensible al cambio en la luminancia que en la crominancia; es decir, capta más claramente los cambios de brillo que de color. El otro es que nota con más facilidad pequeños cambios de brillo en zonas homogéneas que en zonas donde la variación es grande; por ejemplo en los bordes de los cuerpos de los objetos.

Una de las características del JPEG es la flexibilidad a la hora de ajustar el grado de compresión. Un grado de compresión muy alto generará un archivo de pequeño tamaño, a costa de una pérdida significativa de calidad. Con una tasa de compresión baja se obtiene una calidad de imagen muy parecida a la del original, pero con untamaño de archivo mayor.

La pérdida de calidad cuando se realizan sucesivas compresiones es acumulativa. Esto significa que si se comprime una imagen y se descomprime, se perderá calidad de imagen, pero si se vuelve a comprimir una imagen ya comprimida se obtendrá una pérdida todavía mayor. Cada sucesiva compresión causará pérdidas adicionales de calidad. La compresión con pérdida no es conveniente en imágenes o gráficos que tengan textos, líneas o bordes muy definidos, pero sí para archivos que contengan grandes áreas de colores sólidos.”

Este es el formato que mejor define los colores ya que es capaz de darnos una profundidad de color de hasta 24 bit con un rango de compresión variable en función del peso de la imagen.

Hoy en dia es el formato que mas se utiliza ya que lo usan todos los móviles y cámaras y todos los navegadores lo reconocen sin problema.

Formato .PSD

 

Es el formato nativo de Photoshop, este formato guarda capas, por decirlo de alguna forma es el formato de trabajo. Este nos permite guardar la imagen en forma de capas que podremos modificar posteriormente.

Este formato no lo admiten los CMS, solo es para trabajar con el. Cuando hemos terminado de modificar las imágenes en Photoshop elegiremos el formato final en el que vamos a guardar las fotos para posteriormente subirlas a la web.

Es conveniente mantenerlo, ya que nos permitirá mas adelante hacer modificaciones cómodamente en nuestra imagen.

Si no usas photoshop es muy poco probable que te encuentres fotos en este formato.

 

 

Comments (0)

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.