Cargando

Ir a contenido


 


Cómo optimizar comprimir imagen en Adobe Photoshop

Mejora la velocidad de carga de tu sitio web aprendiendo cómo optimizar y comprimir tus imágenes con Adobe Photoshop de forma sencilla.


Escrito por el dic 15 2016 15:04 design photoshop



Tener un sitio web no se basa únicamente en la subida sin control de contenido, hay que cuidad la estructura de la web incluido cada elemento que albergamos en ella. Hay que tener en cuenta que se accede a través de conexiones de Internet y que, aunque en muchos sitios se goza de altas velocidades, en otros aún se encuentran algo rezagados. Todo ello sin contar con la importancia del tema mobile y el gasto de megas.

 

Lo que no debemos hacer es convertir nuestro sitio web en un espacio lento al que la gente no quiera volver a entrar, algo que podemos evitar si tenemos en cuenta distintos elementos. Uno de ellos y muy importante es la subida de imágenes. Si tienes un site con bastante contenido visual debes cuidarlo tanto por dentro o por fuera.

 

Si subes imágenes muy pesadas, tu página será lenta y los usuarios se cansarán e irán. Si quieres evitar perder visitas cuida todo lo que subes y aprende a optimizar tus imágenes en Photoshopreduciendo su tamaño.

 

 


1. Tipos de formatos de imagen en Adobe Photoshop


Para poder hablar de optimización de imagen tenemos que distinguir qué tipo de formato de imagen tenemos y cuál nos conviene más.

 

Formato JPEG
Para el uso general de fotografía, es el formato estándar utilizado con buenos resultados de calidad. Admite color de 24 bits.

 

Formato PNG-8
Es la alternativa a GIF pero sin animaciones y permite mostrar hasta 256 colores. Su compresión para web es de las más adecuadas permitiendo buena calidad con tamaños reducidos.

 

Formato PNG-24
Es una buena opción para exportar imágenes de calidad al igual que JPEG. Es conveniente este tipo de extensión cuando tengamos una imagen que contenga transparencia. También muestra hasta 16 millones de colores ya que admite color de 24 bits.

 

Formato GIF
Es el formato para animaciones por excelencia. Permite representar hasta 256 colores en formas de gran cantidad de color uniforme, líneas o texto.

 

Para este tutorial elegiremos dos de los formatos más útiles y usados para subir imágenes a la web: JPEG y PNG-8.

 

 


2. Optimizar tamaño de imagen en Adobe Photoshop


Cuando trabajamos en un espacio de trabajo en Photoshop, lo hacemos atendiendo a unos parámetros determinados en función de la imagen o de carácter general. Uno de ellos es el tamaño, las proporciones de la imagen con la que trabajamos. El tamaño de una imagen corresponde al número de píxeles que contiene de forma vertical y horizontal dando lugar al tamaño de la imagen.

 

A lo que llamamos resolución significa el número información de datos que hay en un espacio concreto y que se denomina píxeles por pulgada o ppp. Esto suponer que, a mayor cantidad de píxeles por pulgada, nuestra resolución será mayor.

 

Una vez diferenciados ambos aspectos hay que reseñar que dos imágenes pueden tener el mismo tamaño pero distinta resolución y proporciones. Si son imágenes para web se recomienda tratar los tamaños en tamaño de píxeles. Para acceder a ello ve a Imagen / Tamaño de imagen o presiona la siguiente combinación.

 

 

Alt + Ctrl + I

 

 

 

Nota
La opción de Remuestrear imagen permite que podamos cambiar el tamaño sin modificar la resolución. Selecciona la opción más adecuada a lo que necesites.

 

 


3. Optimizar perfil de color de imagen en Adobe Photoshop


El espacio de color donde trabajamos también influirá en el archivo final. Hay mencionar la diferencia entre espacio sRGB y RGB. El sistema Adobe RGB fue introducido por la compañía en 1998 y compone un espectro mucho más extenso de color que el espacio sRGB. Esto no quiere decir que sea peor, sino que se dedican para diferentes objetivos.

 

