Cómo guardar una imagen en Photoshop para utilizar en diseño web

Adobe Photoshop es uno de los programas mas completos que existen. Aunque nació como un editor de fotos, con el tiempo sus usos se ha ido incrementando. Una de las tareas mas habituales que hoy por hoy realizan muchos usuarios es la de guardar imágenes para subir a una página web o blog. Y en esta tarea Photoshop puede ser muy práctica.

Hay que tener muy en cuenta, que el procedimiento para guardar un archivo de imagen destinado al diseño web nada tiene que ver con una foto que luego va a ser impresa. Ni el formato de color, ni la resolución es la misma.

Características de las imágenes destinadas para la web

Antes de explicar cómo tratar una foto para web debemos tener presentes alguna premisas previas. Por ejemplo en la resolución de las imágenes para web lo mas recomendable es que tengan 72 píxeles por pulgada. Además deben ir en formato RGB o en escala de grises.

En cuanto al formato ideal para subir a una web el JPG es el mejor. También el formato PNG puede resultar útil para imágenes transparentes. Los GIF son ideales para imágenes en movimiento ya que no suelen ocupar mucho espacio.

Debemos ser conscientes que si subimos a una web un archivo muy grande lo único que estaremos haciendo es sobrecargarla web y su funcionamiento. Y la velocidad de carga de una web incide de forma directa en el posicionamiento. Así que una forma de mejorar la velocidad de carga de una web es reducir el tamaño de las fotos. Muchos se preguntan cuánto debe pesar una imagen para una web o blog. Nuestra recomendación es que no supere los 100 kb.

Es cierto que también existen plugins sobre todo en WordPress que ayudan a optimizar imágenes. Sin embargo, y aún así, es preferible reducir los tamaños antes de subir las fotos y no dejar todo el trabajo al plugin. Además, para que el plugin pueda realizar mejor su trabajo es preferible dejarle la foto a un tamaño mas reducido.

Con estas consideraciones previas veamos cómo guardar archivos de imagen para utilizar en diseño web.

Cómo Guardar una foto en Photoshop para subir a una web

Para empezar solo tienes que abrir Photoshop e ir al menú Archivo > Exportar > Guardar para Web. De esta forma accederemos a una pantalla en la que tendremos todos los elementos necesarios para guardar una imagen web en Photoshop.

En la pantalla que vemos a continuación encontraremos todas las opciones disponibles para tratar una imagen ideal para diseño web.

guardar fotos para web con photoshop
Pantalla de Photoshop para guardar imágenes para web.

Una vez nos encontremos en esta pantalla debemos fijarnos en la columna de la derecha en la que tenemos todas las opciones.

Como podemos observar, la primera opción es la de Ajustes preestablecidos. Aquí Photoshop guarda una serie de ajustes básicos que podemos aplicar si no queremos complicarnos la vida. Una vez establezcamos el ajuste, con solo decirle Guardar ya tendremos la imagen preparada para publicar en internet.

Pero si queremos controlar bien el tamaño y la calidad lo ideal es utilizar los ajustes personalizados que Photoshop pone a nuestra disposición.

Justo debajo de la opción Ajustes Preestablecidos podemos seleccionar el formato de archivo en el que queremos guardarlo.

como guardar formato imagen photoshop
Desde aquí podemos seleccionar el formato de archivo en el que deseamos guardar la imagen.

En esta opción tenemos la posibilidad de guardar hasta cinco formatos de imagen diferentes para Photoshop:

  1. GIF. Ideal para imágenes en movimiento.
  2. JPEG. El mejor formato de imagen para subir a una web.
  3. PNG-8. Recomendable para imágenes transparentes. Muy habitual para subir logotipos o favicons.
  4. PNG-24. Igual que el formato anterior pero ofrece más calidad, y por tanto, un tamaño de imagen superior. Elegir PNG 8 o PNG 24 para web es cuestión de la calidad que busquemos y el uso que le vayamos a dar.
  5. WBMP. Es un formato poco utilizado para imágenes en monocromo.

Una vez elijamos un formato u otro, Photoshop cambiará la pantalla con unas opciones u otras.

Cómo Comprimir en JPG en Photoshop

Veamos cómo optimizar imágenes en JPG para web en Photoshop que al fin y al cabo es el tipo de archivo mas habitual. Lo primero que tendremos  que hacer es elegir la calidad en la que queremos la imagen.

guardar calidad jpg en photoshop
Podemos elegir la calidad del JPG.

En la parte izquierda podemos elegir desde calidad baja hasta máxima. También podemos elegir directamente la calidad del JPG desde 0 a 100 en la parte derecha.

Además de la calidad también podemos elegir entre diferentes opciones de perfiles de color. Una interesante opción Progresiva, que reduce todavía mas el tamaño de un JPG. Así, se supone que la imagen podrá descargase de forma progresiva, mejorando aún más la velocidad de carga.

Cómo comprimir imágenes en PNG y en GIF

En cuanto a guardar imágenes en PNG o GIF las opciones son muy similares. Es cuestión de elegir la calidad, comprobar el tamaño y guardar.

Elijamos la calidad que elijamos debemos tener presente que la visualización sea correcta. Si reducimos en exceso la calidad puede que no se vea bien en pantalla. Para ajustar la calidad siempre tendremos la imagen previa.

Siempre podremos comprobar el tamaño final en el que se quedará la imagen, incluso antes de guardarla. Justo debajo de la imagen previa tenemos el tamaño del archivo. Si vas cambiando la calidad verás como el tamaño aumenta o se reduce. Recuerda que una imagen de más de 100 kb puede acabar perjudicando al tamaño final de una web.

En definitiva existen muchas formas de comprimir un archivo para subirlo a una web. Sin embargo, Adobe Photoshop es la opción mas completa que existe hoy por hoy.

Soler Solaz Samuel

Soler Solaz Samuel

Fundador de katekismo.com. Periodista. Al tanto de todas las novedades, noticias e informaciones que facilite la tarea a los amantes de la tecnología.

Artículos: 494

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *