¿Cómo optimizar imágenes de la web en formatos PNG

categoría Los medios de comunicación de Internet y sociales / Diseño y desarrollo web / IPhone & iPad diseño web

Cuando usted está diseñando para el iPhone, iPad o iPod touch, tiene que elegir los mejores formatos de imagen y resolución, así como optimizar sus fotos y otros gráficos.

Si está trabajando con un gráfico, como un logotipo, personaje de dibujos animados, o el dibujo que se pueden mostrar en 256 colores o menos, lo mejor es utilizar el formato PNG 8 y reducir el número total de colores utilizados en la imagen tanto como sea posible para reducir el tamaño del archivo.

Si usted desea hacer un color en la imagen transparente, y que está trabajando con una fotografía u otro tipo de imagen con millones de colores, sus mejores opciones es PNG 24.

Para ayudar a compensar la degradación de la calidad de imagen que puede suceder cuando se quitan los colores, PNG utiliza un truco tramado. El difuminado implica alternando píxeles en un patrón de tablero de ajedrez-como 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 lo que realmente hace.

Para convertir una imagen al PNG 8 o el formato de 24 en Photoshop, siga estos pasos (en Photoshop Elements o Fireworks, el proceso es similar, aunque los pasos específicos puede variar):

¿Cómo optimizar imágenes de la web en formatos PNG
¿Cómo optimizar imágenes de la web en formatos PNG Agrandar
1

Con la imagen abierta en Photoshop, seleccione Archivo-Guardar para Web Dispositivos (o Archivo-Guardar para Web).

La Guardar para la Web Aparecerá el cuadro de diálogo Dispositivos. En este ejemplo, se ve el logotipo en blanco y negro para el sitio web inplainsight arte. El formato PNG 8 es el mejor para imágenes con colores limitados, como caricaturas y dibujos lineales.

2

En la esquina superior izquierda del cuadro de diálogo, selecciona 2 copias o 4 copias para mostrar varias versiones de la misma imagen para una fácil comparación lado a lado.

Este ejemplo muestra 2-Up, que permite ver la imagen original del logo en la parte superior, así como una vista previa de la versión optimizada de la parte inferior.

3

Seleccione una imagen de vista previa para comenzar a cambiar su configuración.

Haga clic en cualquier imagen para que sea activo en la ventana de diálogo.

4

En el lado derecho de la ventana de diálogo, poco menos de preset, haga clic en la pequeña flecha para abrir la lista desplegable Formato de archivo optimizado y elija PNG 8 o 24.

Si elige PNG 8, obtendrá los tamaños de archivo más pequeños. Elija PNG 24 si desea optimizar una imagen con muchos colores y aún así ser capaz de establecer un color a transparente.

5

En el cuadro Colores, seleccione el número de colores, como se muestra en la Figura 8-5.

El menor número de colores que utiliza, el más pequeño es el tamaño del archivo y más rápida será la imagen se descarga. Pero ten cuidado- si reduce los colores demasiado, pierdes detalles. El número ideal de los colores depende de su imagen- si vas demasiado lejos, su imagen se verá terrible.

6

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

Cualquier área de la imagen que fue transparente al crear la imagen en el editor aparece transparente en la ventana de vista previa. Si usted no tiene un área transparente en la imagen, esta opción no tiene ningún efecto.

La transparencia es un buen truco para hacer el texto o una imagen parecen flotar en una página web. Esto se debe 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 archivo cuando se crea una nueva imagen en Photoshop o Photoshop Elements.

7

Si decide Transparencia, también especificar un color mate.

Usted quiere que el color mate para que coincida con el fondo de su página web para que el tramado lo largo del borde transparente se mezcla con el fondo. Si no especifica un color mate, la transparencia se establece para un fondo blanco, que puede causar un aureola efectuar cuando se muestra la imagen de un fondo de color.

8

Especifique otros ajustes si lo deseas.

El resto de los ajustes en este cuadro de diálogo se puede dejar en sus valores por defecto en Photoshop.

9

Haga clic en Guardar.

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

10

Introduzca un nombre para la imagen y guardarlo en la carpeta de imágenes (o cualquier otra carpeta) en la carpeta del sitio local.

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 Web Cuadro de diálogo Dispositivos. La ventana de vista previa muestra claramente el efecto cada vez más degradantes que eligen cada vez menos colores produce.



