fbpx

¿Por qué y cómo optimizar tus imágenes para la web?

La optimización de una imagen para tu sitio web es el proceso de reducir el peso del archivo de tu imagen. Es un concepto muy simple pero extremadamente importante para el rendimiento de tu sitio web y la experiencia que todos tus visitantes tienen al navegar por tu sitio. Como parte de nuestro servicio de hosting ofrecemos un proceso de optimización web profesional en el que reducimos el tiempo de carga de tu web a 1.5 segundos o menos, este servicio gratis se encuentra incluido en los planes Premium y Business con un ciclo de pago anual. Y 8 de cada diez sitios web que optimizamos tienen un serio problema con sus imágenes, y es que siempre pesan demasiado. Si una imagen de tu sitio web pesa demasiado, entonces tu visitante tardará más tiempo en cargar tu sitio web, si muchos visitantes se encuentran viendo la misma página en tu web con imágenes demasiado pesadas, entonces tu web tardará más tiempo en responder y servir ese archivo tan pesado a todos los visitantes. Optimizar tus imágenes permite que tu sitio web cargue más rápido y también mejora la usabilidad y el SEO del sitio web. El tiempo de carga de tu sitio web es un factor importante para Google, entre mejor se encuentre optimizado tu sitio web, mejor será tu ranking en la página de resultados de Google. Normalmente lo que hacemos al subir una imagen es descargar la imagen y subirla directamente a la Liberia de medios en WordPress, luego la añadimos a nuestro artículo o página y listo. El problema es que las imágenes que descargas normalmente son muy pesadas, en otro artículo anterior te he mostrado varios sitios desde los que puedes descargar imágenes legales para utilizar en tu sitio web. Estarás de acuerdo que todas esas imágenes son de muy buena calidad, pero al descargarlas podrás ver que su peso promedio es de 3MB a 5MB, de hecho, la fotografía de la imagen que hemos utilizado para este post tiene un peso de 5.3 MB Ahora su pongamos que yo decido no optimizar la imagen para la web y simplemente la he descargado y colocado en este artículo. Entonces esta página tardaría demasiado tiempo en cargar, dependiendo de cuanta velocidad tienes. Toma en cuenta que el tiempo límite de carga de tu sitio web para considerarlo bueno es un máximo de 3 segundos. Con esto en mente voy a mostrare cuánto tiempo tardarían diferentes usuarios en cargar la imagen de 5.3 MB con diferentes velocidades de internet:

Entonces como puedes ver es demasiado tiempo utilizado únicamente para descargar la imagen, a esto debes aumentar el peso de los archivos JavaScript, CSS, HTML, otras imágenes de tu web y otros archivos de servicios externos que puedas tener en tu web como las librerías de Google fonts, Analytics, JS de Facebook, etc… Al combinarlo y si tenemos optimizados nuestros archivos Javascript, CSS y HTML, puede que terminemos con un peso de 0.5 MB de estos archivos, así que eso debemos añadirlo a la cuenta. Considerando que la velocidad promedio de internet en America Latina es de 5.6 MB y en España de 15.5, entonces le tomaría a un visitante latino 8 segundos cargar nuestra web y en España 3 segundos. Y el más del 85% de ese tiempo es para cargar la imagen que no hemos optimizado. Pero, en este artículo yo ya he optimizado la imagen, y al final de este proceso la imagen de este artículo tiene un peso de 59.3KB (0.059MB), como puedes ver es una gran reducción en el peso y eso se traduce en un sitio web que carga más rápidamente. Ahora voy a mostrarte como puedes optimizar las imágenes de tu propio sitio web. Hablaremos sobre dos pasos en los que debes enfocarte al realizar este proceso.

Modificar el tamaño de tu imagen

