Dudas acerca de graficos en paginas web

[Beginner Web]

Bueno, yo tengo una pagina web donde enseño programacion y otras cosas, subo fotos o pongo mi portada y cosas asi y no se ven de buena calidad como en otras paginas, las fotos las hago yo en word, excel, paint, photosop o las saco con el faststone, en algun lugar lei/escuche sobre imagenes vectoriales puede ser? Me ayudan?

[Serapis]

Una imagen vectorial, es una imagen que se crea a base de órdenes gráficas, tipo: Rellenar el fondo de color azul, cambiar el color de pluma a blanco, dibujar un circulo de radio 23'6 con centro en las cordenads 45-120, dibujar una línea desde 20-80 hasta 40-135, rotar 10º en el eje x el rectángulo blablaba...

Esto permite que las imágenes se puedan rescalar manteniendo básicamente la misma calidad de las imágenes. Como son órdenes y no se guardan datos de píxeles, el tamaño del fichero es muy pequeño en comparación con una imagen que guarda la info del color de cada píxel, incluso aunque esté comprimido en jpg (por ejemplo).
La desventaja es que no es nada fácil hacer imágenes de cualquier tipo de esta forma. Para cosas como esquemas y así, en cambio es muy adecuado, porque son de la misma naturaleza.

Un proceso ideal, es que partiendo de una foto (por ejemplo), luego un programa fuere capaz de recrearla idénticamente usando precisamente órdenes gráficas, a base de leer la imagen e interpretar que orden o conjunto de ellas podrían emular tal o cual parte de la imagen... Esto está en pañales, aún.

Hay un montón de formatos gráficos de este tipo de imágenes. El formato que recomienda el W3C es el svg, y que casi todos (o todos) los navegadores web soportan a día de hoy (muy habitual en uso en wikipedia)...

https://www.w3.org/Graphics/SVG/
https://es.wikipedia.org/wiki/Gr%C3%A1ficos_vectoriales_escalables
https://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG

[Beginner Web]

url="https://www.w3.org/Graphics/SVG/"]https://www.w3.org/Graphics/SVG/[/url]
https://es.wikipedia.org/wiki/Gr%C3%A1ficos_vectoriales_escalables
https://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG

Si, justo eso es lo que busco me salen feas mis imagenes mira...



Gracias me pondre a investigar

[kub0x]

No olvidemos que LateX es nuestro amigo y se considera (casi) un estándar a la hora de redactar documentos académicos o educativos. El mismo compilador renderiza en base a ciertas macros de preprocesado y etiquetas que definen por ejemplo: estilos tipográficos, así como tablas o rúbricas, gráficos, lenguaje matemático de todo tipo etc.

Hoy día su integración en web es posible mediante la instalación de plugins y/o herramientas o bien mediante la interacción con otros servicios online que renderizan lo que deseas y lo devuelven como una imagen. Un claro ejemplo son los sitios de StackExchange (si, StackOverflow solo es el 1% de las sites el cual visita el 99% ) y aquí te dejo un poco de info sobre varias formas de integrarlo vía web. Personalmente yo no lo aprendí en ninguna institución, ya que solamente piden Word por norma. Le cogí el gusto en MathSE y desde ahí somos inseparables. Para escritorio yo uso TexStudio en GNU/Linux, va como la seda.

Saludos!

[EdePC]

- Veo "suciedad" en tu imagen (ruido en los bordes), esto se debe al método de compresión que usas, en tu caso JPEG empleado normalmente suele dar estás pérdidas de calidad.

- Hoy en día las imágenes PNG tienes buen ratio e compresión y normalmente no hay pérdida de calidad ni "suciedad", yo siempre suelo utilizar PNG para todo, casos excepcionales son imágenes con demasiada variedad de colores (fotos complejas) en este caso es mejor usar JPEG.

- Te recomiendo trabajar siempre en PNG, ya que no tiene pérdida de calidad, luego utilizar un buen optimizador de imágenes, yo te recomiendo Pingo que es gratuito, por línea de comandos y muy efectivo para reducir el peso de las imágenes que trata: https://css-ig.net/pingo

- En conclusión, trabaja siempre con PNG (tus capturas de pantalla, exportar imágenes de Photoshop, etc), luego usa Pingo para reducir su peso sin perder calidad visible. Usa SVG para imágenes muy sencillas, con pocos colores y trazos. Las imágenes SVG consumen mucha CPU y Ram para ser mostradas, escaladas y animadas (por el cálculo y recálculo de estas para ser mostradas). La verdad prefiero usar PNG en lugar de SVG XD, por ejemplo mira este PNG, puedes escalarlo bastante y no perder calidad:

