Problema con escalado de imágenes

[Tigervlc]

Hola, tengo una página de inicio con varias imágenes tabuladas de logotipos de marcas de gafas en formato GIF, en ls cuales si pinchas vas en cada una vas a la sección correspondiente. Para haceros una idea mucho mejor, podeis verlo aquí:

http://www.gafasvalencia.com

Como vereis (si es que aún no lo he cambiado el código), se muestran bastante mal, sobretodo con IE (FF aplica algo de suavizado pero no el suficiente). El motivo es porque en principio se mostraban en un tamaño mayor (su tamaño real), pero para mejorar la presentación tuve que hacer que se mostraran a un tamaño menor. Así que calculé su escala en pixels al 60% y directamente se lo añadí a la imagen con px, no con %:

style="width:100px; height:36px;" (el tamaño real es 168x60)

De momento hice eso porque escalar las imágenes con porcentajes es inconsistente (si no me equivoco, los porcentajes se aplican con respecto al contenedor, no a la imagen en sí).

Qué me sugerís?? No tengo más remedio que hacer las imágenes a un tamaño real de 100x36 para que se vean bien?? Hay alguna forma de reducir proporcionalmente sin que se vean mal las imágenes?

[emiliodeg]

si quere que sea proporcional al ancho solo pones with y si queres q sea en altura le pones height pero no ambas

[Tigervlc]

Hola Emilio, haciendo eso pasa lo mismo que como digo arriba, solo que en FF sale el suavizado muy bien (mejor que antes), pero en Explorer los GIFS siguen apareciendo horribles (creo que incluso peor). No se reducen con suavizado. Es como si no se les aplicase antialias.

[kseso?]

Tigervl, creo que lo acertado es hacer el rescalado con algún programa de edición gráfica. Convertir el lote no te llevará más de 2 minutos.
Hace ya un tiempo en el foro de diseño se trató el tema y se mencionaron varios programas que lo hacen (a parte del ps)
Un saludo

[Tigervlc]

Iniciado por kseso?

Tigervl, creo que lo acertado es hacer el rescalado con algún programa de edición gráfica. Convertir el lote no te llevará más de 2 minutos.
Hace ya un tiempo en el foro de diseño se trató el tema y se mencionaron varios programas que lo hacen (a parte del ps)
Un saludo

No si es que ya he probado con el mismo photoshop, haciendo las reducciones por lote y selecionando el resampleado idóneo para reducciones, y como digo, sale mal.

Mi hipótesis es que reducir un GIF pequeño de 72 ppp y monocromo (blanco y negro) a un tamaño algo más pequeño no da buenos resultados, salen las imágenes dentadas y bastas.

Así que he optado finalmente por volver a retomar todos los logotipos uno por uno en formato vectorial y desde ahí reducirlos y una vez en el tamaño deseado pasarlos a GIF. De esta manera evito un resampleado y las imágenes salen nítidas incluso en pequeño.

Pero bueno, preguntaba por si había alguna forma de haberme evitado esto.

[Rafael]

Resamplear un gif no es una buena idea por una razón. Es una imagen de paleta.

Un resampleado implica suavizar la imagen, y esto necesita colores intermedios. Cuando tenemos una paleta definida estos colores intermedios pueden no ser suficientes o incluso inexistentes.

Puedes resamplear con Irfanview un lote de gifs, con opciones avanzadas te los puede convertir primero a 24 bits. Probablemente te conviene usar de ahí png.

[JavierB]

Mensaje movido al foro de Diseño gráfico desde CSS.

Saludos,

[Rafael]

Ojo. Si el gif se está usando para dar transparencia, este efecto se pierde justamente por este suavizado. En un gif la zona de transparencia debe estar bien definida por un borde duro, no suavecito.

En ese caso probablemente habrá que optar por reducir solo al 50%. O de plano migrar a png y usar su canal alpha para la transparencia.

Si el caso es para un gif animado tal vez el proceso es convertir a 24 bits. Photopaint puede hacer esto, pero solo se podrá salvar ya como avi. Resamplear y después volver a cambiar la paleta para salvar como gif.