Cómo optimizar imágenes antes de subirlas a la web

Optimizar imágenes es algo muy sencillo que puede mejorar notablemente los tiempos de carga de nuestra web. En este video te cuento como lo hago yo desde mi ordenador Windows.

Tamaños y peso de imagen recomendados

Horizontales2000px de ancho y menos de 500kb
Verticales y cuadradas768px de ancho y menos de 500kb
Tabla de tamaños y pesos recomendados

Cómo optimizar imágenes en Windows paso a paso

  • Descarga e instala RIOT
  • Para optimizar imágenes de una en una:
    • Abre el programa y arrastra dentro de la ventana la imagen que quieres minificar
    • Selecciona el nuevo tamaño que te pregunta el programa en base a la tabla de arriba, recuerda mantener activa la opción Keep Aspect ratio para evitar deformaciones
    • Previsualiza el resultado y guarda la imagen minificada
  • Para optimizar imágenes en grupo
    • Abre el programa y pulsa la opción Batch
    • Selecciona la Output folder (carpeta destino) donde se guardarán las imágenes optimizadas pulsando en los tres puntitos de la barra inferior. Te recomiendo que crees una carpeta llamada min dentro de la carpeta donde tienes las imágenes sin optimizar, de esta forma tendras las versiones con y sin optimización en el mismo lugar.
    • En Additional tasks (arriba a la izquierda de la ventana) añade Resize. Indícale el ancho según la tabla de tamaños recomendados, manteniendo activa la opción Keep Aspect ratio para evitar deformaciones
    • Ahora, ve a la carpeta donde tienes todas las imágenes que quieres optimizar en grupo, selecciónalas todas y arrástralas a la ventana en la zona blanca. Verás que se crea una tabla con una fila por cada imagen que has arrastrado dentro.
    • Ya lo tienes todo preparado para pulsar el botón Start y ver cómo sucede la magia en la que todas las imágenes se van reduciendo de peso, redimensionando y guardando en la carpeta que le has indicado el programa.

Cómo optimizar imágenes dentro de WordPress

Para esto hay muchas soluciones, la más completa y accesible que hemos usado en Wondermochi es Smush de WPMU Dev. Tiene una versión gratuita con algunas limitaciones, pero igualmente funcionarl para optimizar imágenes que ya están subidas y se están usando en tu web.

Otros recursos relacionados