Cómo reducir el tamaño del logotipo sin perder la calidad del paisaje de tinta

Realmente no soy un gran diseñador gráfico (programador), pero he incursionado en la edición de imágenes usando GIMP e Inkscape .

Esta es mi situación: tengo una imagen agradable y nítida de mi logotipo como un SVGarchivo en Inkscape. Sin embargo, cuando trato de exportarla como una imagen rasterizada más pequeña ( PNG), la imagen pierde calidad y se vuelve borrosa. He intentado cambiar la configuración y otras cosas, pero no he podido guardar imágenes nítidas y más pequeñas.

Aquí está el archivo SVG del logotipo en cuestión:ingrese la descripción de la imagen aquí

Aquí hay un enlace a la misma imagen exportada como un png más pequeño:

http://test.fittedthreads.com/images/path3017.png

Cualquier ayuda sería muy apreciada.

Rasterizar la imagen provoca un poco de desenfoque debido al antialiasing, y esto es más evidente en las imágenes pequeñas, pero por lo general la cantidad de desenfoque introducido por el antialiasing es tolerable. He exportado su logotipo en dos formatos (el último guardado en el archivo: 1389x271 y uno más pequeño: 200x39) y ambas exportaciones parecen regulares. ¿Puede agregar a su publicación una de sus exportaciones insatisfactorias, por favor?
@PaoloGibellini Acabo de agregar la imagen. Si bien se ve bien cuando se aleja, ¿hay alguna forma de mantener los detalles de la imagen para que al acercar se mantenga nítida?
¿Por qué estarías "acercando" un png?
Lo que Scott quiere decir es esto: un png es una matriz bidimensional de números enteros de tamaño fijo. Cuando se representan, los valores se representan como un cuadrado de tamaño fijo. Cuando haces zoom, el cuadrado se agranda en una cantidad uniforme tanto en x como en y, dando como resultado un cuadrado renderizado más grande. El tamaño de la unidad se amplía. Las líneas vectoriales se almacenan como puntos (flotantes) y se procesan usando flotadores y luego se muestrean en la resolución de salida actual, siempre se llega al tamaño de unidad más pequeño posible para el dispositivo de salida.
Cuando exporta a ráster como .PNG, debe hacer que la resolución (el tamaño) sea tan grande como el "zoom" más grande que desee admitir (para obtener los mejores resultados). Por lo tanto, si desea ampliar un 200x35 cinco veces, debe exportar como 1000x175 para tener suficientes datos en el archivo para que sea completamente uniforme con el zoom completo.
¿Hay alguna razón por la que no quieras usar SVG? Va directamente en la etiqueta IMG como lo haría un PNG, GIF o JPG, y lo escalas configurando el ancho (por ejemplo, ancho = "202px"). Puede usar un PNG como respaldo para las personas que usan navegadores más antiguos (por ejemplo, IE8 o inferior), pero los navegadores modernos pueden manejar SVG sin problemas. Lea esto para obtener más información: css-tricks.com/using-svg

Respuestas (1)

Como señaló @horatio, es bastante normal perder los detalles al hacer zoom en una imagen de tamaño fijo.

Suponiendo que el destino final de su imagen es una página web, cuando realiza una operación de zoom, el navegador escala las imágenes ráster , generalmente por interpolación.

Si está interesado en una página web que se pueda ampliar, puede usar directamente SVG como formato de imagen (vea el comentario de @denmch), teniendo en cuenta que solo los navegadores modernos pueden administrar imágenes vectoriales , o simplemente puede usar una imagen grande ( consulte el comentario de @mgkrebbs) y especifique el tamaño de salida a nivel de código (obviamente, esto aumenta el consumo de ancho de banda de la página).

Por ejemplo, en html, podemos comparar las tres alternativas (logotipo SVG, PNG pequeño, PNG grande):

<table border='1'>
    <tr><td>SVG image</td><td><img src='./thelogo.svg' with='200px' height='39px'></td></tr>
    <tr><td>Big PNG image</td><td><img src='./thelogo_big.png' with='200px' height='39px'></td></tr>
    <tr><td>Small PNG image</td><td><img src='./thelogo_small.png' with='200px' height='39px'></td></tr>
</table>

La salida es:

tres logotipos

Al hacer zoom conseguimos:

Tres logos ampliados

La imagen PNG pequeña parece borrosa (¡está interpolada a un biggertamaño!), mientras que la imagen PNG grande permanece nítida (está interpolada a un smallertamaño) hasta que el zoom está por debajo de cierto nivel. La imagen SVG permanecerá nítida.

Todo depende de lo que tengas que hacer...

Cómo reducir el tamaño del logotipo sin perder la calidad del paisaje de tinta
RespuestasAquíPolítica de privacidad1y, 0v