Optimizar imágenes para mejorar el SEO en 4 pasos

por | Actualizado el 6 Sep, 2020 | 0 Comentarios

¿Cómo optimizar imágenes para mejorar el SEO?

Si estás haciendo la web de tu negocio por tu cuenta, o escribes de forma regular en tu blog sabrás que la parte visual tiene mucha importancia a la hora de enganchar a tu lector. El diseño, el contenido… todo cuenta y para no sobrecargar la web y hacer que sea de carga lenta es necesario optimizar imágenes.

En este post hablaremos de cómo optimizar imágenes para mejorar el SEO y “gustar a Google”. No solo tenemos que limitarnos a comprimir nuestros ficheros (jpg, png, gif…), también tendremos que redimensionar nuestra imagen para que este lo mejor optimizada posible.

Este tema es muy importante ya que las imágenes pueden ser unas de las cosas más pesadas de nuestra web.

Subir imágenes de mucha calidad hará que nuestra web cargue lento y esto no le gusta nada a Google, ya que la experiencia del usuario será negativa. Tendremos que optimizar las imágenes para mejorar el SEO y la velocidad de carga.

Pero al igual que no conviene subir imágenes de mucha calidad tampoco nos ayuda hacer justo lo contrario: se verán mal y dará una mala impresión a quien visita tu página web.

Así que vamos a ir paso por paso y hablaremos  de 4 grandes grupos:

  1. Saber que resolución usa tu monitor para elegir las dimensiones correctas de la imagen.
  2. Aprender donde redimensionar nuestras imágenes
  3. Comprimir o lo que es lo mismo, optimizar imágenes
  4. Que extensión ponerle a la imagen

Antes de seguir avanzando, esta primera parte de artículo está pensada a todo aquel que se haga con el producto tu web en 3 días. Por si te haces con dicha compra de tu web en 3 días puedas tener tu web optimizada al máximo respeto a imágenes.

Primer paso. ¿qué monitor usas al optimizar imágenes para mejorar el SEO?

Si eres diseñador lo sabrás. No te voy a descubrir América.

En el caso de no ser diseñador profesional, te diré que la misma web vista en diferentes monitores, con diferentes resoluciones se verá de una forma distinta.

Para saber que formato elegir tendremos que saber cómo tenemos configurado nuestro monitor y trabajar correctamente. Tenemos las dos opciones más comunes 4:3 o 16:9.

Con la tabla siguiente puedes detectar como es vuestro monitor. Para que te hagas una idea rápida la 4:3 suelen ser monitores más antiguos y 16:9 son los más modernos.

• 1024 x 768 píxeles (4:3): monitores de 14 y 15″.
• 1280 x 1024 píxeles (4:3): monitores de 17 y 19″.
• 1600 x 1200 píxeles (4:3): monitores de 19 y 21″.
• 1280 x 720 píxeles (16:9): monitores de 17 y 19″. Conocido como resolución HD.
• 1366 x 768 píxeles (16:9): monitores de 17 y 19″.
• 1600 x 900 píxeles (16:9): monitores de 19 y 22″.
• 1920 x 1080 píxeles (16:9): monitores de 24, 25, 27, 32″. Conocido como resolución Full HD.
• 2560 x 1440 píxeles (16:9): monitores de 24, 27, 32″.
• 3840 x 2160 píxeles (16:9): monitores de 27, 32″ y en adelante. Conocido como resolución 4K.
• 5120 x 2880 píxeles (16:9): monitores por encima de 40″. Conocida como resolución 5K.
• 7680 x 4320 píxeles (16:9): monitores por encima de 50″. Conocida como resolución 8K.

Cómo ver que resolución está usando de monitor

En cada ordenador puede variar, pero por norma general, dándole clic con el botón derecho de ratón sobre el escritorio, nos aparecerá la opción de configurar pantalla. Ahí es donde podemos ver la resolución que utiliza nuestro monitor.

resolución de pantalla
Visto esto nos centraremos en la resolución 16:9 que será lo normal o más genérico, ya que tenemos que elegir un formato para dimensionar y optimizar imágenes. Que en mi caso al ser resolución 1920×1080 pixeles, según la tabla superior corresponde a 16:9.

Dimensiones recomendables para optimizar imágenes

Hablaremos de Divi, pero igualmente puede servir para Elementor o cualquier constructor de maquetación por módulos.
Podemos observar el siguiente resumen:

optimizar imágenes con Divi

