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 compartible 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 ralentizar su sitio web y brindar una experiencia de usuario deficiente para el usuario final. Realmente no hay excusa para brindar una experiencia de usuario deficiente con la gran cantidad de herramientas que pueden ayudarlo a comprimir sus imágenes sin una pérdida notable en la 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 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 normalmente se usa para fotos que contienen muchos colores, mientras que PNG es mucho mejor 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. GIF se usa principalmente para imágenes animadas en la Web hoy en día.
La mayoría del software de edición de imágenes le permite 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 adecuados
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 te ayudarán a comprimir tus imágenes antes de subirlas a tu servidor. Photoshop, por ejemplo, tiene una práctica función de «guardar para Web y dispositivos» que le permitirá elegir la configuración de formato y calidad. También verá el tamaño de archivo de su imagen cuando aplique una configuración 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 TinyPNGdonde podrás subir tus imágenes en alta resolución, optimizarlas y descargar el formato comprimido para su uso en la Web.
Comprimir imágenes después de cargar
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 de forma individual o 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 imágenes EWWW que puede ayudarlo a convertir sus imágenes al formato que produce el tamaño de archivo más bajo posible.
Hay otros disponibles en el repositorio de WordPress, así que siéntase 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 etiquetar sus imágenes correctamente. Esto significa usar siempre el “alternativa” 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 obtener una cantidad significativa de tráfico de búsqueda.
Agregar subtítulos donde sea necesario es otra excelente manera de ayudar a los visitantes de su sitio web a comprender mejor la imagen. Servir etiquetas de títulos descriptivos adecuados y nombres de archivo de imagen ayuda de la misma manera. Entonces, en lugar de guardar sus imágenes como «FXSCSUYE.jpg», use 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
Lazy Loading es una técnica utilizada por muchos sitios web para ahorrar ancho de banda al cargar imágenes solo cuando un usuario se desplaza al 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 ahorrará ancho de banda para usted y su usuario y mejorará la velocidad de sus páginas web. bj perezoso carga es un excelente 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 brindará recursos desde el servidor más cercano a la ubicación del usuario que lo solicita. Por ejemplo, si un visitante de Pekín solicita una imagen y la CDN que está utilizando tiene un servidor ubicado en Seúl y Sídney, la imagen se entregará desde el servidor de Seúl.
MaxCDN es un CDN altamente calificado que puede probar, y hay otros como Llamarada de la nube, 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.