馃憠 Acelerar tu WordPress - C贸mo guardar im谩genes optimizadas para la Web

La gu铆a definitiva para una estrategia eficaz de blogs de invitados en 2018

¿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 adecuadamente las imágenes optimizadas para la web.

Cada experto en blogs le 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, un retraso de un segundo puede costarle un 7% de las ventas, un 11% menos de páginas vistas y un 16% de disminución en la satisfacción del cliente.

Video Tutorial

Suscribirse a WPBeginner

Si no le gusta el video o necesita más instrucciones, continúe leyendo.

Cómo guardar imágenes correctamente?

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

Para la mayoría de nosotros, los únicos dos formatos de imagen que importan son JPEG y PNG. Para mantener las cosas simples, use archivos JPEG para fotos o imágenes con mucho color, y use archivos PNG 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 más pequeño.

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

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

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

Formato de imagenTamaño de la imagen
Photoshop Optimized JPEG High33 KB
TinyPNG optimizado57 KB
JPEG Mini optimizado70 KB
Photoshop Optimized JPEG Max93 KB
JPEG no optimizado Max119 KB
Photoshop optimizado PNG135 KB
PNG no optimizado145 KB

Herramientas de compresión de imágenes para bloggers

Ahora que ha visto la diferencia que tiene 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 de guardar. A la derecha, puedes 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 usar. 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 de compresión con pérdida inteligente para reducir el tamaño de tus archivos PNG. Todo lo que tienes que hacer es ir a su sitio web y subir tus imágenes. Comprimirán la imagen y te 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 perceptual. Puede usar su versión web de forma gratuita o comprar el programa para su computadora. También tienen una API paga para automatizar el proceso de su servidor.

ImageOptim

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

La alternativa de Windows a esto es Trimage.

Como puede ver, hay varias herramientas que puede usar para optimizar imágenes para la web. Al usar la compresión de Photoshop, vimos los mejores resultados en tamaño, sin embargo, la calidad se vio afectada. TinyPNG fue un ganador claro para guardar 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 tu carga de trabajo.

Pensamientos finales sobre la optimización de la imagen

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

Si busca imágenes de calidad, consulte nuestra guía sobre cómo encontrar imágenes libres de derechos para las publicaciones de su blog.

Por último, pero no menos importante, el uso de un CDN para mostrar imágenes para su sitio de WordPress puede acelerar significativamente su sitio. Consulte esta infografía para ver qué es un CDN y utilice nuestra guía sobre cómo configurar CDN para su sitio. Estamos usando MaxCDN para nuestro sitio.

Esperamos que hayas encontrado este artículo útil.

¿Tiene amigos bloggers que están guardando imágenes incorrectas? Comparta este artículo con ellos, para que puedan acelerar su sitio. Ellos te lo agradecerán.

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

Ver el v铆deo: LA GU脥A DEFINITIVA PARA APRENDER UNA FARMEAR EN LA LIGA DE LEYENDAS. 隆LO QUE NO TE CUENTAN! + SORTEO

Like this post? Please share to your friends:
Deja un comentario

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: