El peso de las imágenes es uno de los aspectos que más ralentizan el rendimiento de una web desarrollada en WordPress. Es uno de los primeros errores que se cometen cuando se crea una web. Se suben imágenes sin tener en cuenta lo que ocupan y con el tiempo acabamos ocupando demasiado espacio en nuestro hosting, haciendo que la web tenga una carga más lenta. Te contamos qué debes hacer si ya has subido imágenes sin optimizar a tu hosting y cómo puedes optimizarlas a partir de ahora.
Cómo se deben publicar las imágenes en WordPress
Antes de comenzar con este tutorial sobre cómo optimizar imágenes en WordPress, hay algunos aspectos previos que debes tener en cuenta:
- Las imágenes no deben pesar más de 150KB. Si vas a usar varias imágenes dentro de un mismo post, intenta usar imágenes que pesen cerca de 100KB, intentando perder la menor calidad posible.
- Las imágenes que se publican en WordPress no suelen superar los 1000×1000 píxeles. Un tamaño estándar que se suele utilizar bastante sería 850×550 o 640×426 píxeles.
- Los formatos de imagen más habituales son: JPEG (cuando se trata de imágenes) y PNG (cuando se trata de logotipos e ilustraciones vectoriales) y ahora webp.
Qué es WebP
Webp o «weppy» que es como muchos lo pronuncian, es un formato gráfico en forma de contenedor que surge en el año 2010 de la mano de Google y que soporta tanto la compresión con pérdida como sin ella. Un formato derivado del estándar de vídeo VP8 desarrollado por On2 Technologies y que Google adquirió ese mismo año.
A partir de ese momento, fue el propio Google quien desarrolló aún más este formato añadiendo nuevas características y el que se encargó de que el propio motor de su navegador Chrome, comenzase a soportar este formato de compresión. En definitiva, se trata de un formato de archivo creado por Google para reducir el tamaño de las imágenes y así disminuir el tiempo de carga de estas. Algo que, por otra parte, se ha convertido en una necesidad debido a que hoy en día, la mayor parte del tiempo que navegamos por Internet, lo hacemos desde el móvil. De esta manera se produce un ahorro en el ancho de banda y, por lo tanto, una carga más rápida de las imágenes de aquellas webs que utilizan este formato de imagen.
Aproximadamente, las imágenes en este formato de compresión son un 30% más pequeñas que la misma imagen en otros formatos habituales como JPG, JPEG o PNG con la misma calidad de imagen y basados en sus propios métodos de compresión. Mientras que los archivos en formato JPG se basan en un método de compresión con pérdida, los archivos PNG hacen lo mismo, pero sin pérdida, y son los WebP los que admite ambas posibilidades.
En resumidas cuentas, las principales características de compresión de este formato es que la compresión con pérdida se basa en la codificación del fotograma clave de VP8 y que la compresión sin pérdida se basa en diferentes técnicas que transforman los parámetros y los datos de la imagen. En este caso, se utiliza principalmente el algoritmo LZ77, entre otros. No debemos olvidar tampoco que el formato WebP permite incluir metadatos EXIF y XMP, que son los que crean normalmente las cámaras fotográficas de hoy en día y que almacenan muchísima información sobre cada imagen capturada.
Cómo funciona la compresión sin pérdida de WebP
Para la compresión sin pérdida de WebP, lo primero que hay que destacar es el proceso de transformación de la imagen, para el cual, puede ser utilizadas diferentes técnicas:
- Transformaciones basadas en predicciones espaciales: WebP utiliza diferentes modos de predicción que aprovechan el simple hecho de que los píxeles más cercanos suelen estar correlacionados. Para ello, se predice el valor real de los píxeles a partir de los píxeles que ya han sido codificados y únicamente se codifica el valor residual.
- Transformación de colores: El único fin es la descorrelación de los valores RGB de cada píxel. Para ello, la imagen es dividida en bloques antes de que el rojo se transforme a partir del verde y el azul a partir del verde y el rojo, siendo el único que mantiene su valor el color verde.
- Transformación por sustracción del color verde: Es una opción adicional para transformar el color donde el verde sale de los valores rojo y azul de cada pixel.
- Transformación por color indexado: El formato WebP también ofrece la posibilidad de hacer una transformación de este tipo mediante un proceso en el que se determina el número de valores RGBA inequívocos. Si el resultado es demasiado bajo, se crea una disposición con estos colores que se utiliza para reemplazar los valores de los píxeles por el índice correspondiente.
- Codificación del color por memoria caché: La compresión sin pérdida de este formato puede utilizar los fragmentos de la imagen ya vistos para reconstruir nuevos píxeles. Ahora bien, si no obtiene ningún resultado apropiado, se echará mano de la memoria local caché de color con los últimos 32 colores utilizados como punto de creación.
Ventajas e inconveniente de WebP frente a JPEG
El formato JPG o JPEG lleva siendo el más utilizado en Internet desde hace décadas, sin embargo, WebP ha demostrado sin mucho más eficiente gracias a una de las principales ventajas sobre JPG, ya que ofrece un método de compresión con pérdida y otro sin pérdida. No obstante, esta forma ofrece otras ventajas como:
- Ahorro de espacio: Como ya hemos comentado, el formato de compresión de WebP hace que las imágenes ocupen mucho menos espacio en nuestro disco o servidor con la misma calidad de una imagen en formato JPG o PNG.
- Tiempo de compresión reducido: No solo es importante que ocupen poco espacio, sino que también es determinante que la carga en el navegador sea rápida. En este sentido el formato creado por Google supera también con creces los tiempos de descodificación y carga de otros formatos de imágen.
- Soporte de transparencia: Además, es un formato que soporta la transparencia de imágenes.
- Soporte de animaciones: Y por si fuera poco también soporta animación, lo que le convierte también en un gran rival del formato GIF.
Pero como todo no podía ser perfecto, también debemos tener en cuenta ciertos detalles de este formato. Uno de ellos es su resolución máxima en píxeles, 16.383×16.383. Aunque es muy grande, lo cierto es que resulta mucho menor que la resolución máxima ofrecida por JPEG, ya que alcanza los 65.535×65.535 píxeles, aunque es cierto que nunca vamos a usar imágenes a ninguno de estos tamaños en una web.
El otro gran detalle a tener en cuenta es la limitación que ofrece el formato WebP con respecto a algunos navegadores, ya que no es posible abrir este formato de archivos con la mayoría de las aplicaciones para la visualización de imágenes.
Cómo abrir WebP
Podemos utilizar navegadores web que integren de forma nativa el formato, con herramientas nativas o programas externos según las necesidades y el propósito.
Con navegadores web
Si somos de los que usamos el navegador web de Google, es posible que al descargar una imagen en formato WebP, si tenemos Chrome como navegador predeterminado en nuestro equipo, lo más seguro es que se nos asocie el propio navegador como aplicación predeterminada para abrir la imagen.
Si no es así, podemos abrir una imagen en este formato con el simple hecho de arrastrarla sobre una ventana de Chrome. Otros navegadores basados en Chromium también nos ofrecen este soporte, aunque puede que ciertas versiones más antiguas todavía no lo soporten. Algo que también nos puede ocurrir con otros navegadores webs, por lo tanto, podremos echar mano de nuestro navegador para abrir una imagen en este formato en función del navegador y su versión.
Opera (también en sus versiones Mobile y Mini) es otro de los navegadores web que integran la compatibilidad con el formato de imagen WebP, por lo que serán dos alternativas para programas predeterminados a la hora de abrir uno de estos archivos, bastará con hacer doble clic en el archivo para abrirlo con ese navegador. En el ecosistema Apple podremos abrir estos archivos haciendo doble clic sobre ellos y la herramienta Vista Previa se encargará de visualizarlo, aunque Safari también es compatible a partir de su versión 14 y posteriores tanto en la versión móvil como en la de escritorio. Pero cada vez son más los navegadores web compatibles, como Android Browser, UC Browser, Samsung Internet y QQ Browser.
Preparar una imagen para publicar en WordPress
Si no dispones de un editor de imágenes, puedes usar cualquiera de los que hay online de forma gratuita. Te contamos como hacerlo con Photoshop, Pixlr Express y Riot.
Preparar imágenes para WordPress con Photoshop Online
Con la herramienta Photoshop Online debes ir a «archivo» – «abrir» – seleccionar la imagen que deseas preparar para publicar en WordPress. Después haz clic en «imagen» – «tamaño de imagen» – «resolución: 72 ppp» (píxeles por pulgada).
También puedes utilizar la opción de Photoshop «Save for Web». donde puedes modificar más parámetros de la imagen. Aunque no es necesario realmente.
Preparar imágenes para WordPress con Pixlr Express
Con esta herramienta solo tendrás que añadir el tamaño que quieres para tu imagen, ya que la resolución de la imagen se guardará directamente para formato web. Ve a «Adjustment» – «Resize» – «Añadir el tamaño de la imagen» (manteniendo las proporciones).
Preparar imágenes para WordPress con Riot
Para ello, tienes que descargar la aplicación Riot desde su página oficial. Una vez instalado el optimizador de imágenes RIOT, abrimos la herramienta y tenemos dos opciones para editar las imágenes: redimensionar el tamaño de la imagen (si la imagen es más pequeña, pesará menos) o reducir el peso de una imagen (cuanto más se reduzca el peso, más calidad perderá la imagen).
Haz clic en el botón “OPEN” (en la parte de arriba izquierda) y selecciona la imagen que deseas abrir.- “Compress to size” – Introduce un peso no superior a 300KB comprobando que la imagen se vea bien. Guarda la imagen con formato JPEG o PNG.
Optimización SEO para las imágenes
Las imágenes no deberían contener más de 3 o 4 palabras que las identifiquen y éstas deben de estar separadas con “-“, ya que este parámetro es fundamental para que aparezca en las búsquedas de imágenes de Google
Por ejemplo, si vas a publicar un post que habla sobre las tendencias de ecommerce en el 2018 podrías poner algo como “tendencias-ecommerce-2017.jpg”.
Otros de los factores de optimización SEO en imágenes, es el ALT (texto alternativo que aparecerá si la imagen da algún tipo de error) y el Title (título de la propia imagen), la «Leyenda» y la «Descripción»
Todas las imágenes deben de contener un ALT y un título con no más de 3 o 4 palabras y no usar ñ, ni acentos ni ningún tipo de codificación de caracteres extraños, ya que el algoritmo de Google para estos campos, no suele tener muy en cuenta la codificación UTF-8 ques es la codificación que tiene en cuenta estos caracteres.
Para subir las imágenes a una web usaremos o bien photoshop o https://www.iloveimg.com/resize-image
- Descargamos todas las imágenes que vamos a usar primero. La ponemos en una carpeta que puede llamarse "originales"
- Creamos otra carpeta a la que llamaremos "optimizadas"
- Entramos en el link https://www.iloveimg.com/resize-image y subimos todas las imágenes a optimizar y haremos el resize con el siguiente criterio: Si son para publicaciones en un blog, el ancho siempre será de 600px (y el alto que proporcionalmente se ajuste). Si las imágenes tienen menos de 600px de ancho, no es necesario pasarlas por la herramienta, pero sí renombrar el nombre del archivo.
Si tienes dudas, pregúntanos!