Las imágenes son uno de los elementos más importantes de un sitio web decente. Captan la atención de los visitantes, hacen que su contenido sea más fácil de compartir y obligan a sus usuarios a tomar medidas (como comprar sus productos).
Sin embargo, agregar imágenes de alta resolución, o aquellas con archivos de gran tamaño, podría hacer que su sitio web sea lento y ofrecer una experiencia de usuario deficiente para el usuario final. Realmente no hay excusa para ofrecer una mala experiencia de usuario con la gran cantidad de herramientas que existen que pueden ayudarlo a comprimir sus imágenes sin una pérdida notable de calidad e incluso automatizar el proceso por usted.
En este artículo, le mostraré numerosas formas de optimizar imágenes para su uso en la web y más específicamente en los sitios web de WordPress.
Elija el formato de archivo correcto
JPEG y PNG son dos de los formatos de archivo de imagen más populares en la Web. JPEG es un formato comprimido que se usa normalmente para fotos que contienen muchos colores, mientras que los PNG son mucho mejores para fotos con texto, ilustraciones, logotipos, capturas de pantalla e imágenes transparentes. Otro formato común es el GIF, que se adapta mejor a imágenes con pocos colores o imágenes con grandes áreas del mismo color. El GIF se usa principalmente para imágenes animadas en la Web hoy en día.
La mayoría de los programas de edición de imágenes le permiten guardar su archivo en muchos formatos diferentes. Elegir el formato correcto asegurará que obtenga la imagen más nítida posible, lo que debería mejorar la experiencia del usuario en su sitio web.
Utilice el tamaño y la resolución correctos
Debe tener cuidado al agregar imágenes a su sitio. Se considera la mejor práctica guardar sus imágenes con el mismo ancho y alto que aparecerán en el sitio web y con el tamaño de archivo más pequeño posible sin perder calidad.
Comprime tus imágenes antes de subirlas
Existen muchas herramientas que le ayudarán a comprimir sus imágenes antes de subirlas a su servidor. Photoshop, por ejemplo, tiene una práctica función de «guardar para Web y dispositivos» que le permitirá elegir el formato y la configuración de calidad. También verá el tamaño de archivo de su imagen cuando aplique una configuración en particular. Otras herramientas de manipulación de imágenes como GIMP ofrecen opciones similares.
También existen herramientas de compresión en línea, como Picresize, Kraken.io y TinyPNG, donde puede cargar sus imágenes de alta resolución, optimizarlas y descargar el formato comprimido para usar en la Web.
Comprimir imágenes después de cargarlas
Existen varios complementos para este propósito, y uno de los más populares es WP Smush lo que ayuda a optimizar los formatos JPEG, PNG o GIF individualmente o de forma masiva utilizando servidores dedicados. Simplemente elimina los metadatos y los colores no utilizados de los archivos para reducir el tamaño del archivo. Con la versión gratuita, está limitado a imágenes de 1 MB o menos, pero puede eliminar esta limitación actualizando a la versión Pro, que permite hasta 5 MB.
Otro gran complemento con funciones similares es Optimizador de imagen EWWW que puede ayudarlo a convertir sus imágenes al formato que produzca el tamaño de archivo más bajo posible.
Hay otros disponibles en el repositorio de WordPress, así que siéntete libre de explorar. Esos son los dos que he usado anteriormente, y ambos funcionan bien, por lo que también deberían ser lo suficientemente buenos para ti.
Etiqueta tus imágenes correctamente
Además de cambiar el tamaño de sus imágenes, una excelente manera de brindar una buena experiencia en su sitio web es etiquetando sus imágenes correctamente. Esto significa usar siempre el «alt”En caso de que su imagen no se pueda cargar o para lectores de pantalla para que sus visitantes obtengan una descripción basada en texto de la imagen. También ayuda a los motores de búsqueda a indexar mejor las imágenes en su sitio web y puede generarle una cantidad significativa de tráfico de búsqueda.
Agregar subtítulos cuando sea necesario es otra excelente manera de ayudar a los visitantes de su sitio web a comprender mejor la imagen. Servir etiquetas de título descriptivas adecuadas y nombres de archivos de imágenes ayuda de la misma manera. Entonces, en lugar de guardar tus imágenes como «FXSCSUYE.jpg,”Utilice un título y un nombre descriptivos con palabras clave relevantes para su tema y sitio web. Esto también es bueno desde el punto de vista de SEO.
Carga lenta
La carga diferida es una técnica utilizada por muchos sitios web para ahorrar ancho de banda cargando solo imágenes cuando un usuario se desplaza hasta el marco de visualización de la imagen. Las primeras imágenes se cargarán inmediatamente, pero otras esperarán hasta que el usuario esté cerca de la imagen antes de cargar. Agregar esta función a su sitio web le ahorrará ancho de banda a usted y a su usuario y mejorará la velocidad de sus páginas web. Bj carga perezosa es un gran complemento para agregar Lazy Loading a su sitio web de WordPress.
Utilice una red de entrega de contenido
El uso de una red de entrega de contenido (CDN) reducirá considerablemente la carga en su servidor y aumentará el rendimiento de su sitio web. Un CDN simplemente servirá recursos del servidor más cercano a la ubicación del usuario que lo solicita. Por ejemplo, si un visitante de Beijing solicita una imagen y la CDN que está utilizando tiene un servidor ubicado en Seúl y Sydney, la imagen se entregará desde el servidor de Seúl.
MaxCDN es un CDN altamente calificado que puede probar, y hay otros como CloudFlare, CDN.net y más.
Línea de fondo
La optimización de imágenes para su uso en la Web es una de las formas más importantes de mejorar el tiempo de carga de la página de su sitio web y la experiencia general del usuario. Si tiene otras técnicas de optimización que le gustaría compartir, hágalo en los comentarios a continuación.