Acelere su WordPress - Cómo guardar imágenes optimizadas para la Web

Acelere su WordPress - Cómo guardar imágenes optimizadas para la Web / Guía para principiantes

¿Estás guardando imágenes mal? La mayoría de los principiantes no saben cómo guardar las imágenes correctamente, lo que puede tener un gran impacto en la velocidad del sitio web. En este artículo, le mostraremos cómo guardar correctamente las imágenes optimizadas para la web.

Cada experto en blogs te dirá que las imágenes ayudan a aumentar el compromiso. Sin embargo, lo que no le dicen es que no optimizar las imágenes para la Web puede ralentizar su sitio. Según Strangeloop, una demora de un segundo puede costarle un 7% de las ventas, un 11% menos de visitas y un 16% menos en la satisfacción del cliente.

Video Tutorial

Suscribirse a WPBeginner

Si no te gusta el video o necesitas más instrucciones, continúa leyendo.

Cómo guardar imágenes correctamente?

Al guardar imágenes, debe tener en cuenta dos cosas: formato de archivo de imagen, y compresión. Al elegir la combinación correcta, puede reducir el tamaño de su imagen en 5x.

Para la mayoría de nosotros, los únicos dos formatos de imagen que son importantes son JPEG y PNG. Para simplificar las cosas, use JPEG para fotos o imágenes con mucho color, y use PNG para obtener imágenes más simples o cuando necesite imágenes transparentes.

Para aquellos que no saben la diferencia, el formato de imagen PNG no está comprimido, lo que significa que es una imagen de mayor calidad. El inconveniente es que el tamaño del archivo es mucho más grande. Por otro lado, JPEG es un formato de archivo comprimido que reduce ligeramente la calidad de la imagen para proporcionar un tamaño de archivo significativamente menor..

En WPBeginner, la mayoría de nuestras imágenes son JPEG.

Lo siguiente es la compresión, que significa usar una herramienta para guardar imágenes optimizadas para la web. La compresión puede hacer una gran diferencia.

Vea la tabla a continuación que destaca las pocas combinaciones que podríamos haber utilizado para guardar la imagen de Strangeloop utilizada en este artículo..

Formato de imagen Tamaño de la imagen
Photoshop optimizado JPEG alto 33 KB
TinyPNG optimizado 57 KB
JPEG Mini Optimizado 70 KB
Photoshop optimizado JPEG Max 93 KB
JPEG no optimizado Max 119 KB
Photoshop optimizado PNG 135 KB
PNG no optimizado 145 KB

Herramientas de compresión de imagen para bloggers

Ahora que ha visto la diferencia que hace cada tipo de compresión, a continuación se muestra cómo puede guardar correctamente las imágenes optimizadas para la web y acelerar su sitio.

Adobe Photoshop

Adobe Photoshop es un software premium que viene con una función para guardar imágenes optimizadas para la web. Simplemente abra su imagen y haga clic en el botón Archivo> Guardar para Web y Dispositivos.

Esto abrirá una pantalla de guardado. A la derecha, puede configurar diferentes formatos de imagen. Para el formato JPEG, verás diferentes opciones de calidad. Cuando selecciona sus opciones, también le mostrará el tamaño del archivo en la parte inferior derecha.

Nota: Entendemos que Photoshop es bastante caro. GIMP es una alternativa gratuita que los usuarios pueden usar. Otros productos de Adobe como Fireworks pueden hacer el trabajo como bien.

TinyPNG

TinyPNG es una aplicación web gratuita que utiliza la técnica de compresión inteligente con pérdida para reducir el tamaño de sus archivos PNG. Todo lo que tienes que hacer es ir a su sitio web y subir tus imágenes. Comprimirán la imagen y le darán el enlace de descarga..

Para los desarrolladores, también tienen una API para convertir imágenes automáticamente.

JPEG Mini

JPEGmini utiliza una tecnología de recompresión que reduce significativamente el tamaño de las imágenes sin afectar su calidad de percepción. Puede usar su versión web de forma gratuita o comprar el programa para su computadora. También tienen una API de pago para automatizar el proceso de su servidor..

ImageOptim

ImageOptim es una utilidad para Mac que te permite comprimir imágenes sin perder calidad al encontrar los mejores parámetros de compresión y eliminar perfiles de color innecesarios.

La alternativa de Windows a esto es Trimage..

Como puede ver, hay varias herramientas que puede utilizar para optimizar imágenes para la web. Al utilizar la compresión de Photoshop, vimos los mejores resultados en tamaño, sin embargo, la calidad se vio afectada. TinyPNG fue un claro ganador por salvar cualquier tipo de PNG en la web.

Algunos sugieren que puede usar una combinación de TinyPNG o JPEG Mini e Image Optim para obtener mejores resultados. Sin embargo, ejecutar dos herramientas separadas para cargar imágenes puede aumentar un poco su carga de trabajo.

Reflexiones finales sobre la optimización de la imagen

Si no está guardando imágenes optimizadas para la web, entonces comience a hacerlo ahora. Puede hacer una gran diferencia en la velocidad de su sitio, y sus usuarios se lo agradecerán. Seguro que la calidad de la imagen puede disminuir ligeramente, pero la mayoría de los usuarios no lo notarán.

Si está buscando imágenes de calidad, consulte nuestra guía sobre cómo encontrar imágenes sin royalties para las publicaciones de su blog..

Por último, pero no menos importante, usar una CDN para servir imágenes para su sitio de WordPress puede acelerar significativamente su sitio. Echa un vistazo a esta infografía para ver qué es un CDN y usa nuestra guía sobre cómo configurar CDN para tu sitio. Estamos usando MaxCDN para nuestro sitio.

Esperamos que este artículo te haya sido útil..

¿Tienes amigos bloggers que están guardando imágenes mal? Comparte este artículo con ellos, para que puedan acelerar su sitio. Te lo agradecerán.

Si tiene alguna pregunta, por favor deje un comentario a continuación. Tampoco olvides seguirnos en Twitter y Google.+