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? :xD
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:
Cita de: NEBIRE link=topic=491552.msg2183041#msg2183041 date=1547425628
[url
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% :D ) 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:
Navegación
[#] Página Siguiente