El ejemplo de la foto es con la configuración de nuestra web en 1080px. Si la vuestra es otra tendréis que convertirlo. Lo podéis ver en los ajustes de WordPress, ir a apariencia-personalizar-ajustes generales-ajuste de formato. Y nos fijamos donde pone Anchura de contenido del sitio web.

1 columna: 1080 x 608
¾ columna: 795 x 447
⅔ columna: 700 x 394
½ columna: 510 x 287
⅓ columna: 320 x 181
¼ columna: 225 x 128

¿Y qué significa esto?

Pues si por ejemplo metemos una fila que tiene 3 columnas, en alto de cada imagen tendrá que ser de 320px para tener una imagen optimizada, ya que si la ponemos mucho más grande estará desperdiciado y ocupará más innecesariamente.

Esta es la tabla que nos facilitan desde Divi, puedes ver su página aquí https://www.elegantthemes.com/blog/divi-resources/the-ultimate-guide-to-using-images-within-divi

Aunque hay un pequeño inconveniente (o no, dependiendo de vuestros gustos) de esa forma la imagen estará optimizada al máximo respecto a sus dimensiones, pero si metemos por ejemplo una fila de 4 columnas en una pantalla pequeña, por ejemplo, en una Tablet, sabremos que esas 4 columnas pasarían a ser 2 y 2.

margenes de columnas

Vemos como quedan muchos márgenes. Si queremos que ocupen más pantalla tendremos que aumentar los tamaños y actualizarlos a las sientes datos:
Para una relación de aspecto de 16: 9:

1 columna: 1080 x 608
⅔ columna: 770 x 433
¾ columna: 770 x 433
½ columna: 770 x 433
⅓ columna: 770 x 433
¼ columna: 370 x 208

De esta forma, quedará de la siguiente manera:

margenes Divi tablet

Ya es tu opción. De tus gustos y tus necesidades. Mi opinión sería si por ejemplo en vuestra página tenéis pocas imágenes es que metáis los formatos últimos ya que no habrá problema de carga por ser más grande la imagen y os quedará en pantallas pequeñas con mejor vista.

Si por el contrario tenéis muchas imágenes lo correcto sería meter las dimensiones de la imagen superior para no penalizar mucho en la carga de la web.

Imágenes de fondo del control deslizante de ancho completo

Aquí el ancho mínimo recomendado es: 1920px, el monitor es de 1280px. No obstante, los monitores más grandes son de 1920px, y la altura vendrá determinada por el contenido.

Imagen destacada de los Slider o post slider

En esta sección el ancho de la imagen será de 450px si es de 1 columna y en el caso de ser dos columnas serán 330px.

Imagen de portada del módulo audio

¿Qué es módulo audio? Al hablar del módulo audio me refiero al módulo que se puede elegir entre los muchos que tiene Divi para insertar una canción, sonido… al cual se le puede poner una imagen acompañándolo.

Aquí deberías colocar una imagen de un ancho de al menos de 780px

Módulo de Blog en la imagen destacada

cuando el ancho es completo:

1 columna: 1080
¾ columna: 795
⅔ columna: 700
½ columna: 510
⅓ columna: 320
¼ columna: 225

Módulo de blog en imagen destacada cuando el diseño es de cuadrícula e imágenes destacadas en módulo portafolio

Será de 795 px, ya que correspondería a 2/3.

Si quieres ver más detalles puedes ver la página de Divi https://www.elegantthemes.com/blog/divi-resources/the-ultimate-guide-to-using-images-within-divi

Pues hasta aquí los módulos más habituales. Una vez que ya sabemos que módulo vamos a usar, con que tipo de bloque y que fila vamos a trabajar en el diseño de nuestra web lo siguiente será REDIMENSIONAR y optimizar imágenes para mejorar el SEO

¿Cómo redimensionar y optimizar imágenes para mejorar el SEO?

Bueno una vez que conoces el tamaño que debes poner el siguiente paso es llevarlo a cabo.

Y esto… ¿Cómo lo hago? Voy a indicarte los pasos que yo sigo para ello.

Generalmente si tengo que poner una imagen especifica lo que hago es redimensionar solo el ancho. Por ejemplo:

Tenemos una imagen en 1080, y quiero meterla en una sección de 4 columnas, lo que tendría que ser 370px x 208px. Pero si ajustamos el ancho y el alto lo más probable es que se nos deforme la imagen. Así que ajusto el ancho y el alto que sea automático.

Pero además voy observando y ajustando. No dejando nada al azar. ¿Qué quiere decir esto? le doy 370 de ancho y el alto pongamos que se ajusta en 190, pues voy subiendo el ancho poco a poco y no quedándome en el mínimo para aprovechar y promediar, la máxima calidad.