Artículos Relacionados

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

Si está trabajando con un gráfico que se puede visualizar 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…

Cómo optimizar las imágenes jpeg para su sitio de redes sociales Cómo optimizar las imágenes jpeg para su sitio de redes sociales

JPEG es una elección buen formato para su sitio de redes sociales. El formato JPEG es la mejor opción para la optimización de imágenes de tono continuo, como fotografías e imágenes con muchos colores o degradados. Al optimizar un JPEG, puede…

Cómo optimizar su imagen de la portada de facebook con photoshop ahorrar para cuadro de diálogo Web Cómo optimizar su imagen de la portada de facebook con photoshop ahorrar para cuadro de diálogo Web

Después de obtener su cubierta de Facebook y del perfil fotos posicionados donde quieras, optimizar la imagen de la portada antes de subirlo a Facebook en los pasos que siguen. Recuerde que su imagen de la portada debe primero ser cultivada para…

Cómo guardar imágenes para utilizar en su sitio de redes sociales Cómo guardar imágenes para utilizar en su sitio de redes sociales

Usted tendrá que saber cómo guardar imágenes que se utiliza en medios de comunicación social site.If eres nuevo en el almacenamiento de imágenes para la web, los siguientes conceptos básicos pueden ayudarle a obtener los mejores resultados de…

Optimizar obra gif en los fuegos artificiales Optimizar obra gif en los fuegos artificiales

Cuando tú optimizar obra en Fireworks, elija el formato de archivo para la exportación y luego especificar otros parámetros. Si su diseño tiene grandes áreas de colores y otros elementos sólidos, como un logotipo del cliente, el formato de…

Las mejores formatos de imagen para el iphone y el ipad Las mejores formatos de imagen para el iphone y el ipad

Al diseñar sitios web para el iPhone y el iPad, que necesita para elegir los mejores formatos de imagen de las fotos, arte lineal, logotipos, dibujos animados y otras imágenes que desea visualizar.Si usted trabaja con fotos u otras imágenes que…

Cambiar la opacidad de los colores en el diseño web Cambiar la opacidad de los colores en el diseño web

Durante años, los diseñadores web han estado utilizando la transparencia en los sitios web de almacenamiento de imágenes, ya sea en el formato PNG o GIF y haciendo un color transparente. Aunque este método no es lo ideal, que ha trabajado como…

Cómo optimizar las imágenes JPEG para la web Cómo optimizar las imágenes JPEG para la web

Tener imágenes llamativas en su sitio web es una de las mejores maneras de atraer iPhone y iPad entusiastas conscientes de la imagen. El formato JPEG es la mejor opción para la optimización de imágenes de tono continuo, como fotografías e…

Optimizar imágenes en photoshop para iPhone y iPad Optimizar imágenes en photoshop para iPhone y iPad

Debe utilizar un programa de edición de gráficos, como Adobe Photoshop o Fireworks, para crear gráficos para la web en el diseño para el iPhone y el iPad. Puede utilizar el cuadro de diálogo Guardar para Web en Adobe Photoshop para optimizar…

Convertir elementos del photoshop 10 imágenes en el modo de color indexado Convertir elementos del photoshop 10 imágenes en el modo de color indexado

Color indexado es un modo utiliza ocasionalmente con gráficos de la tela, como guardar en formato GIF o PNG-8. Al guardar imágenes en color indexado, se pueden crear archivos más pequeños que RGB que son ideales para usar en diseños de sitios…

Capas en Photoshop Elements 10 Capas en Photoshop Elements 10

En Elementos, capas son esencialmente versiones digitales de las hojas de acetato transparente. Usted puede colocar elementos, como imágenes, texto o formas, en capas separadas y crear un compuesto (o collage, si tu prefieres). Puede ocultar,…

Formatos de formato de proyecto Photo y archivo eps photoshop en Photoshop Elements 10 Formatos de formato de proyecto Photo y archivo eps photoshop en Photoshop Elements 10

Muchos formatos de archivo diferentes están disponibles en Photoshop Element pero probablemente tendrá que usar sólo unos pocos. Entre los formatos más comunes son de formato Photo Project (* .PSE) y Photoshop EPS (* .EPS).Photo Project formato…

» » » » ¿Cómo optimizar imágenes de la web en formatos PNG