El sistema RGB se acerca con su espectro más al de CMYK, el cual está orientado al mundo de la impresión. Pese a tener más colores, el estándar repartido digitalmente en dispositivos ya sean móviles, monitores o cualquier dispositivo digital, es el de sRGB. Cuando uno de estos dispositivos topa con RGB intenta comprimir el exceso de colores y crea un falso sRGB con peores resultados.

 

Paso 1

Por lo cual se recomienda realizar las fotografías, espacio de trabajo en Photoshop o la optimización de ellas con este sistema para mejorar las compatibilidades de color. Para cambiar el perfil de color de trabajo ve a tu menú Edición y selecciona Convertir en perfil.

 

 

Paso 2

En la siguiente ventana sólo tendrás que elegir el perfil que necesitas, en este caso el sRGB.

 

 

 


4. Optimizar imagen al guardar como JPEG en Adobe Photoshop


El formato JPG es el estándar más usado y aunque permite compresión, no ofrece tantos parámetros editables como PNG. Podremos variar el peso final de nuestra imagen redimensionando nuestra fotografía o al exportar.

 

Paso 1

Al guardar como JPEG vemos que tenemos dos opciones, por un lado, configurar las opciones de imagen (calidad) y, por otro, las opciones de formato. Para ello ve al menú de Archivo / Guardar como o la siguiente combinación y seleccionar el formato JPEG.

 

 

Mayús + Ctrl + S

 

 

 

Paso 2

En la siguiente ventana aparecen estos parámetros de configuración. Veamos qué significa cada uno.

 

 

Opciones de imagen
Aquí debemos elegir la calidad final de la imagen, es evidente que a mayor calidad mayor tamaño de archivo pudiendo ver lo que ocupará finalmente si pulsamos en Previsualizar. Mueve la barra para poder modificar estos valores.

 

Si queremos una fotografía para imprimir tamaño póster debemos de seleccionar una calidad mucho más alta que si queremos una imagen para web, recordemos que a mayor tamaño de imagen, más recursos se necesitarán para cargarlo vía web.

 

Opciones de formato
Dentro de aquí encontramos diferentes alternativas para dar formato final a nuestra imagen. La más recomendada es la línea de base estándar pues suele ser la más compatible.
  • Línea de base ("Estándar"). Emplea el uso de un formato que es reconocible por la gran mayoría de navegadores web y programas. En la actualidad los últimos programas no suelen dar incompatibilidades.
  • Línea de base optimizada. Este formato te creará un archivo de imagen que contiene colores optimizados dando con ello un tamaño más pequeño.
  • Progresivo. Con esta opción se mostrarán diferentes versiones que serán cada vez más detalladas a medida que se vaya descargando. Es el usuario el que decide cuántas se crearan. Es un formato que se utilizaba y se utiliza mucho cuando nos dirigimos a conexiones lentas que precisan de barridos barridos para ser cargadas.

 

Nota
Hay que mencionar que no todos los navegadores llegan a reconocer o admitir imágenes JPEG que sean progresivas u optimizadas.

 

 


5. Optimizar imagen al guardar como PNG en Adobe Photoshop


Paso 1

Para exportar como PNG tenemos que hacer el mismo primer paso que con los otros formatos, ir a Menú Archivo/ Guardar como y seleccionar en este caso PNG.

 

 

Paso 2

Ahora verás en la venta de guardado que te aparecen diferentes opciones.

 

 

Compresión
Podemos seleccionar el tipo de compresión que queremos o decir ninguno si no queremos que se aplica. En función de la elección se aumentará o reducirá la velocidad de carga.

 

Entrelazar
Esta opción es importante, sobre todo, si hablamos de plataformas web. Veamos la diferencia:
  • Ninguno. Esta opción permite que sólo se muestre una imagen cuando se ha cargado por completo, es decir, si contamos con una conexión lenta o con problemas, la imagen no aparecerá hasta ser cargada en la transferencia de Internet.
  • Entrelazado. Esta opción es más recomendada para servicios web ya que va mostrando versiones reducidas de la imagen a medida que se va cargando. Eso ayuda a que el proceso de descarga sea más pequeño y además el usuario sabrá que la imagen se está descargando.

 

 


6. Optimizar imagen al guardar como Web manualmente JPEG en Adobe Photoshop


Paso 1