Este único paso puede reducir el peso de tu imagen por más del 50%. En este paso debemos asegurarnos de que la imagen tiene las dimensiones que deseamos. Por ejemplo, en mi caso, todas las imágenes del blog tienen un ancho de 640px y una altura de 350px, entonces debo modificar las imágenes para que tengan esas dimensiones. La imagen original de este artículo tenía unas dimensiones de 4,000px de ancho y 2,900px de alto, eso es demasiado, muchos más de lo que necesito para mi web. Entonces debes hacer que la imagen se vea mas pequeña, debes medir las dimensiones que necesitas en tu propia web y crear tus imágenes en base a esas dimensiones. Hay varias formas de hacer este proceso, puedes utilizar Photoshop o Gimp por ejemplo, pero también puedes utilizar herramientas online como Canva.com que es la forma en la que he creado esta imagen. Hablaremos mas profundamente sobre Canva en un futuro artículo, ya que es una herramienta excelente y que utilizamos mucho en nuestras imágenes. Utilizando Canva puedes crear un documento con las dimensiones específicas que deseas, luego subes tu imagen, la colocas sobre el lienzo y luego descargas la nueva imagen con las dimensiones correctos, es extremadamente simple. Únicamente con ese paso, he logrado reducir el peso de la imagen de 5.3MB hacia 173KB (0.17MB), una reducción de más del 94% Te invito a probar la herramienta Canva y a que esperes en el futuro un tutorial sobre esta grandiosa y gratuita herramienta ?

Utilizar un compresor de imágenes

Es importante que antes de realizar este paso hagas el anterior, de lo contrario este paso no te dará el mejor resultado. En este paso podemos utilizar aplicaciones que nos permiten mejorar la compresión de la imagen, este proceso baja aún más el peso de nuestra imagen a cambio de perder calidad. Pero no debes preocuparte, ya que la pérdida de calidad no la podrías notar ni siendo un halcón, es muy pequeña y obtenemos una gran ventaja en la disminución del peso. Existen muchas aplicaciones web que te permiten realizar este proceso completamente gratis, en todas estas páginas simplemente debes subir tu imagen, esperar unos 15 a 30 segundos para que sea comprimida y luego puedes descargar la imagen comprimida. Esto no modifica las dimensiones de tu imagen, únicamente el peso de la imagen es modificado. Algunos sitios web que te dan este servicio son los siguientes:

Como podrás ver es muy fácil utilizar estos servicios, pero todo se complica si tienes muchas imágenes en tu sitio web, en nuestro caso contamos con cientos de imágenes, y hacer esto para cada una de ellas sería una labor en la que no podemos perder tiempo. Es por eso que existen plugins para WordPress que automáticamente mejoran el peso de todas las imágenes que subes a tu sitio web. Te mostraré primero el plugin que nosotros utilizamos y otros plugins que hemos probado que son igualmente muy buenos.

ShortPixel

Esta es la mejor opción desde nuestra experiencia, todos los días nuestro equipo realiza entre 15 a 20 optimizaciones webs para nuestros clientes de hosting completamente gratis, dejamos los sitios web cargando en aproximadamente 1.1 segundos y no más de 1.5 segundos. Gracias a esta cantidad de optimizaciones que realizamos hemos podido probar muchos plugins de optimización para imágenes y ShortPixel es el que mejor resultados nos ha entregado. ShortPixel te permite optimizar todas tus imágenes JPG, PNG o GIF, únicamente debes subir tus imágenes en WordPress como normalmente lo haces y el plugin optimiza la imagen sin que tengas que hacer absolutamente nada. Después de optimizar la imagen de nuestro artículo con ShortPixel terminamos con un archivo que pesa 59.3KB (0.059MB), lo que significa una reducción del 99% en la imagen que al inicio pesaba 5.3MB Este plugin también cuenta con una opción para optimizar todas las imágenes que has subido anteriormente. Con un solo botón puedes iniciar la optimización de tu librería de imágenes completa. Lo mejor de todo es que guarda una copia de seguridad de todas tus imágenes no optimizadas. Adicionalmente cuenta con la opción de crear la versión WEBP de tus imágenes. WEBP es un formato de imagen especial para internet, este formato de archivo es mejor que los normales JPG o PNG, puedes obtener un 26% a 35% extra en la optimización de tu imagen. Sin embargo, es un formato de archivo relativamente nuevo creado por Google, y aunque Google Chrome es compatible con este formato, no es aún estándar en el mundo del diseño web, de modo que podrías utilizar este formato en el futuro cercano, pero en este momento aún no. Para utilizar ShortPixel debes instalar el plugin desde WordPress, y debes crear una cuenta gratuita en el sitio web de ShortPixel, con una cuenta gratis obtienes créditos de optimización. Por mes obtienes 100 créditos que cuentan por cada imagen optimizada en tu sitio web. Si tu sitio web necesita más, entonces puede adquirir sus planes mensuales o los planes de un solo pago. Desde ya te digo que los planes de un solo pago son mejores, puedes adquirir 10,000 créditos por tan solo $9.99