-- Imagen tomada con FastStone Capture, se puede observar que la calidad también depende de la manera en que el software renderiza el texto/imagen (por defecto agregan algo de "suavizado" a los bordes cuando se amplía/reduce), también recomiendo hacer tu captura de pantalla al tamaño destinado para evitar que se auto re-escale y pierda calidad, por ejemplo acá en el foro permiten usar imágenes de máximo 800px de ancho. Luego se optimizó con Pingo:





- Para trabajar con imágenes vectoriales (SVG, CDR, AI, etc) puedes utilizar el gratuito (aunque algo feo) InkScape, luego buenos de pago son Corel Draw (mi favorito, fácil de aprender/manejar y me basta) y Adobe Illustrator (tiene demasiadas cosas, supongo que es para altos profesionales)

-- Todos estos programas de tratamiento vectorial tienen la capacidad de vectorizar imágenes de mapa de bits (PNG, JPEG, GIF), esto está muy limitado dependiendo de la complejidad de la imagen a vectorizar. Por esto es mejor crear los gráficos como el que pusiste, directamente en un software de diseño de imágenes vectoriales. Por ejemplo InkScape:

[Beginner Web]

Que significa esto?

http://subirimagen.me/uploads/20190114220841.png

Y como dejaste mi imagen con esa calidad con que pasos?

[EdePC]

- Pingo tienes muchas opciones, sin embargo su modo automático es bastante inteligente:

pingo imagen.png

-- Es todo, ejecutas y listo, te optimiza la imagen dada. OJO que pingo sirve para reducir el peso de las imágenes sin pérdida visible de calidad, y advierte de que hay posibilidad de que destruya la imagen dada  , pero la verdad llevo usando pingo varios años y nunca me ha roto alguna imagen, sin embargo ten un respaldo por si acaso. Yo suelo copiar pingo.exe en c:\windows para poder llamarlo desde cualquier parte.

- La imagen la he hecho con InkScape, puedes descargarla y abrirla con InkScape para editarla, es una imagen vectorial SVG de InkScape y como ves es compatible con Web ya que sigue el Estándar.

[Beginner Web]

- Pingo tienes muchas opciones, sin embargo su modo automático es bastante inteligente:

pingo imagen.png

-- Es todo, ejecutas y listo, te optimiza la imagen dada. OJO que pingo sirve para reducir el peso de las imágenes sin pérdida visible de calidad, y advierte de que hay posibilidad de que destruya la imagen dada  , pero la verdad llevo usando pingo varios años y nunca me ha roto alguna imagen, sin embargo ten un respaldo por si acaso. Yo suelo copiar pingo.exe en c:\windows para poder llamarlo desde cualquier parte.

- La imagen la he hecho con InkScape, puedes descargarla y abrirla con InkScape para editarla, es una imagen vectorial SVG de InkScape y como ves es compatible con Web ya que sigue el Estándar.

Ohh ya veo. lo compartí con codigo HTML, pero hay un problema, como hiciste para que la imagen se viera con esa calidad en InkScape? A mi sale horrible 

[EdePC]

- Tienes que hacer el gráfico en InkScape desde cero , un truco que suelo utilizar es la exportación a PDF, por ejemplo, creo mi gráfico/tabla en Word y lo guardo como PDF, luego abro el PDF con InkScape, hago algunos retoques para luego guardarlo como SVG y listo.

- No suele ser lo ideal ya que este proceso agrega más objetos al trabajo final y lo hace más pesado, sin embargo es un proceso rápido. Lo más eficiente es crear el gráfico directamente en el software (InkScape, Corel Draw, Illustrator), es más limpio PERO depende mucho de las herramientas que ofrezca el software para lograr el gráfico cómodamente.

- Por desgracia Word no permite exportar directamente a SVG, no sé si la Suite de LibreOffice lo haga...



-- El SVG final se guardará con el tamaño del documento, recomiendo ajustar el tamaño de la hoja seleccionando tu gráfico y luego Edición > Ajustar la página a selección, o usar el atajo Ctrl + Shift + R

[Beginner Web]

Muchas gracias, me ha servido do mucho