Reduzca 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 guardo como JPEG. Aquí están las configuraciones que usé:

Ajustes

Realmente no quiero bajar 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 utilizan para la web y cuanto más pequeñas, 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 seriamente lo que puedo hacer con la colocación de texto usando HTML y CSS sobre la imagen.

También uso una variedad de fuentes. Algunos podrían usarse para la web usando CSS, @font-facepero puede encontrar 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:

Imagen de ejemplo

Hay varias respuestas a esto: ayudaría un ejemplo del tipo de imágenes de las que está hablando.
@ e100: actualizo la pregunta para proporcionar una imagen de ejemplo y agregar más información.
Si está controlando el lado del sitio web, consulte las opciones de código/compilación. Soy el diseñador de un equipo web profesional y entregamos videos de pantalla completa a computadoras de escritorio/teléfonos móviles sin un gran éxito. Las imágenes, a menos que sea estrictamente necesario, son SVG vectoriales y se cargan como una fuente. Reduce drásticamente el conteo de KB de la página. Los banners de héroe de 2000 píxeles de ancho son JPG al 85% y los chicos se precargan en segundo plano. Se detecta el dispositivo del usuario final y se entregan versiones relativas del archivo (es decir, una versión más pequeña para dispositivos móviles). Cuando el usuario pasa por la página de inicio, la carga de la pantalla es instantánea. Y nuestro objetivo es una página de inicio máxima de 2 segundos.

Respuestas (4)

La elección del mejor método de compresión depende del contenido de su imagen. Si está tratando de guardar una imagen con muchos colores y transiciones suaves entre ellos, su elección sería JPEG. De lo contrario, si tiene algún dibujo lineal, texto o imagen con un par de colores, debería probar con PNG.

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 que se vean artefactos. Algunos otros requieren configuraciones de 80 o más. Tu ojo debe ser el juez.

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

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

Aquí hay un par de ejemplos:

JPEG, Progresivo, Calidad: 40, Desenfoque: 0,18 JPEG, optimizado, calidad: 60, desenfoque: 0 JPEG, Progresivo, Calidad: 60, Desenfoque: 0 PNG-8, tramado: difuso, 256 colores

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: 11 104 bytes
  4. PNG-8, Tramado: difuso, Colores: 256, Tamaño: 4 528 bytes

Compárelos visualmente y luego eche un vistazo a 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 frente a 4,5 kB. Todo eso por (en mi humilde opinión) diferencia visual insignificante.

Mi mayor preocupación acerca de la opción progresiva es la compatibilidad con clientes de correo electrónico. Agregué más información a mi pregunta para explicar esto.
Por lo que puedo decir, "progresivo" es parte del estándar JPEG y no algo exótico, por lo que el soporte debería ser casi del 100%. Pero es "Creo" no "Yo sé" :).
Estoy de acuerdo y creo que tiene razón, hice esta pregunta en Webmaster SE y, en el peor de los casos, las imágenes se mostrarán, pero no hasta que estén completamente cargadas.
Así es exactamente como se pretende que funcione "progresivo": debe mostrar versiones cada vez más detalladas de la imagen de forma consecutiva a medida que haya más datos disponibles.
Lo siento, lo que quise decir es que no se muestra nada hasta que la imagen se carga frente a la carga de escaneo por escaneo.

Aquí hay algunas opciones:

  • Usar 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 la imagen más pequeña en términos de píxeles: esto tendrá un efecto muy significativo y definitivamente debe tenerse en cuenta si tiene control sobre el diseño general.
  • Utilice elementos que no sean imágenes cuando sea posible, por ejemplo, trate de reemplazar el texto de las imágenes con texto HTML; intente reemplazar bloques de color con elementos HTML.

Ampliando los dos últimos puntos, debe buscar minimizar la extensión de las imágenes en sus diseños como un todo antes de dedicar tiempo a reducir el tamaño del archivo de las imágenes existentes.

Voy a 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 seriamente 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 (para compatibilidad). Las imágenes deben estar en un servidor y debe colocar la URL completa en las etiquetas de estilos/img. Aquí hay una lista de lo que funciona en diferentes clientes de correo electrónico.

También uso una variedad de fuentes. Algunas podrían usarse para la web usando @font-face de CSS, pero puede encontrar archivos de gran tamaño y, en algunos casos, no puede cargar la fuente en la web legalmente.

Pruebe google webfonts , con mucho, la mejor fuente webfont. Todo de uso gratuito. Otro sería Font Squirrel . (También usa @font-face).

Gracias por los enlaces. He navegado por algunos sitios web de Campaign Monitors pero no he visto la página CSS. Información muy útil allí.

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

Cualquier otra recomendación que no sea el uso de JPEG. ¿Cómo es PNG?
PNG no tiene pérdidas pero también es bastante grande. ¿Dónde usas esta imagen? Si es para la web, siempre es mejor codificar el texto.
JPEG y GIF son buenas opciones para la vista web (rara vez se usa PNG). Pero depende mucho de lo que quieras hacer: fondo, presentación de imágenes, miniatura o icono, etc.
Si es solo texto sin efectos (es decir, solo texto blanco sobre fondo negro), el gif es bueno y de tamaño realmente pequeño.
Esta no es realmente una muy buena respuesta. Hay varias formas de reducir el tamaño del archivo; es incorrecto decir que PNG rara vez se usa en la web.
Estoy de acuerdo con e100. Además, PNG (el GIF también podría funcionar) es insustituible para poner en la web imágenes que contengan, por ejemplo, dibujos lineales.
@JannikRuf: actualizo la pregunta para agregar más información.
@wanting252 PNG se usa en todas partes en la web, no sé qué haría sin él ;) Pero, por supuesto, para las fotos también uso jpg con una calidad de 60, ya que no tienes transparencia.
Reduzca el tamaño del archivo sin perder calidad
RespuestasAquíPolítica de privacidad1y, 0v