EWWW Image Optimizer

Al instalar este plugin todas las imágenes PNG, JPG o GIF que subas en tu web WordPress serán optimizadas de forma automática. También incluye la opción de optimizar todas las imágenes que tienes en tu librería de medios. Sin embargo, uno de los lados negativos de EWWW Image Optimizer, es que la optimzacion es realizado en tu propio sitio web, en el caso de ShortPixel por ejemplo, la optimización se hace en la nube, en los servidores de ShortPixel y luego las imágenes optimizadas son enviadas hacia tu sitio web nuevamente, de esta forma tu sitio web no es cargado con procesos adicionales y los recursos que tienes a tus disposición no se gastan en la optimización de imágenes. Adicionalmente es necesario instalar archivos adicionales del lado del servidor y tu alojador posiblemente no tiene todas las librerías que son requeridas, lo que te dejaría sin poder utilizar el plugin; pero su tienes una cuenta de hosting con nosotros entonces no hay de que preocuparse ya que tenemos todos los archivos necesarios pre-instalados y no debes hacer nada adicional, simplemente instalar el plugin. Pero si no tienes una cuenta de hosting con un buen hosting como el nuestro y no puedes usar el plugin entonces EWWW Image Optimizer también ofrece la optimización de imágenes en la nube, de modo que no tengas que instalar nada adicional. Al momento del precio, los créditos por imagen son más caros que ShortPixel, los $9.99 que en ShortPixel te dan 10,000 imágenes, en EWWW Image Optimizer te darían 3,330 imágenes, de modo que ShortPixel parece ser una mejor opción al momento de pagar por el servicio.

WPSmush

Este plugin es parte de wpmudev.org y su basta lista de plugins. Con WP Smush podrás optimizar automáticamente cualquier imagen PNG o JPG que subas a tu web WordPress, adicionalmente tienes la opción de optimizar muchas imágenes al mismo tiempo, sin embargo, en la versión gratuita únicamente puedes optimizar 50 imágenes al mismo tiempo. Al utilizar WPSmush cuentas con dos métodos de optimización Lossy y “Super Smush”, pero en la versión gratuita únicamente puedes utilizar Lossy, que entrega una compresión y calidad aceptable, pero al compararlo con ShortPixel, queda abajo por un promedio del 20% en el peso final de la imagen. Existen otras funciones que también son de pago como la conversión de imágenes PNG hacia JPG, que es una opción gratuita en ShortPixel. El valor del WPSmush se encuentra dentro del valor de la suscripción a wpmudev que tiene un precio de $49 mensuales. Además de estos plugins existen otros que te ayuda a optimizar tus imágenes de forma automática, algunos son:

Como puedes ver existen varias formas de optimizar tus imágenes y gracias a los plugins de WordPress puedes optimizar tus imágenes de forma automática y no necesitas realizar el proceso de forma manual. Si aún no te encuentras optimizando las imágenes de tu sitio web, entonces debes empezar hoy. Puede hacer una gran diferencia en la velocidad de tu sitio web, lo que se traduce en visitantes felices y más amor por parte de Google para tu sitio web en los resultados de búsqueda. Si tiene cualquier pregunta no dudes en colocar un comentario.

También te puede interesar...

¿Qué es un sitio web y una página web?
¿Qué es un sitio web y una página web?

Los conceptos de página web y sitio web se emplean, en numerosas ocasiones, indistintamente, y no son pocas las personas que denominan página web a aquello que, en realidad, es un sitio web. Esta asimilación es errónea y, por ello, en ValorTop te queremos aclarar la...

Acelera tu web a máxima velocidad
Acelera tu web a máxima velocidad

La velocidad de tu sitio web es un factor clave para el éxito de tu negocio online, los visitantes siempre se encuentran de camino y no esperarán a que tu web cargue, prefieren darle al botón para regresar y visitar otro sitio web en lugar de esperar. Esto claramente...

Categoría

nuestras redes

0 comentarios

Enviar un comentario

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

Pin It on Pinterest