Reduce el tamaño del archivo sin perder calidad

Me gustaría guardar archivos en Photoshop pero mantenerlos lo más pequeños posible.

Uso Guardar para Web (y dispositivos) y guardar como JPEG. Aquí están las configuraciones que utilicé:

Realmente no quiero reducir la configuración de calidad porque uso texto y, a veces, veo artefactos si la configuración es demasiado baja.

Esto produce tamaños de archivo de varios cientos de kilobytes dependiendo del tamaño de la imagen. Si bien esto no es un gran problema, estas imágenes se usan para la web y más pequeñas es mejor. ¿Cuáles son las técnicas sin reducir la calidad para reducir el tamaño del archivo?

Actualizar:

Para agregar más información aquí:

Muchas de las imágenes que uso y creo se envían por correo electrónico. Esto limita lo que puedo hacer con la colocación de texto usando HTML y CSS sobre la imagen.

También uso una variedad de fuentes. Podría usar algunos para la web usando CSS, @font-facepero puede ejecutar archivos de gran tamaño y, en algunos casos, no puede cargar la fuente en la web legalmente. Podría usar un servicio como Typekit pero, de nuevo, muchas fuentes que uso no están disponibles con Typekit.

Aquí hay una imagen de ejemplo:

La elección del mejor método de compresión depende del contenido de su imagen. Si está intentando guardar una imagen con muchos colores y transiciones suaves entre ellos, su elección sería JPEG. De lo contrario, si tiene algo de lineart, texto, imagen con un par de colores, debe probar PNG en su lugar.

El esquema de compresión específico, los parámetros, la reducción de color, etc. dependen del caso específico. Hay algunas imágenes que puede guardar de forma segura con el "control deslizante" de compresión JPEG configurado en 30 o 40 sin hacer aparentes los artefactos. Algunos otros requieren configuraciones 80 o más. Tu ojo debería ser el juez.

Cuando hablamos de compresión JPEG, no dude en intentar usar, por ejemplo, la opción "Progresiva" o establecer "Desenfocar" en un valor distinto de cero (el desenfoque sutil puede enmascarar artefactos de compresión graves).

En el caso de PNG, debe intentar reducir la cantidad de colores usados ​​tanto como sea posible (use PNG-8 para eso). Cuando se requiere algo de "suavizado", pruebe diferentes algoritmos de interpolación.

Aquí hay un par de ejemplos:

De izquierda a derecha, de arriba a abajo, sus parámetros son:

1. JPEG, progresivo, calidad: 40, desenfoque: 0.18, tamaño: 9 672 bytes
2. JPEG, Optimizado, Calidad: 60, Desenfoque: 0, Tamaño: 16 898 bytes
3. JPEG, progresivo, calidad: 60, desenfoque: 0, tamaño: 11104 bytes
4. PNG-8, Dithering: difuso, Colores: 256, Tamaño: 4 528 bytes

Compárelos visualmente y luego observe bien sus respectivos tamaños de datos. El primer par es de aproximadamente 9.7 kB frente a 16.9 kB. El segundo es 11.1 kB vs. 4.5 kB. Todo eso por (en mi humilde opinión) insignificante diferencia visual.

Aquí hay algunas opciones:

• Use otro formato que no sea JPEG (PNG o GIF); los resultados en términos de tamaño de archivo y calidad de imagen dependerán del contenido de su imagen; cada uno es mejor en ciertos tipos de contenido
• Haga que la imagen sea más pequeña en términos de píxeles: esto tendrá un efecto muy significativo y definitivamente debe considerarse si tiene control sobre el diseño general
• Utilice elementos que no sean de imagen siempre que sea posible, por ejemplo, intente reemplazar texto en imágenes con texto HTML; intente reemplazar bloques de color con elementos HTML.

Al ampliar los dos últimos puntos, debe buscar minimizar la extensión de las imágenes en sus diseños en su conjunto antes de dedicar tiempo a reducir el tamaño de archivo de las imágenes existentes.

Trataré de responder algunas preguntas hasta ahora sin respuesta:

Muchas de las imágenes que uso y creo se envían por correo electrónico. Esto limita lo que puedo hacer con la colocación de texto usando HTML y CSS sobre la imagen.

Puede enviar correos electrónicos html (la forma en que se hacen los boletines). Con html y CSS en línea (por compatibilidad). Las imágenes deben estar en un servidor y debe colocar la URL completa en las etiquetas de estilo / img. Aquí hay una lista de lo que funciona en diferentes clientes de correo electrónico.

También uso una variedad de fuentes. Podría usar algunos para la web usando @ font-face de CSS, pero puede ejecutar archivos de gran tamaño y, en algunos casos, no puede cargar la fuente en la web legalmente.

Prueba google webfonts , con mucho, la mejor fuente de fuentes web. Todo de uso gratuito. Otro sería Font Squirrel . (Utiliza @ font-face también).

No hay forma de que puedas hacer esto. JPEG es un formato con pérdida. Siempre hay un intercambio entre calidad y tamaño de archivo.