Es cierto que así nos saldrá una imagen más pesada. No obstante, en el ejemplo de la Tablet al pasar las columnas de 2 en 2 se verá estéticamente mejor y por unos megapíxeles más no será el fin del mundo. Así que quizás suba a 383px el ancho por lo que el alto se quedará en 203px.

Estos detalles son a gusto de consumidor. Si con 370px de ancho visualmente lo ves bien pues no se hable más.

En resumen, podéis jugar siempre un poco hacia arriba el ancho (sin volverse loco). Nunca le daremos menos pixeles, siempre será subiendo un poco. si quieres aprovechar el ancho total de la columna claro está.

Debes ajustar el ancho solo, y no el alto para no desformar la imagen.

¿Y dónde pude hacer esto? Hay muchas webs que lo hacen online al instante. Yo suelo utilizar la que te dejo a continuación.

https://www.iloveimg.com/es/redimensionar-imagen

¿Cómo optimizar imágenes para WordPress?

Bueno pues ya tienes la imagen con las dimensiones optimas. Ahora puedes optimizarla y así ocuparán aún menos espacio en tu hosting.

Existen muchos métodos. Desde un plugin, programas para el ordenador o webs directamente online. Te voy a indicar lo que yo utilizo para esta parte.

¿Dónde optimizar imágenes online?

Existen muchas webs para esta tarea. Entre ellas (y la que más me gusta) es la conocida web https://compressor.io/ que seguramente ya conozcas.

Optimizar imágenes sin perder calidad en el proceso.

Hay muchas webs que optimizan más la imagen, pero la pérdida de calidad es notable. Por ejemplo, la web que puse en el apartado anterior para redimensionar las imágenes, dispone también de una opción para optimizar imágenes. Si haces la prueba puedes ver que comprime más que compressor.io pero la perdida de calidad es muy notoria.

El equilibrio está en encontrar el peso de la imagen y la resolución idónea para dar una imagen de calidad a nuestra web.

¿Qué plugin usar para optimizar imágenes desde nuestra web de WordPress?

Existen muchos complementos en el mercado para esta labor. No los voy a nombrar todos, porque sino, no terminaría. Destacaré:

Wp-optimole: Plugin de WordPress para Optimizar imágenes y mejorar el SEO

