Tengo un archivo de imagen PSD a todo color que quiero convertir a un formato que pueda compartirse fácilmente en la web.
El tamaño actual del PSD es de alrededor de 7 MB.
Quiero reducir el tamaño del archivo a alrededor de 70 kb sin perder calidad.
¿Cuál es el mejor formato y el mejor método para hacer esto?
Traté de lograr esta reducción del tamaño del archivo con las herramientas de Photoshop. Guardar como JPEG y configurar la calidad highme da un archivo de 110kb
Esto es demasiado grande y con un nivel de calidad más bajo me da resultados inaceptables.
Sé que hay muchos otros métodos para reducir el tamaño del archivo, ¿puedes compartir tu experiencia sobre este tema?
Además de probar diferentes configuraciones de calidad, también experimente con más compresión y la configuración de "desenfoque" para jpegs.
Pruebe también herramientas de optimización adicionales como Image Optim, ImageAlpha, TinyPNG o JPEGmini .
¿Es una fotografía o algo más cercano a una imagen vectorial como un esquema?
En el primer caso, JPEG es su mejor opción: las imágenes PNG suelen ser más grandes. Esto no le impide probar PNG en la vista previa y ver cómo afecta la calidad y el tamaño, pero en la mayoría de los casos, se sentirá decepcionado.
Cuando utilice JPEG, no se limite a los niveles de compresión de la lista (es decir, 20, 40, 60, 80 y 100). En algunos casos, elegir, por ejemplo, 75 en lugar de 80 produjo una imagen más pequeña, mientras que la caída de la calidad fue prácticamente imperceptible.
En el segundo caso, JPEG generalmente resultará en una importante pérdida de calidad, mientras que PNG no lo hará.
Además, si la imagen no tiene degradado, pruebe PNG-8 en lugar del PNG-24 predeterminado y experimente con varios colores para ver cómo afecta tanto el tamaño como la calidad de la imagen.
Por ejemplo, no es inusual que PNG-8 con 16 colores produzca archivos mucho más pequeños en comparación con PNG-8 con 32 colores o más o en comparación con PNG-24, mientras que la caída en la calidad apenas se nota.
El cuadro de diálogo que se muestra al ir a Archivo › Guardar para Web y dispositivos fomenta la experimentación al permitirle obtener una vista previa rápida de diferentes configuraciones ; también recuerde usar las pestañas "2-Up" y "4-Up" en la esquina superior izquierda de este cuadro de diálogo.
Finalmente, recuerda las reglas de oro de un diseñador web:
Nunca pongas texto dentro de las imágenes. No hay necesidad de desperdiciar el ancho de banda del usuario cuando simplemente puede incluir texto en HTML, sin contar otras consecuencias desastrosas de poner texto en imágenes (como matar el SEO, la traducción automática, la accesibilidad, etc.)
Piensa dos veces si la imagen es realmente útil para tus usuarios. ¿Enriquece el contenido o simplemente agrega más desorden visual? ¿No podría ser reemplazado por los elementos proporcionados por HTML 5 y CSS 3?
Nunca cree imágenes que siempre se mostrarían más pequeñas que su tamaño real. Si las miniaturas de los productos de un sitio de comercio electrónico son de 400×300, no reutilice las fotos de 1 200×900 a escala real, a menos que realmente quiera matar el ancho de banda de su servidor y de sus clientes.
Si no es una imagen fotorrealista y/o tiene una paleta de colores limitada, Photoshop Save For Web en formato PNG-8 podría ser su mejor opción. Aquí puede especificar el número de colores (2-256), cuantos menos colores, más pequeño es el archivo. Puede conectar diferentes valores para la cantidad de colores y ver los efectos en la imagen (en la vista previa) y el tamaño del archivo resultante.
Es posible que incluso desee volver atrás y volver a trabajar su imagen para que funcione con menos colores, a menudo intento desde el principio hacer que los gráficos web se vean bien con menos colores para crear archivos pequeños PNG-8.
Hace poco leí aquí que puede guardar con compresión jpg 31 usando el doble de las dimensiones que necesita, luego mostrarlo en su página web con la mitad de esas dimensiones y se verá bien. Entonces, si desea que su foto se muestre en 200 px por 200 px, guárdela en 400 px por 400 px con calidad 31 y configure el tamaño de la imagen en su CSS o HTML para que sea 200 px por 200 px. Esto hace que la imagen parezca guardada en alta calidad pero con un tamaño de archivo mucho más pequeño Y se ve bien en pantallas retina. Esto funcionaría bien para las fotos.
Para imágenes con grandes áreas de colores sólidos, guardaría como PNG-8 o, si la imagen tiene un degradado o muchos colores, PNG-24. O si lo hizo en Illustrator, podría guardarlo como un SVG, según su público objetivo (y sus navegadores).
Puede cambiar las dimensiones de la imagen , es decir, los píxeles, mientras mantiene la resolución . Eso definitivamente reducirá el tamaño del archivo mientras mantiene la calidad de la foto.
scott