Sugerencias para optimizar imágenes para su sitio: mejore el rendimiento y la experiencia del usuario

No quieres que Google desprecie tu sitio web, créenos. Afortunadamente, puedes optimizar tus imágenes y así mejorar la eficiencia de tu sitio. Un problema con formatearlos es que los cambios pueden afectar su calidad (lo que a su vez puede hacer que el visitante odie tu sitio web).

Eso no es algo terrible si no los haces lucir horribles. Hay algunos consejos y técnicas que le permitirán reducir el tamaño de archivo de sus imágenes mientras las mantiene lo suficientemente atractivas como para mostrarlas con orgullo en su sitio web.

Entonces, veamos cómo formatear sus fotografías sin que se vean mal, así como también cómo optimizarlas para la web y el rendimiento.

¿Qué significa optimizar las imágenes?

Las imágenes grandes hacen que sus páginas web se carguen lentamente, lo que resulta en una mala experiencia para el usuario. Al utilizar la optimización de imágenes, es decir, reducir el tamaño del archivo mediante un complemento o script, no solo mantiene su calidad sino que también mejora el tiempo de carga. Dos métodos de compresión comúnmente utilizados son la compresión con pérdida y sin pérdida.

Las ventajas del formato de imagen

¿Por qué necesitas formatear tus fotografías en primer lugar? ¿Cuáles son las ventajas? Hay varias ventajas en la optimización del rendimiento de sus fotos. Según HTTP Archive, las imágenes representan el 21 % del peso total de una página web a partir de noviembre de 2018.

Esto lo convierte en la segunda parte más importante de su sitio que necesita optimizar, precedida solo por el video.

Tiene prioridad sobre los scripts y las fuentes. A pesar de que un procedimiento adecuado de optimización de imágenes es una de las cosas más sencillas de establecer, muchos propietarios de sitios web lo pasan por alto.

Estas son algunas de las ventajas más importantes:

• Mejorará drásticamente la carga de scripts. Si su página tarda demasiado en cargarse, sus visitantes pueden frustrarse y pasar a otro sitio web.
• Cuando se usa junto con un buen complemento de WordPress, puede tener un gran efecto en el SEO. En los resultados de los motores de búsqueda, su sitio web se clasificará más alto.
• Será más fácil crear copias de seguridad.
• Los archivos más pequeños utilizan menos ancho de banda. Esto será apreciado tanto por las redes como por los navegadores.
• Reduce la cantidad de espacio de almacenamiento requerido en su servidor (esto depende de cuántas miniaturas optimice)

Cómo mejorar la calidad de imagen y el rendimiento para la Web

El objetivo principal del formateo de imágenes es encontrar un equilibrio entre la calidad y el tamaño del archivo. Casi todas estas optimizaciones se pueden realizar de varias formas. Comprimirlos antes de subirlos a tu sitio de WordPress es uno de los métodos más utilizados. Esto generalmente se hace en un programa como Adobe Photoshop o Affinity Photo.

El formato de archivo y el tipo de compresión son los dos factores que siempre debes considerar. Para descubrir qué funciona mejor con cada imagen o tipo de archivo, tendrá que explorar.

Elija el formato de archivo correcto

Asegúrese de haber elegido el mejor tipo de archivo para sus fotografías antes de comenzar a editarlas. Puede usar una variedad de archivos, que incluyen:

• PNG: el tamaño del archivo es mayor, pero la calidad sigue siendo más o menos la misma. Aunque fue diseñado para ser un formato de imagen sin pérdida, también puede tener pérdida.
• La optimización con pérdida y sin pérdida se utiliza en JPEG. Para lograr un equilibrio saludable entre la calidad y el tamaño del archivo, puede establecer el nivel de calidad.
• Solo se utilizan 256 colores en los GIF. Para gráficos animados, es la opción ideal. Solo se utiliza compresión sin pérdidas.

Hay algunos otros, como JPEG XR y WebP, aunque no todos los navegadores los admiten. Para fotografías con mucho color, deberás utilizar JPEG o JPG, y para imágenes planas, PNG.

Optimización con pérdida frente a sin pérdida

Hay dos estilos de compresión de imágenes aceptables, y se denominan con pérdida y sin pérdida.

El término "con pérdida" se refiere a un filtro que elimina algunos de los datos. Debido a que esto dañará la imagen, deberá tener cuidado con la cantidad de minimización. Para realizar este tipo de optimización, puede usar software como Adobe Photoshop, Affinity Photo, etc. En el ejemplo anterior se utiliza la compresión con pérdida.

El término "sin pérdidas" se refiere a un filtro de compresión de datos. Esto tiene un efecto mínimo en la calidad de la imagen. En su PC, puede usar aplicaciones como Photoshop, FileOptimizer o ImageOptim para realizar una compresión sin pérdidas.

Lo mejor es probar varias estrategias de compresión para encontrar cuál funciona mejor para cada imagen o formato.

Herramientas y programas para la optimización de imágenes

Hay varias herramientas y aplicaciones disponibles, tanto de pago como gratuitas, para ayudarte a optimizar tus fotografías. Algunas empresas le brindan las herramientas para realizar sus propias optimizaciones, mientras que otras lo hacen por usted.

Somos grandes partidarios de Affinity Photo porque es económico y tiene capacidades casi idénticas a las de Adobe Photoshop.

Aquí hay más recursos e iniciativas para investigar:

• Adobe Photoshop
• Cañutillo
• Paint.NET
• GIFsicle
• JPEGtran
• JPEG Mini
• OptiPNG

Cambiar el tamaño de las imágenes a escala

Solía ​​ser crucial enviar fotos a escala en lugar de dejar que CSS les cambiara el tamaño. Dado que WordPress 4.4 ahora admite imágenes receptivas, esto ya no es un problema. WordPress cambia automáticamente el tamaño de cada imagen añadida a la biblioteca de medios. Al especificar todos los tamaños potenciales de una imagen, los navegadores ahora pueden elegir el tamaño más adecuado e ignorar los demás.

Limpie su biblioteca de medios

Si desea conservar espacio mientras limpia simultáneamente su biblioteca de medios, puede usar Media Cleaner para buscar archivos de medios no deseados. El complemento escaneará todos sus archivos multimedia y mostrará los que no estén en uso en el panel de Media Cleaner para que pueda verlos y eliminarlos.

Complementos de optimización de imágenes que puede usar

Afortunadamente, no tienes que manejar todo el formato o la compresión a mano con WordPress. Puede utilizar complementos para automatizar al menos parte del trabajo por usted. Hay una serie de complementos disponibles que optimizarán sus archivos de imagen cuando los envíe. Incluso mejorarán la calidad de las fotografías que ya hayas publicado.

• Optimizador de imágenes Imagify
• Optimizador de imágenes de píxeles cortos
• Optimol
• EWWW Optimizador de imágenes en la nube
• Optimizador de imágenes Optimus
• WP Smush
• TinyPNG
• ImagenReciclar

Conclusión

Su sitio gustará más a los motores de búsqueda, navegadores y redes, y se cargará más rápido para sus lectores, una vez que haya preparado sus fotos para un mejor rendimiento y siguiendo las mejores prácticas.

¿Has preparado tus fotografías para que salgan más rápido? ¿Lo haces manualmente, con un complemento o usando ambos? ¿Hay algún programa o complemento que sugiera? ¿Hay algo más que quieras decir?

Cuéntenos sobre sus estrategias y mejores prácticas en la sección de comentarios.