Optimización de imágenes

Última actualización el 17 may 2022

Acerca de la optimización

La optimización para web es el proceso de comprimir imágenes y configurar opciones de visualización para un uso óptimo en Internet.Cuando publicas imágenes en Internet, el tamaño del archivo se vuelve importante;\nquieres conseguir un tamaño de archivo lo suficientemente pequeño como para permitir un\ntiempo de descarga razonable, pero lo suficientemente grande como para conservar colores y\ndetalles a tu satisfacción.Hay tres formatos de archivo gráfico principales que se usan en web: GIF, JPEG y PNG.

Cuando publicas imágenes en web, necesitas pensar en el tamaño del archivo.La meta es un tamaño de archivo lo suficientemente pequeño como para permitir tiempos de descarga\nrazonables pero que conserve colores y detalles a tu satisfacción.

Se usan tres formatos de archivo gráfico principales en web: GIF, JPEG\ny PNG.Puedes optimizar imágenes en estos formatos usando uno de los\nsiguientes métodos:

  • Para optimizar con precisión una imagen para usar en aplicaciones de creación web,\ncomo Adobe® Dreamweaver®, puedes usar el comando Guardar para web.\nEl cuadro de diálogo Guardar para Web permite obtener una vista previa de la imagen en diferentes formatos de archivo y con diferentes configuraciones de optimización.También puedes\nconfigurar opciones de transparencia y animación.

  • Para llevar a cabo una optimización básica, puede utilizar el comando Guardar como. Según el formato de archivo, puedes especificar la calidad de imagen, transparencia de fondo o calado, visualización de color y método de descarga.

Using the Save For Web dialog box

Usa el cuadro de diálogo Guardar para la web para previsualizar los efectos de diferentes opciones de optimización en una foto que quieres compartir en la web.Este proceso es sencillo. Abre una foto y elige Archivo > Guardar para web.A continuación, elige un formato del menú de formato de archivo (GIF, JPEG, PNG‑8 o PNG‑24) y configura las opciones según sea necesario.(El menú de formatos de archivo está justo debajo del menú de ajustes preestablecidos). Esto\nguarda una copia de tu archivo, sin sobrescribir la imagen original.

Cuadro de diálogo Guardar para Web

A. Cuadro de herramientas B. Color de cuentagotas C. Ajustes de optimización y menú desplegable con más opciones D. Tamaño de imagen E. Opciones de animación F. Menú de nivel de zoom G. Menú de previsualización en el navegador H. Imagen original I. Imagen optimizada 

Las opciones de optimización aparecen en el lado derecho del cuadro de\ndiálogo Guardar para web.Además de seleccionar un formato de archivo web, puedes\nelegir opciones de compresión y color, conservar la transparencia de Fondo\no configurar Halos de Fondo, y cambiar el tamaño de la imagen.Puedes\nusar configuraciones predefinidas (eligiendo un formato del menú Ajuste\npreestablecido) o seleccionar opciones específicas del formato para ajustar la optimización.

Las ventanas de imagen muestran tu imagen original (a la izquierda) y\nuna vista previa de la imagen optimizada (a la derecha).Debajo de cada ventana\nhay información de optimización: la configuración actual, el tamaño del\narchivo optimizado y el tiempo estimado de descarga.Mientras haces ajustes,\nla información debajo de la imagen optimizada cambia para reflejar tu\nnueva configuración.

Una pequeña caja de herramientas se encuentra en la esquina superior izquierda del cuadro de diálogo.Para ver diferentes áreas de una imagen, selecciona la Herramienta Mano y\narrástrarala para mostrar esas áreas.Para hacer Zoom en una imagen, selecciona\nla Herramienta Zoom y haz clic en una vista; luego mantén presionado Alt y haz clic\notra vez para reducir el Zoom.(También puedes usar la casilla de Zoom en la\nparte inferior del cuadro de diálogo.) " ] } ```Para crear colores mate, usa la Herramienta Cuentagotas de color.

Formatos de archivo optimizados para la web

Puedes elegir entre cuatro formatos para la web. Usa las siguientes directrices al elegir el formato para tu imagen web:

JPEG

En la mayoría de los casos, resulta el formato más apropiado para guardar las fotografías.

PNG-24

Al igual que JPEG, se trata de un buen formato para fotografías. Elige PNG‑24 en lugar de JPEG solo cuando tu imagen contenga transparencia. (JPEG no admite transparencia; debes rellenarlo con un color mate.) Los archivos PNG‑24 suelen ser mucho más grandes que los archivos JPEG de la misma imagen.

GIF

GIF es el formato que se debe usar para arte lineal, ilustraciones con áreas grandes de color uniforme y detalles nítidos, y texto.Además, si quieres exportar una imagen animada, debes usar GIF.

PNG-8

PNG-8 es una alternativa al formato GIF menos conocida, Úsalo para los mismos propósitos (excepto animación).

Las imágenes en formatos GIF y PNG‑8, a veces llamadas imágenes de color indexado, pueden mostrar hasta 256 colores. Para convertir una imagen a formato de color indexado, Photoshop Elements crea una tabla de consulta de colores. Si un color de la imagen original no aparece en la tabla de consulta de colores, la aplicación elige el color más cercano de la tabla o simula el color usando una combinación de colores disponibles.

Los archivos JPEG y PNG‑24 admiten color de 24 bits, por lo que pueden mostrar hasta 16 millones de colores. Dependiendo del formato, puedes especificar la calidad de imagen, transparencia de fondo o enmascaramiento, visualización de color, y el método que debe usar un navegador para mostrar la imagen durante la descarga.

La apariencia de una imagen en la web también depende de los colores mostrados por la plataforma del ordenador, sistema operativo, monitor y explorador. Es posible que quieras obtener una vista previa de las imágenes en diferentes exploradores y en diferentes plataformas para ver cómo aparecerán en la web.

Aplicar un ajuste de optimización preestablecido

Puedes optimizar rápida y fácilmente una imagen para la web eligiendo una configuración de optimización predefinida, llamada ajuste preestablecido, del menú Ajustes preestablecidos cerca de la esquina superior derecha del cuadro de diálogo Guardar para web.Los ajustes preestablecidos están diseñados para satisfacer las necesidades de optimización de diferentes tipos de imágenes.

El nombre de cada ajuste preestablecido refleja su formato de archivo y nivel de calidad.Por ejemplo, elige JPEG Alto para optimizar una imagen en formato JPEG con alta calidad de imagen y baja compresión. Selecciona GIF 32 con Tramado para optimizar una imagen en formato GIF, reducir el número de colores a 32 y aplicar tramado.

En el cuadro de diálogo Guardar para web, elige un nombre de configuración del menú Ajuste preestablecido y luego haz clic en Aceptar.
En el cuadro de diálogo Guardar optimizado como, escribe un nombre de archivo y haz clic en Guardar.
Nota

Si cambias las opciones de un ajuste preestablecido, el menú Ajuste preestablecido muestra la palabra "[Sin nombre]". No es posible guardar una configuración personalizada; sin embargo, la configuración actual aparece en el cuadro de diálogo Guardar para web la próxima vez que lo muestres.