¿Está guardando mal las imágenes? 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 te dicen es que no optimizar las imágenes para la web puede ralentizar tu sitio. Según Strangeloop, un retraso de un segundo puede costarle el 7% de las ventas, un 11% menos de páginas vistas y una disminución del 16% en la satisfacción del cliente.
Video Tutorial
Suscribirse a AprenderWP
Si no te gusta el video o necesitas más instrucciones, entonces continúa leyendo.
¿Cómo guardar las 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 la imagen en 5 veces.
Para la mayoría de nosotros, los únicos dos formatos de imagen que importan son JPEG y PNG. Para mantener las cosas simples, utilice JPEGs para fotos o imágenes con mucho color, y utilice PNGs para imágenes más simples o cuando necesite imágenes transparentes.
Para aquellos que no conocen la diferencia, el formato de imagen PNG no está comprimido, lo que significa que es una imagen de mayor calidad. La desventaja es que el tamaño del archivo es mucho mayor. 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 AprenderWP, la mayoría de nuestras imágenes son JPEGs.
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 usado para guardar la imagen de Strangeloop usada en este artículo.
Formato de imagenTamaño de la imagenPhotoshop Optimizado JPEG High33 KBTinyPNG Optimizado57 KBJPEG Mini Optimizado70 KBPhotoshop Optimizado JPEG Max93 KBNon-Optimizado JPEG Max119 KBPhotoshop Optimizado PNG135 KBNon-Optimizado PNG145 KB
Herramientas de compresión de imágenes para bloggers
Ahora que ha visto la diferencia que hace cada tipo de compresión, a continuación se muestra cómo puede guardar adecuadamente 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 para guardar. A la derecha, puede establecer diferentes formatos de imagen. Para el formato JPEG, verá diferentes opciones de calidad. Cuando seleccione 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 utilizar. Otros productos de Adobe, como Fireworks, también pueden hacer el trabajo.
TinyPNG
TinyPNG es una aplicación web gratuita que utiliza una técnica inteligente de compresión 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. Ellos 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 a su calidad perceptiva. Usted puede utilizar su versión web de forma gratuita, o comprar el programa para su ordenador. También tienen una API de pago para automatizar el proceso para su servidor.
ImageOptim
ImageOptim es una utilidad de Mac que le permite comprimir imágenes sin perder calidad encontrando los mejores parámetros de compresión y eliminando los perfiles de color innecesarios.
La alternativa de Windows a esto es Trimage.
Como puedes ver, hay varias herramientas que puedes usar para optimizar imágenes para la web. Cuando usamos 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 guardar cualquier tipo de PNG en la web.
Algunos sugieren que puede utilizar una combinación de TinyPNG o JPEG Mini y Image Optim para obtener mejores resultados. Sin embargo, ejecutar dos herramientas separadas para subir imágenes puede aumentar un poco su carga de trabajo.
Reflexiones finales sobre la optimización de imágenes
Si no está guardando imágenes optimizadas para la Web, empiece 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 buscas imágenes de calidad, consulta nuestra guía para encontrar imágenes libres de derechos para tus entradas de blog.
Por último, pero no por ello menos importante, el uso de una CDN para servir imágenes para su sitio WordPress puede acelerar significativamente su sitio. Echa un vistazo a esta infografía para ver qué es una CDN, y utiliza nuestra guía sobre cómo configurar una CDN para tu sitio. Estamos usando MaxCDN para nuestro sitio.
Esperamos que este artículo le haya sido útil.
¿Tienes amigos blogueros que guardan mal las imágenes? Comparta 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+
Deja una respuesta