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?

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



Gracias me pondre a investigar

- 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:

- 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.

- 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