¿Cómo puedo optimizar mis imágenes gráficas para mi sitio web?

¿Tienes una idea clara del objetivo de estas imágenes?

Probablemente lo haga, pero no está tomando buenas decisiones.

1) Usa SVG. Esto es escalable, ampliable. Mantienen el detalle original si les haces zoom.

2) Exportar los originales a mayor resolución. Si necesita que encajen de alguna manera en su página web, utilícelos como una miniatura y, al hacer clic, muestra las imágenes de alta resolución. Cualquier galería de lightbox puede hacer eso.

3) Si necesita que se impriman, adjunte un archivo pdf en alta resolución o en formato vectorial.

4) Si esto es lo único que tiene, use png 24 y aplique un poco de nitidez. Puedes probar a aumentar un poco el contraste jugando con los niveles, principalmente en el lado oscuro.

5) Si esto es todo lo que tienes pero aún necesitas archivos de alta resolución... Haz los gráficos de nuevo.

Es importante tener algo claro. Si su cliente necesita algún grado de calidad, debe proporcionar los recursos para lograrlo. O te proporciona los archivos fuente o te paga más para hacer este material gráfico adicional.

De acuerdo con tu comentario, déjame agregar algunas opciones.

6) No estoy familiarizado con el programa Visio, pero existe la posibilidad de tener algún tipo de configuración de exportación, así que intente modificarlos para tener una mejor resolución.

7) Si no hay tales configuraciones, puede hacer una captura de pantalla. Utilice un monitor de alta resolución. Al final las imágenes son para verlas en pantalla por lo que tendrás la misma resolución que la necesaria para mostrar.

8) Otra opción es imprimirlos en un archivo. intente usar una impresora virtual como el creador de Pdf www.pdfforge.org . Solo tenga cuidado con las instalaciones, porque al ser un software gratuito, a veces intenta instalar algunas barras de navegador u otro tipo de software publicitario.

Puede elegir la salida de impresión y configurar la resolución. Si elige un archivo de mapa de bits como png, generará una imagen sin alias. Simplemente exporte al doble del tamaño que necesita y cambie la escala en Photowhatever a la mitad de resolución con un método de interpolación como bicúbico.

El mayor problema que tiene es con su texto, que tiene un alias y es demasiado pequeño para representarlo correctamente. Si se trata de un texto en vivo en Photoshop, desactive el alias de texto para capas de texto específicas, aumente el tamaño de la fuente y luego vuelva a exportar.

Si se trata de Photoshop aplanado desde Visio, aumente el tamaño de fuente en Visio. La escala de los gráficos se puede ajustar para adaptarse a un mayor tamaño de fuente.

Recomendaciones para optimizaciones:

1.- Imagen en formato PNG a SVG

2.- html:<img src='image.svg'>

2.- css (relación de mantenimiento):img {max-width: 100%;max-height: 100%;}

3.- Usar metaetiqueta para dispositivos móviles: <meta content='width=device-width, initial-scale=1' name='viewport'/>en la etiqueta de cabeza html para evitar la distorsión de la imagen