127 | Cómo optimizar imágenes para la web

En el episodio 127 de WordPress Semanal os hablo sobre qué quiere decir exactamente optimizar imágenes para la web, los beneficios que supone y cómo ponerlo en práctica fácilmente.

Plugin de la semana: galerías de vídeo de vimeo

Con el plugin Vimeography podrás crear galerías de los vídeos que tengas hospedados en Vimeo de forma óptima.

Entre sus características, está la posibilidad de añadir directamente a WordPress vídeos que ya tuvieras subidos a Vimeo, hacer lo propio con galerías y editar su apariencia usando temas prediseñados; también trae opciones para un mejor rendimiento en la carga de los vídeos.

Tiene una versión pro con más opciones de personalización y la posibilidad de comprar temas para cambiar el aspecto de tus galerías.

Optimizar imágenes para la web

1) Qué quiere decir “optimizar imágenes”

• Las imágenes grandes pueden hacer más lenta la carga de tu web
• Según este estudio de httparchive ocupan el 50% del peso de las webs
• Eso conlleva una peor experiencia para tus usuarios
• Optimizar imágenes es el proceso de disminuir el peso del archivo
• Puede hacerse con un plugin o con programas específicos

2) Los beneficios de optimizar imágenes para la web

• Mejorarán la velocidad de carga de tu web
• Afecta positivamente en el posicionamiento web (SEO)
• Será más rápido hacer copias de seguridad de tu web
• Usarás menos ancho de banda y ocupará menos espacios en tu servidor
• ¿Convencido/a? Sigamos

3) Cómo optimizar imágenes para la web

• Tutorial sobre cómo optimizar imágenes en WordPress
• Punto ideal entre el menor tamaño del archivo posible con una calidad de la imagen aceptable
• Comprimir las imágenes antes de subirlas a WordPress (con software de edición de imágenes o servicios online)
• Hay dos factores que entran en juego: formato del archivo y tipo de compresión
• Formatos: PNG, JPEG y GIF
• Tipos de compresión: Lossy y Lossless

4) Herramientas de optimización de imágenes y programas

• Muchas opciones de pago y gratuitas
• Photoshop, Gimp, ImageResize.org, pngquant, imageoptim

5) Redimensionar las imágenes

• Siempre se ha recomendado subir las imágenes del tamaño máximo con el que las vayas a usar
• Pero esto ya no es tan importante porque WordPress trabaja muy bien las imágenes responsive
• Es decir, ahora el navegador descargan la versión de la miniatura que corresponde y no el tamaño original de la imagen (antes era así)
• Podéis editar estos tamaños de miniatura en los ajustes de WordPress
• Incluso podéis usar un plugin como Imsanity para que el tamaño original no se guarde y sólo se queden en tu servidor las miniaturas

6) Plugins de optimización de imágenes que puedes usar

• Shortpixel Image Optimizer
• WP Smush
• Optimizador.io
• EWWW Image optimizer
• Hay muchísimos más

7) Mejores prácticas

• Si usas un plugin de WordPress, que comprima las imágenes en su servidor y no en el tuyo
• Puedes usar una CDN para servir las imágenes desde ahí (sobre todo si usas imágenes de mucho peso)
• Elimina la información innecesaria de la imagen, así como los metadatos (lossless)
• Si puedes usar css para crear un elemento, hazlo en lugar de subir imágenes (como bullets points)
• Guarda las imágenes en un tamaño concreto (aunque ahora WordPress sirve el tamaño adecuado por css)
• Usa la compresión lossy para una mayor reducción
• Haz pruebas con cada formato (jpg y png) para ver cuál es la optimización ideal
• PNG para imágenes con mucho detalle y resoluciones altas
• JPG para fotos generales y pantallazos
• A veces puede que te venga bien el lazy load para una primera carga de la página más rápida
• Si exportas la imagen desde un programa de edición, guárdalas como “optimizadas para la web”

Para seguir aprendiendo a gestionar tu negocio o proyecto con WordPress, prueba el área para suscriptores durante 15 días sin compromiso y echa un vistazo a todos los cursos la zona código y el soporte WordPress.

Enlaces

En este episodio he mencionado los siguientes recursos:

1. 1. Nuevo vídeo de la Zona código: crear efecto de texto borroso con css
   2. Curso del mes: Curso de child themes de WordPress
   3. Tutorial: guía paso a paso para optimizar imágenes en WordPress
   4. Tutorial: gifs en WordPress (cómo optimizarlos)

Conclusión

Los motores de búsqueda, los navegadores y, sobre todo, tus lectores estarán mucho más contentos una vez que hayas formateado las imágenes para un mejor rendimiento.

Si usas otros métodos o programas, estaré encantado de escucharlo. Y recuerda que tienes un tutorial explicándote paso a paso cómo optimizar las imágenes en WordPress.

Si te ha gustado el episodio de hoy y quieres ayudarme a seguir creando episodios como este en iTunes, deja una valoración aquí (tardarás segundos). ¡¡Gracias!!
Si me escuchas desde iVoox, también te agradezco tus comentarios y me gusta.