En este post semi tutorial, os contaré como optimizar imágenes con Photoshop paso a paso, de una manera muy sencilla y rápida. Con trucos y consejos útiles.
No es necesario tener conocimientos de Diseño Gráfico. Podrás subir a tu Web o Redes Sociales imágenes optimizadas de una manera muy sencilla. Podrás optimizar tanto tamaño como su peso. Además os daré pequeños trucos básicos de retoque para conseguir un resultado profesional.
Quizás la mayoría ya habéis trabajado con Photoshop alguna vez. Aún así, resumiré los pasos en detalle para que este post pueda servir a todo el mundo.
¿Empezamos a optimizar imágenes? ¡Vamos!
COMO OPTIMIZAR IMÁGENES CON PHOTOSHOP: PASO A PASO
PASO 1: ABRIMOS LA IMAGEN EN PHOTOSHOP
Para empezar a optimizar nuestras imágenes en photoshop, debemos abrirlas en el programa. Si utilizas un Mac podrás arrastrar la imagen directamente al icono de Photoshop (Ps). Si usas un Pc, debes abrir el programa manualmente.
Una vez dentro, arriba, a la izquierda pinchamos en Archivo: Abrir. (Cmd+O)(cntrl+O) Se nos abrirá una ventana para que busquemos en nuestro ordenador la imagen a optimizar.
PASO 2: CAMBIAR EL TAMAÑO DE LA IMAGEN
A veces ocurre que nuestras imágenes tienen un tamaño más grande o más pequeño del deseado. Una imagen grande tiene fácil solución. El problema son las imágenes pequeñas. Ya que si tratamos de agrandar una imagen pequeña puede pixelarse y perder calidad. No os aconsejo hacer esto ya que el resultado será bastante chapucero.
En cambio, si queremos optimizar una imagen en Photoshop reduciendo su tamaño es muy sencillo. El tamaño de una imagen se puede medir en centímetros o en Píxeles. Normalmente en Diseño se habla de Píxeles. Es una medida menos común pero es importante empezar a familiarizarse con ella.
¿CÓMO SABER SI UNA IMAGEN ES PEQUEÑA O GRANDE?
Existen patrones que más o menos te pueden orientar. Aquí os dejo una pequeña tabla que os puede ayudar:
- GRANDE: igual o mayor a 1024×768 píxeles
- MEDIANA: entre 320×240 a 1024×768 píxeles
- PEQUEÑA: menor a 320×240 píxeles
- MUY PEQUEÑA: menor a 100×100 píxeles
Para cambiar el tamaño y optimizar así imágenes en Photoshop debemos ir a Imagen: tamaño de la imagen (alt+cmd+I)(alt+cntrl+I). Se nos abrirá una ventana donde nos aparecerá el tamaño original de la imagen. Da la opción de verlo en diferentes unidades de medida. La más recomendable es en Pixeles.
¡Ojo! Hay dos maneras de cambiar el tamaño de la imagen. Podemos definir unas medidas personalizadas. O mantener una proporción entre anchura y altura. Para ello es importante que la opción restringir proporciones (un icono en forma de eslabón) esté desactivada (primera opción) o activada (2º opción proporcional).
PASO 3: APLICAMOS RETOQUES (OPCIONAL)
Una vez tengamos nuestra imagen optimizada a tamaño, podemos pensar si queremos aplicar algún retoque. Quizás ajustar un poco el brillo y el contraste. O el equilibrio de color. O incluso introducir algún texto o alguna forma.
Para los ajustes de imagen, debemos ir a Imagen: Ajustes. Ahí se desplegará una serie de opciones que podrás usar para tus retoques. Son muy intuitivos y podrás ir probando con todos ellos. Los más utilizados son estos:
- NIVELES Y CURVAS: Para modificar el color y la tonalidad de la imagen.
- EQUILIBRIO DE COLOR: podrás ajustar los colores de la imagen. Por ejemplo: si quedó muy rojiza por el sol. Si quieres cambiarla a blanco y negro, es mejor que des directamente a esa opción en Ajustes de imagen.
- BRILLO Y CONTRASTE para modificar estos niveles en tu imagen.
- FILTRO DE FOTOGRAFÍA: podrás añadir filtros a tus imágenes.
- SOMBRAS E ILUMINACIONES: podrás equilibrar las sombras y las luces de tus imágenes.
PASO 4: EXPORTAR IMAGEN PARA OPTIMIZAR SU PESO
Un paso muy importante a la hora de optimizar imágenes con photoshop es como exportamos dicha imagen. Cuando aplicamos muchos retoques a una imagen, su peso aumenta. Es decir el espacio que ocupará la imagen en el dispositivo de almacenamiento va a ser mayor. Esto es muy importante si esa imagen la queremos incluir en nuestra web. Por eso existe una manera eficiente de exportar en photoshop que es la que debemos usar siempre.
Nos vamos a Archivo: exportar: guardar para web (alt+cmd+mays+S)(alt+cntrl+mays+S). Se nos abrirá una ventana donde tendremos varias opciones. La información de nuestra imagen aparece en la esquina inferior izquierda. Ahí podremos ver como cambia el peso en función de como modifiquemos las opciones. Debemos fijarnos en:
- EL FORMATO: JPEG, PNG… Arriba a la derecha nos dejará modificarlo.
- LA CALIDAD: no es necesario que esté al 100%. Si nuestra imagen pesa mucho podemos bajarle un poco esa calidad. El resultado seguirá siendo de 10.
- EL TAMAÑO: si hiciste bien el PASO 2 estará al tamaño deseado. Sino podrás modificarlo aquí.
Cuando todo este configurado como queremos, pulsamos el botón guardar.
¡Listo! Se nos guardará nuestra imagen optimizada.
COMO OPTIMIZAR IMÁGENES CON PHOTOSHOP PARA TU PÁGINA WEB
En Diseño Web, saber optimizar imágenes es clave. Cuanto menos pese una imagen dentro de una web, mejor cargará esta y eso será premiado por los buscadores (SEO).
A veces no sabemos que dimensiones deben tener nuestras imágenes en la web y esto puede ser un quebradero de cabeza. Si es tu caso, te recomiendo usar la extensión de Chrome: Page Ruler. Al usarla se te dibujará una regla en tu pantalla. Así podrás obtener información sobre las dimensiones en píxeles. Podrás medir los objetos de cualquier página web.
También es importante comprimir al máximo las imágenes antes de subirlas. Aunque hayas hecho todos los pasos para optimizar las imágenes en photoshop, siempre es recomendable. Esto no significa que vayan a perder calidad. Existen diferentes herramientas online. Mi favorita es TinyPNG. Pero hay muchas más como Compressor.io, Jpegmini, ImageOptim…
Además de todo esto, si usas una web hecha en WordPress puedes instalar plugins tales como WP Smush.it o EWWW Image Optmizer. Estos dos plugins reducirán el tamaño de tus imágenes automáticamente. Cada vez que subas una nueva imagen, se reducirá su tamaño al instante. También da la opción de optimizarlas todas de golpe.
COMO OPTIMIZAR IMÁGENES CON PHOTOSHOP PARA TUS REDES SOCIALES
Saber optimizar tus imágenes también será muy útil en tus Redes Sociales. Son tu identidad visual. Por eso deben cuidarse igual que el contenido que acompañan. Tanto si trabajas como Community Manager como si simplemente quieres actualizar tu perfil.
Debes optimizar las imágenes en función de la Red Social donde quieras publicar. Aquí os dejo los tamaños de cada una de ellas. Recordar que optimizar el tamaño en una imagen con Photoshop es muy sencillo (PASO 2):
TAMAÑO IMÁGENES FACEBOOK
- Foto perfil 180 x 180px
- Foto portada 851 x 315px
- Fotos publicadas 940 x 788 px
- Fotos compartidas 1200 x 630 px
- Foto enlaces compartidos 1200 x 627px
TAMAÑO IMÁGENES TWITTER
- Foto perfil 400 x 400px
- Foto portada 1500 x 500px
- Foto tweet 1024 x 512 px
- Foto tweet card: 800 x 418 px
TAMAÑO IMÁGENES INSTAGRAM
- Fotos perfil 110 x 110 px (saldrá redonda)
- Foto cuadrada 1080 x 1080 px
- Foto vertical 1080 x 1350 px
- Foto horizontal 1080 x 566 px
TAMAÑO IMÁGENES LINKED IN
- Fotos perfil 400 x 400 px
- Foto portada 1584 x 396 px
TAMAÑO IMÁGENES GOOGLE PLUS
- Fotos perfil 250 x 250 px
- Foto portada 1080 x 608 px
Como habrás comprobado, es muy sencillo aprender a optimizar imágenes con Photoshop. Es algo que te llevará muy poco tiempo y tendrá resultados muy positivos en tu trabajo. Las imágenes son parte de tu marca personal, debes cuidarlas y tenerlas en cuenta en todos tus proyectos. Subir imágenes optimizadas solo traerá buenos resultados ¡A por ello!
Un post genial! Sobretodo el resumen de el tamaño de las imágenes para redes sociales.
Muchas gracias Gerardo. Me parece algo muy útil, me alegro que te guste 🙂
Claro como el agua cristalina. ¡Genial Silvia! ¡Gracias por el súper aporte!
Gracias a ti por estar siempre al pie del cañón 🙂
¡Enhorabuena por tu post! Muy bien explicado, de esta manera parece todo muy sencillo.
¡Muchas gracias! Sencillito y muy práctico 🙂
Sí señor! muy sencillo y fácil de aplicar.
¡Claro que sí! Muchas gracias Edu 🙂
Enhorabuena Silvia! Muy buen post para optimizar imágenes en photoshop, muy bien explicado y el vídeo te quedó genial.
¡Muchas gracias Ángel! Me alegro que te guste ☺
Me ha encantado el post, he probado hacerlo yo y me ha salido wuay. El video era perfecto!
¡Muchas gracias Álvaro! Me alegro que te haya servido. Ahora a optimizar todas ?