Cargando



Cómo optimizar comprimir imagen en Adobe Photoshop

Te enseñamos a optimizar y comprimir una imagen en Photoshop y así comprimir imágenes sin perder calidad.


sep 16 2022 14:55
Intermedio
Total de Apartados : 8
ene 09 2023 17:42

Tener un sitio web no se basa únicamente en la subida sin control de contenido, hay que cuidad la estructura del 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. Por eso comprimir imágenes sin perder calidad Photoshop es una tarea muy buscada por los creadores que piensan en el interés de los usuarios.

 

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 y aprendemos a comprimir imágenes en Photoshop. 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 al comprimir imágenes Photoshop y hacer que la página vaya mucho más rápida.

 

Tutorial con vídeo para poner fondo transparente Photoshop y así eliminar fondo blanco Photoshop con diferentes opciones.

 

La velocidad de nuestro sitio web es esencial para la experiencia de usuario ya que no es lo mismo entrar en una página rápida que no resienta nuestra conexión a una web donde cargan muy lentamente todos los objetos que vemos. Además para ver las imágenes se tienen que descargar en el servidor por lo que a mayor volumen más tiempo tardará esa carga y probablemente el usuario se desespere y se marche. De ahí la importancia de editar imágenes en Photoshop y mejorar nuestra web o simplemente nuestro espacio al saber cómo comprimir imágenes en Photoshop. Dentro de los formatos que más vamos a ver destacaremos los siguientes cuando necesitemos imágenes para web:

 

Formatos de archivo optimizados para la Web
  • JPEG. Suele ser el formato estándar de uso para el guardado de imágenes.
  • PNG-24. Es un formato recomendable y bastante usado. Su uso suele estar destinado a imágenes que no podemos usar en JPEG porque necesitamos transparencia. Ten en cuenta que este tipo de archivo suele tener un tamaño mayor que los JPEG debido a su compresión sin pérdida. Admite color en 24 bits al igual que JPEG por lo que da lugar hasta a 16 millones de colores.
  • PNG-8. Es buena alternativa al uso del GIF con fines similares a ello menos en animaciones. Convertirá la imagen a un formato de color indexado como el GIF con hasta 256 colores.
  • GIF. Se suele usar para líneas, ilustraciones de color uniforme o texto y sobre todo, su uso es recomendado cuando hablamos de animaciones.

 

Con estos formatos y las opciones de optimización que iremos viendo tenemos que conseguir imágenes aptas para nuestras páginas web. 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 comprimir una imagen en Photoshopreduciendo su tamaño.

 

Para estar al día, recuerda suscribirte a nuestro canal de YouTube!
SUSCRIBETE EN YOUTUBE

 


1. Tipos de formatos de imagen en Photoshop


Seguro que ya te habrás dado cuenta de que no todos los archivos , en concreto de image, tiene diferentes formatos asociados. Esta variedad existe porque en función de las propiedades de la imagen y de su finalidad de uso será más apropiado un formato que otro. Por eso es útil conocer qué tipos de formato principales vamos a encontrarnos en Photoshop para saber cuál elegir en cada momento. 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. Cómo cambiar tamaño de imagen 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.

 

Ctrl + Alt + I

 

 

 

 

Aquí ya podremos cambiar las dimensiones de nuestra imagen configurando medidas y resolución. Aquí veremos la opción de “Remuestrear” la cual podremos activar o desactivar en función de nuestras necesidades:

 

  • Opción Remuestreo desactivada: Podrás cambiar tamaño o resolución de la imagen usando una redistribución de píxeles ya existentes en ella.
  • Opción Remuestreo activada. Con esta opción activada podremos modificar las dimensiones o resolución de nuestra imagen usando algoritmos de relleno de píxeles añadiendo o quitando píxeles tanto de la anchura como de la altura.

 

 

Si no queremos que se vea muy marcada la calidad por el cambio del tamaño de imagen que hayamos hecho, activaremos la opción de Remuestrear y elegiremos uno de los tipos para que se aplique sea modificación de píxeles de forma automática.

 

 


3. Cambiar perfil color 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.

 

2-Cómo-comprimir-una-imagen-en-Photoshop.png

 

Paso 2

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

 

 

 


4. Comprimir imagen rápido 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. En función de si necesitamos tener una imagen final en formato JPG o formato PNG encontraremos compresiones diferentes, por eso es útil saber qué vamos a hacer con esa imagen después. Por ejemplo, si tu imagen tiene muchos degradados y cambios de color progresivos, lo mejor es una compresión en JPG o en tal caso PNG a máxima configuración para evitar cortes de color demasiado pronunciados. Para composiciones de colores sólidos como ilustraciones, lo mejor será comprimir usando PNG en Photoshop. Vamos a ver cómo podemos comprimir una imagen rápidamente y poderla guardar tanto en JPEG como en PNG.

 

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

 

 

 

4-Comprimir-imagen-sin-perder-calidad-Photoshop.png

 

Paso 2

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

 

5-Comprimir-imagen-sin-perder-calidad-Photoshop.png

 

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. Comprimir imagen PNG Photoshop


Las siglas PNG provienen de Portable Network Graphics y es un formato que trabajará para un sistema de compresión sin pérdida, algo que supone hacer una reconstrucción de datos en base a la imagen original. Se suele usar en sitios web para ver imágenes digitales de alta calidad y se creó con el propósito de mejorar el rendimiento del GIF. El objetivo se alcanzó y además de tener una compresión sin pérdidas tendremos una paleta de color más completa y brillante.

 

Uno de los problemas de usar este formato es que si hablamos de una imagen con colores complejos donde tenemos muchos degradados y píxeles, habrá que aplicar la configuración más alta y acabará dando archivos finales con pesos elevados. De ahí que para ese tipo de imágenes se recurra al formato JPG ya que sino en web tendríamos imágenes muy pesadas y poco funcionales.

 

Veamos cómo hacer una compresión usando el formato PNG en 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.

 

4-Comprimir-imagen-sin-perder-calidad-Photoshop.png

 

Paso 2

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

 

6 guardar para web photoshop.png

 

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. Comprimir JPEG para web Photoshop


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. Vamos a ver en este caso cómo podemos trabajar con imágenes dirigidas sobre todo a ver aplicadas en páginas web y que necesitan de una buena calidad pero con tamaños reducidos para no comprometer el rendimiento de las páginas web.

 

 

Paso 1

Para ello vamos Archivo/ Guardar para web o hacemos la siguiente combinación de teclas:

 

Alt + Mayús + Ctrl + S

 

 

 

 

Paso 2

Si queremos seleccionar JPEG tendremos estas configuraciones que podemos ir modificando según el resultado final que busquemos.

 

 

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. Comprimir PNG para web Photoshop


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. Si tenemos una imagen de gráficos, ilustraciones o archivos pequeños para web, lo ideal es que trabajemos en formato PNG y además optimicemos su tamaño mediante el Guardado para web que estamos viendo en este capítulo.

 

Paso 1

Vamos a ir al menú de “Archivo/ Guardar para web” o bien usaremos la siguiente combinación de teclas:

 

 

Alt + Mayús + Ctrl + S

 

 

 

 

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 para web Photoshop


Dentro de Photoshop ya hemos visto algo de que contamos con la opción de Guardar para Web. Desde este comando vamos a poder hacer una previsualización de múltiples opciones de optimización para una imagen que está orientada a estar usada en Web. Cuando usamos imágenes en web buscamos sobre todo una calidad buena con tamaños de imagen reducidos para evitar un mal rendimiento de nuestras páginas web. Por eso desde la optimización para web podemos encontrar un buen equilibrio entre buena calidad y tamaños finales de archivo reducidos.

 

Por eso vamos a ver cómo poder usar la optimización para web y así configurar nuestros archivos al exportar con diferentes opciones entre las que podremos:

 

  • Usar ajustes preestablecidos
  • Cambiar Tamaño de imagen
  • Configurar metadatos
  • Elegir grado de ajustes a Web
  • Incrustar perfil de color
  • Optimizar tamaño y tiempo de descarga

 

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

 

 

 

6 guardar para web photoshop.png

 

 

 

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.

 

10-guardar-para-web.png

 

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.

 

11--guardar-para-web.png

 

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 distintas 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 para saber comprimir imagen Photoshop. 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 enseñamos a configurar y Preparar foto para imprimir Photoshop.


¿Te ayudó este Tutorial?

Sabes que puedes hacer Curso de Retoque Fotográfico Photoshop?

Entra y conoce este Curso con Certificado para ti completamente Gratis de tu interés

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!

X