Cuando vamos a crear nuestro sitio web necesitaremos de imágenes, pero no podremos tomar una, subirla y ya, ¡no! Debemos primero optimizarlas.

Así que hoy veremos cómo y con qué herramientas podremos lograrlo.

¿Por qué optimizar las imágenes?

Una web sin imágenes sería muy sosa. Y ojo, que aún hay varias así, entiendo que algunas pueden ser meramente informativas o con textos muy útiles para determinadas cuestiones, pero la realidad es que si acompañamos los textos con imágenes lucirá mejor y nos ayudará en la comprensión.

Entonces, como queremos que nuestra web sea visualmente atractiva y que los artículos que creemos sean de ayuda, lo ideal será colocar imágenes acordes al texto.

Si quieres tener tu Blog deberás saber cómo subir las imágenes, básicamente para cuidar nuestro espacio en el hosting y nuestra velocidad de carga de la web, un factor muy importante en SEO.

¡Google rastreará tu web y cuanto menos tarde muchísimo mejor!

No hay necesidad de subir una foto de gran peso y medidas exageradas que no se visualizarán más por ser excesivamente grandes.

En mi caso en particular las imágenes no excederán los 800 pixeles y para el Blog utilizo 600px, hablando del ancho de la imagen.

Por este motivo cuando tengo una imagen que voy a utilizar disminuyo sus medidas y de por sí ya disminuye su peso.

 

Formatos de las imágenes

Tenemos 3 tipos de imágenes que son las aconsejables:

  • PNG que suelen tener mejor calidad aunque su peso será mayor pero permite transparencias, la utilizaremos en nuestros logos por ejemplo
  • JPEG que será la de menor peso y el más adecuado para las imágenes de tu web
  • GIF que nos da la posibilidad de imágenes animadas

 

Programas para optimización de imágenes

Tenemos programas que son de pago y otros gratuitos, así que no tienes excusas para optimizar tus imágenes 😉

Photoshop

Es un programa de diseño gráfico de la marca Adobe y debo decirte que es mi favorito!

Affinity Photos

Es un Software de edición fotográfica profesional, también de pago

Gimp

Es un editor de Software libre, que puedes descargarte en tu PC, encontrarás tutoriales que te ayudarán y cursos, aunque éstos sí son de pago.

Paint.net

Es editor gráfico un poco más completo que el Paint que nos trae Window.

Photopea

Es un editor similar a Photoshop y que puedes trabajar de manera online.

PicMonkey

Este es un programa de pago en el cual puedes colocar filtros a tus imágenes, agregar textos y hacer retoques.

Fotor

Es un editor de imágenes en el que puedes crear figuras, poner filtros, stickers y retoques.

Befunky

Editor gráfico con varias funcionalidades, te invito a curiosear 😉 online y gratuito.

 

Tutoriales Photoshop y Photopea

Ahora haremos una comparación entre estos programas, Photoshop y Photopea, incluso Photopea te puede venir muy bien para trabajar online 😉

Vamos a tomar esta foto para realizar los tutoriales.

Imagen Original para optimizar

Su peso original es de 417Kb y con medidas de 1920×1280

 

Tutorial Photoshop

Una vez abierto el programa Photoshop, cargaremos la foto que deseamos optimizar para subir a nuestra web.

Nos vamos a la pestaña > Imagen > Tamaño de imagen

Se nos abrirá un recuadro donde nos da la información y desde allí podremos modificarla.

Tamano imagen Photoshop

 

En ancho pondremos la cantidad de pixeles que necesitamos para nuestra web.

Si fuera una imagen de cabecera seguramente la dejaríamos en 1920, sin embargo si es para la imagen de un post le pondríamos entre 600 u 800.

Podremos ver que se ha modificado proporcionalmente porque así está indicado.

Tamano imagen Photoshop modificada

 

Nuestra imagen veremos que se achica, sin embargo si le damos a Ctrl+Alt+0 la veremos en tamaño real.

Ya está lista la redimensión de nuestra imagen, ahora vamos a proceder a guardarla para web.

Para ello nos vamos a > Archivo > Exportar > Guardar para Web

Tamano imagen Photoshop exportar para web

 

Se abre otra ventana y tenemos una opción para elegir el formato en que la guardaremos, como ya te dije en esta ocasión nos convendrá hacerlo en jpg, png la utilizaremos cuando necesitemos fondo transparente.

Tamano imagen Photoshop exportar para web

 

Incluso puedes modificar la calidad para que el peso sea aún menor, en este caso está a un 50% y va muy bien, así que fíjate de ir variando ese parámetro para mejorar el peso de tus imágenes.

Y como ves, nos queda en 32,67Kb, un buen peso! Y la foto se verá genial en nuestro post!

Cuando le damos a guardar deberemos seleccionar en qué carpeta queremos guardar esa nueva imagen.

Hay imágenes que igualmente quedarán con un peso más alto y en ese caso es donde utilizaremos el compresor de imágenes, generalmente utilizo Tiny pero puedes utilizar el que mejor te resulte.

Para ello nos vamos a la web del compresor e insertamos la imagen que deseamos comprimir.

Como verás aquí debajo, de los 34.3Kb se ha comprimido y he logrado 23.8Kb, un 31% menos!

Compresor imagenes Tiny

 

Video Tutorial Photoshop

 

Tutorial Photopea

Entramos a la web de Photopea y en > File seleccionamos abrir, para poder exportar al programa la foto que deseamos optimizar.

Tamano imagen Photopea modificar

 

Al igual que en Photoshop la redimensionaremos.

Tamano imagen Photopea redimensionar

 

Este proceso seguro nos achicará la imagen y al igual que en Photoshop, con Ctrl+Alt+0 la veremos en tamaño real.

Esta herramienta está muy buena si no tienes Photoshop!

Veamos ahora cómo exportar nuestra imagen.

Tamano imagen Photopea guardar

Tamano imagen Photopea guardar

 

Como puedes ver me ha dejado incluso menos peso que en Photoshop!

Y si la pasamos por Tiny? Veamos…

Compresor imagen Photopea Tiny

 

La ha bajado un 10%, no está nada mal!

 

Video Tutorial Photopea

 

Compresores de imágenes

Como has visto en los videos, es importante utilizar compresores de imágenes ya que nos bajarán un buen porcentaje del peso de las mismas.

Incluso hay imágenes que las comprimen a un 80, incluso 90% así que no olvides este paso que es fundamental!!

Tiny

Compressor.io

Optimizilla

Compressjpeg

Short Pixel

Webresizer

 

Plugins para optimizar imágenes

Nunca está de más tener en tu sitio web un plugin que te ayude con la tarea de compresión así quete dejo aquí algunos de los que he utilizado.

Optimizador.io

EWWW image Optimizer

Lazy Load

WP Smush.it

 

Conclusión

¡Espero que estas herramientas te sirvan para mejorar y optimizar las imágenes en tu web!

Optimizar tus imágenes puede demandarte tiempo pero te aseguro será un tiempo bien invertido, así que espero desde hoy tomes este recaudo 😉

Nos vemos, ¡que tengas buen día!

Cómo optimizar imágenes para tu sitio web (Tutoriales Photoshop – Photopea)
4.2 (84%) 5 vote[s]

¡Suscríbete al Blog!

Suscríbete y recibe los contenidos del Blog y además contenidos y promociones exclusivas

Políticas Privacidad

¡Gracias por suscribirte! Estamos en contacto ;)

Pin It on Pinterest