(https://wordpress.org/plugins/optimole-wp/) Este plugin me gusta en particular porque es capaz de convertir todas las fotos al nuevo formato de Google (webp).

Aunque este formato tiene un problema, y es que hay actualmente navegadores antiguos que no son compatibles. Por lo que si convertimos nuestras imágenes directamente a este formato puede ser que en los navegadores antiguos no se vea nuestra imagen.

Para suplir este inconveniente, el propio plugin es quien detecta de forma automática si el navegador es compatible o no. Si lo es, lo muestra en webp y si por el contrario no es compatible la muestra en su formato original.

¿La “pega” de este plugin? es que tiene para 5000 visitas/mes, si necesitas más tendremos que pasar a su versión de pago.

Shortpixel: Otro plugin para Optimizar Imágenes

La característica de este complemento es que usa un CDN y optimiza sobre la marcha (también en el formato de imagen WebP de «nueva generación»), se almacenan en la Cache y se sirven rápidamente desde la CDN global de Shortpixel. Con lo que aliviará tu hosting al no tener que cargar dichas imágenes e irá mas rápida la carga de la web.

La versión gratuita incluye la posibilidad de optimizar 100 imágenes al més. Pero ahora si te registras de este enlace, recibirás 100 imágenes más cada mes, además de 100 extras. Instala el plugin, registrate en la web y olvídate de optimizar imágenes.

Si te parece poco las 100 imágenes al mes que ofrece su registro Gratuito, puedes ver sus planes de precios y optar por uno de ellos. Plan de precio de Shortpixel.

Yo utilizaba estos plugin, hasta el momento que en el complemento de Cache propio del Hosting Siteground (donde actualmente se aloja la web) agregaron en su última actualización el ajuste de optimizar imágenes. Este plugin es exclusivo para los sitios alojados en el hosting Siteground y se llama sg-optimizer.

A parte de configurar la optimización de la Cache, css, js y html, tiene la opción para optimizar imágenes y además también te da la opción de convertirlas a Webp. Si el navegador es compatible las muestra en formato Webp, y sino lo es, las muestra en su formato original.

Si usas el hosting de Siteground es muy buena esta opción ya que te ahorras el tener que instalar un plugin exclusivo para hacer esto con las imágenes.

sg-optimizer

Optimizar imágenes con programas para el ordenador

Hay varios programas o software para ordenador, por un lado tenemos Photoshop, que sirve tanto para Windows como para Mac, con el inconveniente que dicho programa es de pago. Si queremos uno gratis podemos usar Riot, pero solo lo tenemos para Windows

¿cómo optimizar imágenes para web en photoshop?

Si dominas el programa estrella para la edición de imágenes (Photoshop) también lo puedes hacer con él. La propia aplicación tiene una opción para guardar ficheros «jpg» para web. La puedes encontrar en: menú, Archivo-Guardar para web.

En la ventana que nos sale podremos comprimir y además, también tienes la posibilidad de dimensionar directamente la imagen a tu gusto.

¿cómo optimizar imágenes con software gratis? La solución se llama: Riot

Otra opción si no dispones (o no dominas) Photoshop sería usar un software gratuito como puede ser RIOT. Le puedes echar un vistazo y probarlo en el siguiente enlace: https://riot-optimizer.com/

Es muy fácil de usar.

Simplemente pulsas OPEN, buscar y abrir la imagen y abajo sale una barra que pone Quality. Ahí podéis controlar la calidad de la foto, se puede ajustar también brillo, contraste, gama o incluso también convertir imágenes entre PNG, JPEG y GIF

riot

 

¿Qué extensión de foto usar?

Este es otro aspecto a tener en cuenta.

Se empieza a escuchar que Google premiará en las posiciones de búsqueda quien use imágenes con formatos Webp. La combinación de JPEG y PNG.

No obstante, y de momento no es conveniente ponerlas a ese formato ya que si alguien entra con navegador antiguo no las podrá ver. A no ser que tengas un tipo de plugin como ya comenté antes. Entonces ¿qué extensión elegir?

¿Qué formato de imagen elegir?

Por un lado, tenemos el JPEG. Es la más habitual en foto grandes, tiene una gran compresión y ocupa bastante menos que las de formato PNG.

Usa imágenes en formato PNG si tienen fondo transparente.

Las imágenes en formato PNG “solo” debes utilizarla con fondo transparente. Es el formato que te lo admite, y digo solo ya que el formato PNG tiene gran calidad (por lo cual se ve mejor que el JPEG) y con esa calidad se incrementa el tamaño. Haciendo que la web pueda ir más lenta.

Las de formato GIF, son las imágenes elegidas para las que usan algún tipo de movimiento. Sinceramente, para poco más la utilizaría. Ya que solo usa 256 colores, es el formato de menos calidad.

Tenemos el formato SVG. ¿Qué tipo de archivo es un SVG?

Pues es un archivo que contiene imágenes vectoriales de dos dimensiones, permite una compresión de datos sin pérdida. Suele ser muy practico para logos de web, ya que ocupa poco espacio y al ser vectoriales, se adaptan tan bien que podamos verlos en la pantalla que lo veamos que no distorsiona y siempre se ven bien sin perdida de calidad.

Hasta aquí mi aportación a como puedes optimizar las imágenes para tu web o blog. La primera parte es más técnica y es la que solemos hacer los diseñadores. No obstante, si vas a realizar tu propia web o bien a subir de forma continua artículos en tu blog, te será muy útil la segunda parte del artículo para optimizar el espacio de tu hosting.

Un abrazo.

Angel Salmerón

Angel Salmerón

Diseñador web en WordPress. He creado webparallevar.com para ayudar a emprendedores a crear su web.

Artículos que quizás te interesen:

0 comentarios

Enviar un comentario

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

Responsable: Angel Salmeron
Finalidad: Moderar y responder comentarios de usuarios
Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@webparallevar.com así como el derecho a presentar una reclamación ante una autoridad de control.
Información adicional: En https://webparallevar.com/politica-privacidad/ de https://webparallevar.com ,  encontrarás información adicional sobre la recopilación y el uso de su información personal ,incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.

Suscríbete y recibe notícias y ofertas exclusivas

Además recibe un PDF con las leyendas RGPD para saber si cumples la legalidad en tu web


Gracias por registrarte

Suscríbete y recibe notícias y ofertas exclusivas

Además recibe un archivo con 3 diseños distintos de Landing Page para Divi


Gracias por registrarte

Suscríbete y recibe notícias y ofertas exclusivas.

Además recibe 3 diseños GRATIS de Landing Page para Divi


Gracias