A nuestro WordPress subimos gráficas, fotografías, infografías, pero ¿sabemos de la importancia y necesidad de optimizar las imágenes para web?
A menudo comprobamos con las webs de nuevos clientes que es una tarea que no están haciendo correctamente o a la que no se le estaba dando la relevancia que requiere. La optimización de las imágenes influye en más aspectos de los que quizás puedas pensar, por ejemplo en el SEO (posicionamiento de tu web) o la WPO.
Y no se trata sólo de una ligera influencia en estos dos aspectos que te indicamos sino que una mala optimización puede arruinar por completo el éxito de tu web o todo el trabajo que hayas llevado en ella.
Seguro que tú también has tenido alguna mala experiencia con alguna web que has visitado y una determinada imagen de una página no termina de cargarse.
En este post te vamos a contar todo lo que tienes que tener en cuenta para que las imágenes de tu web estén perfectamente optimizadas.
¿Qué es una imagen optimizada para una web?
Una imagen optimizada para web es la que se muestra al tamaño y peso apropiado para ser mostrada correctamente en pantallas de dispositivos con diferentes tamaños.
Es decir, a la hora de optimizar una web tenemos sobre todo en cuenta dos factores:
- Peso
- Tamaño
Sin embargo, a su vez en ambos factores también influye la elección de un determinado formato de archivo, la compresión, resolución y calidad final que deseamos para nuestras imágenes.
No es la misma la calidad que requieren las imágenes del portfolio de un fotógrafo que las imágenes del blog de un negocio.
Así pues, tanto el tamaño como el peso óptimos que una imagen requiere son relativos, dependiendo del uso que vamos a hacer de ella y dónde se va a mostrar.
No es lo mismo mostrar una imagen en el encabezado de una web a ancho completo que en el interior de un post con un ancho reducido.
Por tanto, una imagen de perfil que puede pesar apenas 60Kb puede estar peor optimizada que otra que pueda pesar 350Kb y se muestre en el encabezado de tu web.
¿Cuál es el proceso para optimizar imágenes para web?
Existen dos formas de realizar todo el proceso de optimizar tus imágenes, antes de subirlas a tu web o una vez subidas (mediante plugins en WordPress)
La forma que te sugerimos es la de optimización previa a la subida a tu web, es la que nosotros más habitualmente utilizamos con las webs de nuestros clientes, por varias razones:
- Tenemos más control de todo el proceso
- No cargamos el servidor de la web ni instalamos otro plugin para realizar esta tarea
Los pasos a llevar a cabo para optimizar nuestra web son los siguientes.
Reducir tamaño
Debemos conocer el tamaño máximo (por lo general necesitamos el ancho) del lugar de nuestra web en que se va a mostrar nuestra imagen.
No tiene ningún sentido que tu imagen sea más grande que el tamaño máximo al que se puede mostrar.
Para ello podemos utilizar la función «inspeccionar» que tenemos en Chrome (o similar en otros navegadores) y así conocer las medidas máximas de cualquier elemento de tu web.
Una vez conocemos el tamaño máximo procedemos a reducirle el tamaño escalando la imagen.
Lo podemos hacer con cualquier programa de edición pero en este caso te vamos a recomendar Picresize, una app web totalmente gratuita, online y que te permite hacer incluso redimensionamientos en lote.
Es muy fácil de usar, subes la imagen o imágenes en lote y posteriormente en el campo «Ajusta el tamaño de tu imagen» seleccionas la opción «Tamaño personalizado».
Ahora sólo te queda introducir en «Width» el tamaño del ancho máximo y pulsar el botón de abajo para posteriormente poder guardar tu foto ajustada a ese nuevo tamaño.
Reducir peso
Una vez tenemos reducido el tamaño toca reducir el peso, es importante que sigas este orden además.
Nuevamente, esta tarea la puedes realizar con muchas herramientas pero nosotros te recomendamos Tinypng, otra app web totalmente gratuita, online y que te permite reducir el peso hasta a veinte imágenes a la vez, y lo mejor, sin pérdida de calidad perceptible.
Una vez dentro de esta web seleccionamos nuestras imágenes y las subimos, después ya las tendremos listas para descargar en un «zip».
Conclusiones
Una vez tenemos reducido el peso ya las tenemos listas nuestras imágenes para poderlas subir a nuestra biblioteca de medios de WordPress.
Como ves el proceso no es complicado, al principio te puede resultar un tanto pesado pero es bueno que lo interiorices como una rutina más pues las ventajas son muchas.
Así tal como te hemos contado es el modo que utilizamos para optimizar imágenes para web que más habitualmente utilizamos con nuestros clientes.
¿Y tú, cómo optimizas las imágenes de tu web?