Reduce el tamaño del archivo sin perder calidad

11

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

Configuraciones

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:

Imagen de ejemplo

L84
fuente
1
Hay varias respuestas a esto: un ejemplo del tipo de imágenes de las que está hablando ayudaría.
e100
1
@ e100: actualizo la pregunta para proporcionar una imagen de ejemplo y agregar más información.
L84
Si está controlando el lado del sitio web, busque 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 sean estrictamente necesarias, son vectores SVG y se cargan como fuente. Reduce drásticamente el recuento de KB de página. Los banners de héroe de 2000 píxeles de ancho tienen JPG al 85% y los chicos se cargan previamente en segundo plano. El dispositivo del usuario final se detecta y entrega versiones relativas del archivo (es decir, una versión más pequeña para dispositivos móviles). Cuando el usuario pasa la página de inicio, la carga de la pantalla es instantánea. Y apuntamos a la página de inicio máxima de 2 segundos.
Applefanboy

Respuestas:

15

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:

JPEG, progresivo, calidad: 40, desenfoque: 0.18 JPEG, optimizado, calidad: 60, desenfoque: 0 JPEG, progresivo, calidad: 60, desenfoque: 0 PNG-8, Dithering: 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: 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.

thebodzio
fuente
Mi mayor preocupación sobre la opción progresiva es el soporte para clientes de correo electrónico. Agregué más información a mi pregunta para explicar esto.
L84
1
Por lo que puedo decir, "progresivo" es una 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 "lo sé" :).
thebodzio
Estoy de acuerdo y creo que tienes razón, había hecho 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.
L84
1
Así es exactamente como se pretende que funcione "progresivo": debería mostrar versiones más y más detalladas de la imagen consecutivamente a medida que haya más datos disponibles.
thebodzio
Lo siento, lo que quise decir es que nada se muestra hasta que la imagen se carga vs cargar escaneo por escaneo.
L84
10

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.

e100
fuente
2

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

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

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.

querer252
fuente
Cualquier otra recomendación que no sea el uso de JPEG. ¿Cómo es PNG?
L84
1
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.
Jannik Ruf
JPEG y GIF son buenas opciones para la vista web (PNG rara vez se usa). Pero depende mucho de lo que quiere hacer: fondo, la imagen de diapositivas, miniatura o icono, etc ...
wanting252
Si solo se trata de Texto sin efectos (es decir, solo texto blanco sobre fondo negro), el GIF es bueno y de tamaño realmente pequeño.
Jannik Ruf
44
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.
e100