Optimizar imágenes es un paso crucial para asegurarnos de que nuestra web va a cargar de forma rápida.
Sí, hay más factores - igual de importantes - como la calidad de hosting que hayáis contratado, el servicio de cache que estéis utilizando y alguna otra cosa más que también influye en la velocidad de carga de vuestra web.
Pero, por experiencia os podemos asegurar que cuando hablamos por teléfono con algún cliente que se queja de que su web carga muy lenta hay un gran porcentaje de veces que se debe a que no tienen imágenes optimizadas en su web.
Imaginaos que invertís $3,000 en hacer una sesión fotográfica para tener imágenes increíbles de vuestros productos que mostrar en vuestra web.
Dichas imágenes profesionales puede que sean preciosas, pero, por lo general, vuestro fotógrafo y/o editor de fotos no os las van a dar optimizadas para web. Si no que os las darán a mayor resolución posible para que veáis lo bonitas que han quedado.
Eso está bien, pero en este post - y en el vídeo de arriba - os explicamos, paso a paso, como podéis optimizar dichas imágenes para ponerlas en la web sin sacrificar velocidad de carga.
Cómo editar fotos para web utilizando Photoshop o Pixelmator
Vale, pongamos un ejemplo real parecido al que os he dicho antes.
Imaginaos que vuestro fotografo ha terminado de editar fotos y os las manda. O, imaginaos, por ejemplo, que os descargáis una foto de unsplash que es preciosa.
En ambos casos, lo más probable es que al tratarse de imagenes de muy alta resolucion, sean imagenes muy pesadas. Probablemente hablemos de imágenes de miles de pixeles tanto a lo ancho como a lo largo.
Bueno, pues, lo primero que tenemos que hacer es entender que a nivel web no es necesario estar subiendo imágenes que sean tan grandes.
Como norma general, en imagenes de cabecera nosotros las ajustamos dentro de un lienzo vacio de 1920x1080. Después exportamos como .jpg y vamos al siguiente paso.
Hay que ser conscientes de que tipo de imagen estamos editando. Por ejemplo, esta imagen de arriba a la derecha no es de proporciones 1920x1080 ya que no necesito que sea tan grande. Es una simple imagen de 800x600. Recordad siempre que, a mayor resolución, más va a pesar la imagen y más tiempo tiene que invertir nuestro usuario visitante en cargar la página.
Shortpixel: mejor plugin para optimizar fotos para WordPress
Una vez tenemos nuestra imagen dentro de una proporción apta para subir a web, el siguiente paso es muy sencillo. Simplemente tenemos que dejar que Shortpixel haga su magia.
Shortpixel es el mejor plugin que podéis comprar para optimizar imágenes para web. Hace magia, de verdad. Presenta tres tipos de niveles distintos para optimizar imágenes: Glossy, Lossy y Lossless.
Dependiendo de que nivel elijamos, Shortpixel sacrificará más o menos calidad de imagen para intentar reducir al máximo posible el tamaño de la misma.
El proceso es muy sencillo; instalamos el plugin de shortpixel - habrá que registrarse en su web y comprar creditos - y dejamos que optimice todas nuestras imágenes. También se encargará de optimizar las imágenes que subáis a WordPress en el futuro de forma automatica. No hay que hacerlo manualmente.
Nota: Shortpixel también ofrece la posibilidad de convertir todas nuestras imágenes a formato .webp y recomendamos que activéis esta funcionalidad.
Cargar imágenes en diferido - lazy load - con WProcket
Echadle un ojo a este artículo. Hay alrededor de cuatro o cinco imágenes en él, más todas las de posts relacionados etc.
¿Qué sentido tiene obligaros a invertir tiempo de carga en cargar imágenes que no estáis viendo en pantalla todavía? ¿Ninguno, verdad?
Pues eso es exactamente lo que WProcket nos ayuda a hacer. Nos ofrece la posibilidad de hacer que nuestros usuarios visitantes solo carguen aquellas imagenes que se ven en pantalla a tiempo real. Las imágenes para las que haya que hacer scroll para poder visualizarlas no se cargan hasta que no aparecen en pantalla.
Está funcionalidad se conoce como lazy load.
Hagamos un recap de como es el proceso entero de optimizar imágenes para WordPress.
Optimizar imágenes para WordPress en tres pasos
Proporciones
El primer paso es asegurarnos de que hemos ajustado las proporciones de nuestra imagen dependiendo de donde en la web la vayamos a posicionar. Podemos hacer esto con Photoshop o Pixelmator.
Shortpixel
El segundo paso es sencillo: instalamos Shortpixel y dejamos que optimice nuestras imágenes utilizando cualquiera de los tres niveles disponibles. También convertimos las fotos a .webp
Lazy loading
Para el último paso hay que utilizar WProcket - que ya estamos usando para cachear nuestra web. Aquí simplemente activamos la funcionalidad de lazy load para cargar imágenes en diferido.
Extra: Optimizar la velocidad de carga de imágenes utilizando un CDN
Cómo paso extra adicional, si queréis de verdad aseguraros de que vuestra web carga como un rayo, os recomendamos que contratéis un servicio de CDN.
CDN - Content Delivery Network - sirve para que los usuarios visitantes de vuestra web no tengan que conectarse directamente al servidor donde este siendo hosteada vuestra web. Sino que vuestro servicio de CDN cachea vuestra web en proxies y utiliza el proxy más cercano al usuario visitante para mostrarle el contenido de vuestra web.
Ejemplo real: vivís en Madrid y contratáis un servicio de hosting que tiene los servidores en Barcelona. Sin embargo, la mayoría de vuestros visitantes son de China. En vez de obligar al usuario de China a conectarse al servidor de Barcelona, vuestro CDN permite que el usuario se conecte al proxy más cercano a él, aumentando la velocidad de carga notablemente.
Nosotros os recomendamos BunnyCDN - es increíblemente rápido, tienen proxies por todo el mundo y es muy economico.
