Un elemento que da mucho valor a nuestras paginas o entradas de blog son las imágenes. Hacer uso de una buena imagen en nuestras publicaciones incorpora un número de características que le añaden un valor añadido:
- Mejoran el SEO: Mediante el uso de las etiquetas Title y Alt. Y Geolocalizando las imagenes.
- Atraen la atención del lector: Una buena imagen puede marcar la diferencia entre que un lector se fije o no en tu publicación.
- Dan una visión de profesionalidad: El uso de imágenes profesionales ofrece garantías de ser una empresa seria y que cuida el detalle.
- Aligeran la lectura: Evitan los bloques excesivamente largo de texto y alivian el proceso de asimilación de la información.
- Pueden ser didacticas: Imágenes como las que vamos a utilizar en esta entrada pueden facilitar el proceso de aprendizaje mediante un refuerzo visual.
A pesar de la selección de una buena imagen, es un elemento que debemos optimizar de forma correcta. Un mal uso de las imágenes puede ser un factor que ralentice la carga de nuestra pagina web y en consecuencia nuestro posicionamiento en los resultados de búsqueda.
Índice de contenidos
Que herramientas vamos a utilizar
Hay 2 factores que se deben tener en cuenta para una buena optimización de la imagen: el tamaño y el peso. Para tratar estos factores os ofrecemos una lista de programa que podréis utilizar de forma gratuita. En este tutorial trabajaremos con Pixrl para redimensionar y Tinypng para bajar el peso de la imagen.
Herramientas para el redimensionado de imagenes
Herramientas para bajar el peso de las imagenes
Redimensionando nuestra imagen
¿Por qué necesitamos redimensionar nuestra imagen?.
Todas las imágenes están introducidas dentro de unos contenedores o div. El ancho de estos contenedores esta definido en pixeles por una medida. Insertar una imagen con un ancho más grande que el ancho del contenedor es una mala práctica ya que la imagen que se visualice no sera más grande que el contenedor y esto conlleva un consumo innecesario de los recursos del servidor.
Pongamos un ejemplo. Subimos a nuestra página web una imagen con un ancho de 1920px. Si inspeccionamos la imagen desde el navegador (botón derecho del ratón sobre la imagen) podremos observa que el tamaño en el que se visualiza no es el tamaño original de la imagen.
Si observamos el recuadro rojo de la captura de pantalla veremos que nos muestra el tamaño al que se visualiza y acto seguido en tamaño original de la imagen. Esto sucede porque el ancho de nuestra imagen es mas grande que el ancho de nuestra página. En nuestro caso el ancho del contenedor es de 1080px, por lo que si queremos la imagen al ancho completo definiremos el ancho de la imagen al mismo tamaño.
Pongamos remedio. Abrimos Pixrl y subimos la imagen que vayamos a redimensionar. Si no vamos a hacer uso de la totalidad de la imagen podemos hacer un recorte utilizando la herramienta recortar (recuadro rojo de la imagen).
En en menú superior seguimos la ruta imagen/tamaño de la imagen (recuadro azul de la imagen) y manteniendo el selector de proporciones modificamos únicamente el ancho de la imagen (recuadro verde de la imagen).
Ya tenemos redimensionada la imagen, ya la podemos guardar. Volvemos al menú superior y seguimos la ruta archivo/guardar. Recomendable guardar la imagen con un nombre acorde a un criterio de resultado de búsqueda que nos interese.
Bajando el peso de la imagen
Nos vamos a la web TinyPNG y subimos las imágenes para optimizar. Una vez finaliza el proceso nos aparece un enlace para descargar un archivo zip con todas nuestras imágenes. La versión gratuita permite subir un máximo de 20 fotos.
Ya solo nos queda subir la imagen a nuestra web.
Comprobando el tamaño de la imagen
Una vez añadida la imagen y hacemos una vista previa de los cambios y inspecionamos la imagen. Podemos comprobar como la imagen se adapta al 100% al ancho del contenedor (recuadro rojo de la imagen).
Plugins que optimizan imágenes
Si bien es cierto que hacerlo de forma manual es más entretenido, es una practica que nosotros no preferimos, ya que así no sobrecargamos nuestro WordPress con un plugin que no es esencial. Aún así os dejamos una lista de plugins que os facilitaran esta tarea.
