Tecnología

Hazmeweb Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

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.



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.

Fuente: este post proviene de Hazmeweb, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Comercio local online

Lo que aporta una web a tu comercio tradicional La tienda online no es sino una herramienta más que esta disponible para el comercio de proximidad, la mayoría de los posibles clientes de tu tienda, ca ...

¿Porqué necesito una web?

Si estas aquí seguro que te has hecho la pregunta ¿porqué necesito una web? Un amigo publicista siempre me decía: En  los medios  si no estas, es que no existes... Esta frase cobra mayor importancia ...

Usabilidad Web

Cuando nos ponemos manos a la obra con nuestro proyecto web una característica por la que cualquier usuario debe definirlo es FACIL Definición de objetivos Como ya he dicho en otras ocasiones lo prim ...

Recomendamos

Relacionado

formatos imagenes para web jpeg png ...

Formatos de imágenes para web

Uno de los documentos más interesantes que se puede utilizar en un documento HTML son las imágenes. Cuando se inserta una imagen en un documento HTML, dicha imagen debe existir en un formato electrónico determinado. Existen distintos formatos, los más utilizados en internet son: Formato GIF Fue desarrollado por CompuServe en 1987 (antes de la creación de HTML) para dotar de un espacio de imagen a ...

general blogs herramientas ...

Herramientas para comprimir las imágenes de tu sitio web.

Comprime las imágenes de tu sitio web y aumenta la velocidad de carga. En notas anteriores, hemos hablado sobre la gran importancia que tiene el manejo de las imágenes en la comunicación de las ideas, a través de nuestro sitio web o blog. El material gráfico es de gran importancia hoy en día y que nos ayuda a crear mensaje más eficientes. Sin embargo el tener muchas imágenes en nuestro sitio web ...

web 2.0 Servicios Web blogs ...

Herramientas para comprimir las imágenes de tu sitio web.

Comprime las imágenes de tu sitio web y aumenta la velocidad de carga. En notas anteriores, hemos hablado sobre la gran importancia que tiene el manejo de las imágenes en la comunicación de las ideas, a través de nuestro sitio web o blog. El material gráfico es de gran importancia hoy en día y que nos ayuda a crear mensaje más eficientes. Sin embargo el tener muchas imágenes en nuestro sitio web ...

internet herramientas web cloudconvert ...

Convertidor de formatos online – CloudConvert

Regularmente cuando trabajamos con diversos archivos que nos pasan algunos compañeros, se puede dar el caso en que necesitemos convertir dichos archivos a otros formatos para una mejor visualización o bien para que el usuario final pueda leerlo. Es en este punto donde recurrimos a alguna aplicación para realizar dicha tarea. En esta ocasión te presento una opción bastante útil ya que cuenta con la ...

internet herramientas web cloudconvert ...

Convertidor de formatos online – CloudConvert

Regularmente cuando trabajamos con diversos archivos que nos pasan algunos compañeros, se puede dar el caso en que necesitemos convertir dichos archivos a otros formatos para una mejor visualización o bien para que el usuario final pueda leerlo. Es en este punto donde recurrimos a alguna aplicación para realizar dicha tarea. En esta ocasión te presento una opción bastante útil ya que cuenta con la ...

rendimiento

Mejora el rendimiento de tu web optimizando sus imágenes

Optimizar las imágenes, en términos de rendimiento web consiste en hacer que, sin perder su calidad, ocupen menos espacio en KB para que su descarga desde el servidor al navegador del cliente sea lo más rápida posible. Analizaremos varias formas de optimización de imágenes. En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio we ...

sin categoría

Formatos de contenido Realidad Virtual

Segundo desafío con la Realidad Virtual #VRMooc Por fin llegaron mis nuevas gafas de la marca Aukey, para experimentar con la Realidad Virtual. Son ligeras, compactas, de plástico duro. La almohadilla situada en el visor es de espuma suave y se ajusta a la cara. Las correas de sujeción son de velcro y ajustables.El teléfono (he probado con un Nexus 4 y con un Oneplus) encaja fenomenal, y las vento ...

compresor de imágenes vía web técnica fotográfica

Impresionante compresor de imágenes vía web

TinyPNG es un nuevo servicio gratuito de compresión de imágenes online que, vistas sus características técnicas y su sencillez de uso va a plantar cara a otros servicios similares.Con tan sólo visitar su web y arrastar la imagen al recuadro señalado, el panda se encargará de adelgazar los kilobytes de las imágenes SIN PÉRDIDA DE CALIDAD hasta un 60% gracias a una serie de complejos algoritmos de c ...

móviles tablets comunicación ...

Negrita, color y otros formatos en los correos de Gmail

Para una mejor visualización con títulos, formatos y sin publicidad entre líneas accede a la publicación original Vamos a darle caña una vez más a Gmail y es que la opción que os muestro hoy está un pelín escondida y por eso no todo el mundo sabe que puede poner colorines al texto de un correo escrito en el móvil. Gmail es el gestor de correo gratuito de Google que no necesita presentación. Son m ...

Artículos Recientes

Claves para mejorar la Experiencia de Usuario en tu Web

La Experiencia de Usuario a la hora de diseñar un Sitio Web es, hoy por hoy, una de las claves para conseguir atraer visitantes y fidelizar a estos con el fin de que vuelvan a tu Web. Se resume de forma muy sencilla. Si un Usuario no se siente cómodo a la hora de navegar, no sabe dónde pulsar o la información está desordenada y complicada de encontrar, no tengas duda, retrocederá y buscará otro Si ...