Una de las opciones más ventajosas que contamos en Photoshop para la optimización de imágenes, es la de Guardado como web que nos permite ajustar de forma manual diversos parámetros. Este guardado es muy útil para imágenes dedicadas a la subida web permitiendo imágenes de calidad, pero con tamaño reducido. Para ello vamos Archivo/ Guardar para web o hacemos la siguiente combinación.

 

 

Alt + Mayús + Ctrl + S

 

 

 

 

Paso 2

Si queremos seleccionar JPEG tendremos estas configuraciones.

 

 

Calidad de imagen
Selecciona la calidad de imagen que prefieras desde Baja hasta Máxima o con los valores de la derecha. Puedes ir viendo la variación de tamaño debajo de la imagen en la parte izquierda.

 

Progresivo
La imagen se irá cargando poco a poco, es decir, pasaremos de verla de baja resolución a la verdadera.

 

Entrelazado
Muestra la imagen solo cuando está cargada por completo.

 

Halo
Si la imagen es transparente selecciona un color de halo equivalente al de fondo de la página donde va a ser incrustada.

 

Incrustar perfil de color
Selecciona esta opción para conservar el perfil ICC de la imagen, algunos navegadores web lo utilizan para poder corregir el color.

 

Convertir en sRGB
Utiliza este perfil para mejorar las compatibilidades de color en dispositivos y monitores.

 

Tienes otras opciones como modo de previsualización, los metadatos o cambiar el tamaño con o sin restricción.

 

 


7. Optimizar imagen al guardar como Web manualmente PNG en Adobe Photoshop


Paso 1

Como ya sabemos para poder acceder al Guardado para Web en PNG debemos ir a Archivo/ Guardar para web. Recordemos que este formato es muy bueno para imágenes con destino web ya que su resultado da muy buena relación entre calidad y peso de archivo.

 

 

Paso 2

Para exportar como PNG selecciónalo en el menú desplegable. Recuerda que el PNG 24 ofrece más cantidad de color por lo que los tamaños son mucho más altos que los de PNG-8. Te recomendamos este último para imágenes estándar web. La ventana que nos aparece es similar a la de JPEG y además de las opciones ya vistas en el apartado anterior podemos elegir también:

 

 

Transparencia
Aquí puedes seleccionar el tipo de transparencia que mejor convenga a tu imagen o bien eliminarla y seleccionar un color determinado con Halo.

 

Ajuste a Web
Este parámetro permite comprimir aún más la imagen, cuanto mayor sea el porcentaje de ajuste mayor compresión, menor calidad y menos tamaño.

 

 


8. Optimizar imagen al guardar como Web automáticamente PNG y JPEG en Adobe Photoshop

 

Paso 1

Para poder realizar una compresión automática tanto para PNG como para JPEG, abrimos el guardado para web en Archivo / Guardar para Web o la combinación de teclas siguientes.

 

 

Alt + Mayús + Ctrl + S

 

 

 

 

Paso 2

A la derecha de la opción Ajustes preestablecidos, pulsa en la pestaña de menú que aparece y selecciona Optimizar a tamaño de archivo.

 

 

Paso 3

Ahora tan solo tendrás que seleccionar el tamaño que desearías tener de la imagen y el programa te realizará automáticamente la compresión. Puedes ir variando los valores para obtener distintos resultados.

 

 

Paso 4

También puedes ir a la ventana que se denominada 4 copias y seleccionar una de las versiones que se te proporcionan desde ahí y guardarla.

 

 

 

Paso 5

Si quieres modificar el tamaño y velocidad de transferencia, pulsa en los valores de debajo de la imagen y selecciónalos automáticamente.

 

 

Como ves existen distinta formas de poder reducir el tamaño de tus imágenes en función del fin que tengan. Hay muchos parámetros que debes tener en cuenta pero según el nivel que requieras te serán más útiles unos u otros. En el siguiente vídeo te mostramos de forma gráfica cómo optimizar y comprimir imágenes de forma básica y completa. Si quieres una compresión rápida te vendrá bien el primer método y si buscas algo más complejo donde editar todos los parámetros, tu método es el segundo.

 

 

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado dic 15 2016 15:04
  •   Actualizado dic 15 2016 16:08
  •   Visitas 2.6K
  •   Nivel
    Intermedio



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse