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 😉
Es un programa de diseño gráfico de la marca Adobe y debo decirte que es mi favorito!
Es un Software de edición fotográfica profesional, también de pago
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.
Es editor gráfico un poco más completo que el Paint que nos trae Window.
Es un editor similar a Photoshop y que puedes trabajar de manera online.
Este es un programa de pago en el cual puedes colocar filtros a tus imágenes, agregar textos y hacer retoques.
Es un editor de imágenes en el que puedes crear figuras, poner filtros, stickers y retoques.
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.
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.
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.
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
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.
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!
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.
Al igual que en Photoshop la redimensionaremos.
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.
Como puedes ver me ha dejado incluso menos peso que en Photoshop!
Y si la pasamos por Tiny? Veamos…
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!!
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.
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!
Madre. Consultora de Marketing Digital y Diseñadora web. Enamorada del Marketing Digital y las acciones que pueden hacer crecer tu negocio de manera online. En el Blog encontrarás información sobre ello, WordPress y diferentes herramientas que te serán útiles para tus proyectos digitales.
Muy buena la página
Gracias por compartir
Muchas gracias Iván!! Saludos!!
luego que están guardadas, ¿deberían ir escritas con alguna descripción para mejorar el seo? me refiero al pie de foto.
Hola Melina, exacto, el título y alt hay que optimizarlo para SEO. Saludos!!