Cómo optimizar el GIF y PNG para su sitio de redes sociales

Si está trabajando con un gráfico que puede ser representada en 256 colores o menos en su sitio de redes sociales - como un logotipo, personaje de dibujos animados, o dibujo - la mejor opción es utilizar el formato PNG y reducir el número total de colores utilizado en la imagen tanto como sea posible para reducir el tamaño del archivo.

Para ayudar a compensar la degradación de la calidad de imagen que puede ocurrir cuando se eliminan los colores, GIF y PNG usan un truco tramado. tramado implica alterna píxeles en un patrón de tablero de ajedrez para crear variaciones sutiles de color, incluso con una paleta de colores limitada. El efecto puede suavizar los bordes de la imagen y hacer que parecen tener más colores de los que realmente tiene.

Para convertir una imagen a un archivo GIF o PNG en Photoshop, siga estos pasos. En Photoshop Elements, fuegos artificiales, o GIMP el proceso es similar aunque los pasos específicos pueden variar.

Video: Curso de PageSpeed | Clase 05: Optimizar Imagenes

Con la imagen abierta en Photoshop, seleccione Archivo → Guardar para web & Dispositivos.

Guardar para Web & Aparece el cuadro de diálogo de dispositivos.

En la esquina superior izquierda del cuadro de diálogo, seleccione la pestaña 2 copias o 4 copias para mostrar varias versiones de la misma imagen para facilitar la comparación.

4-Hasta hace posible ver la imagen original (en la esquina superior izquierda), así como tres vistas previas diferentes de la misma imagen.

Haga clic para seleccionar cualquiera de las cuatro imágenes de vista previa para ver el tamaño y ajustar su configuración.

El tamaño, formato y otros ajustes de la imagen seleccionada se muestran en la parte superior derecha del cuadro de diálogo. La reducción del número de colores y otras opciones puede afectar dramáticamente la imagen.

Por ejemplo, la cuarta versión, se muestra la imagen con sólo dos colores mostrando. En las otras tres plazas, la imagen incluye más colores - y aunque se ven mejor, el tamaño del archivo será mayor.

Cambio de las imágenes de vista previa en el 4 copias le permite comparar la imagen original con hasta tres versiones diferentes usando diferentes colores, la transparencia, y otras configuraciones, cubiertos en los pasos que siguen.

En el lado derecho del cuadro de diálogo, un poco menos de preset, haga clic en la pequeña flecha para abrir la lista desplegable Formato de archivo optimizado y elegir PNG-24.

La opción PNG-24 produce una imagen de mejor calidad. La calidad de la imagen disminuye rápidamente a medida que reduce el número de colores en el archivo o cambiar el formato GIF. Sin embargo, también se reduce el tamaño del archivo.

En el cuadro Colores, seleccione el número de colores.

El menor número de colores que utiliza, cuanto menor sea el tamaño del archivo y el más rápido de la imagen se descargarán.

Si reduce los colores demasiado, se pierde información. El número ideal de colores depende de su imagen. Que desea como una imagen pequeña como sea posible, pero si se reduce el número de colores demasiado lejos, su imagen se verá terrible.

Si desea mantener un área transparente en su imagen, seleccione la casilla de verificación Transparencia.

Cualquier área de la imagen que era transparente cuando se creó la imagen en el editor aparece transparente en la ventana de vista previa. Si usted no tiene un área transparente en la imagen, este ajuste no tiene ningún efecto.

Usando la transparencia es un buen truco para hacer que el texto o una imagen parecen flotar debido a un fondo transparente no aparece en la página web. Puede seleccionar la transparencia como una opción de fondo en el cuadro de diálogo Nuevo, cuando se crea una nueva imagen en Photoshop o Photoshop Elements.

Video: TIP: ¿Cómo comprimir imágenes png para web?

Especificar otros ajustes que desee.

El resto de la configuración de este cuadro de diálogo puede dejarse en sus valores por defecto en Photoshop.

Clic en Guardar.

La reserva optimizada como se abre el cuadro de diálogo.

Introduzca un nombre para la imagen y guardarla en una carpeta que se puede localizar de forma rápida y fácilmente cuando llega el momento de subir a su sitio de redes sociales elegido.

Repita estos pasos para cada imagen que desea optimizar como GIF o PNG para su sitio.

Ensayo y error es una gran técnica en el Guardar para la Web & cuadro de diálogo de dispositivos. En cada una de las tres ventanas de vista previa con versiones optimizadas del dibujo de la casa, se utilizan cada vez menos colores, lo que reduce el tamaño del archivo con un efecto cada vez más degradantes.