Cómo optimizar las imágenes GIF y PNG para su sitio de medios sociales

Si está trabajando con un gráfico que se puede mostrar en 256 colores o menos en su sitio de medios sociales – como un logotipo, un personaje de dibujos animados o un dibujo – su mejor apuesta es utilizar el formato PNG y reducir el número total de colores utilizados 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 la imagen que puede ocurrir cuando se eliminan los colores, GIF y PNG utilizan un truco de interpolación. La interpolación implica la alternancia de píxeles en un patrón similar al de un tablero de ajedrez para crear sutiles variaciones de color, incluso con una paleta de colores limitada. El efecto puede suavizar los bordes de la imagen y hacer que parezca que tiene más colores de los que realmente tiene.

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

  • Con la imagen abierta en Photoshop, elija File→Save para web y dispositivos. Aparece el cuadro de diálogo Guardar para web y dispositivos.
  • En la esquina superior izquierda del cuadro de diálogo, seleccione la pestaña de 2 ó 4 páginas para mostrar varias versiones de la misma imagen con el fin de facilitar la comparación.4-Up permite ver la imagen original (en la esquina superior izquierda), así como tres vistas previas diferentes de la misma imagen.Crédito: Tom Mccain
  • El tamaño, el formato y otras configuraciones 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 a la imagen, por ejemplo, la cuarta versión muestra la imagen con sólo dos colores. En los otros tres cuadros, la imagen incluye más colores – y aunque se vean mejor, el tamaño del archivo será mayor. cambiar las imágenes de vista previa en la vista de 4 Arriba le permite comparar la imagen original con hasta tres versiones diferentes usando diferentes colores, transparencia y otras configuraciones, que se describen en los pasos siguientes.
  • En la parte derecha del cuadro de diálogo, justo debajo de Preconfiguración, haga clic en la flecha pequeña para abrir la lista desplegable Formato de archivo optimizado y seleccione 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 cambia el formato a GIF. Sin embargo, también se reduce el tamaño del archivo.
  • En el cuadro Colores, seleccione el número de colores. cuantos menos colores utilice, menor será el tamaño del archivo y más rápido se descargará la imagen. El número ideal de colores depende de su imagen. Usted quiere una imagen lo más pequeña posible, pero si reduce el número de colores demasiado, 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 creó la imagen en el editor aparece transparente en la ventana de vista previa. El uso de la transparencia es un buen truco para hacer que el texto o una imagen parezca flotar porque no aparece un fondo transparente en la página web. Puede seleccionar la transparencia como opción de fondo en el cuadro de diálogo Nuevo cuando cree una nueva imagen en Photoshop o en Photoshop Elements.
  • El resto de la configuración de este cuadro de diálogo se puede dejar por defecto en Photoshop.
  • Se abre el cuadro de diálogo Guardar como optimizado.
  • Introduzca un nombre para la imagen y guárdela en una carpeta que pueda localizar rápida y fácilmente cuando llegue el momento de cargarla en el sitio de medios sociales elegido.
  • Repita estos pasos para cada imagen que desee optimizar como GIF o PNG para su sitio.

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

    2

    No Responses

    Write a response