September 19, 2018

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

26 minutes

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.

Escuchar en iTunes Escuchar en iVoox Escuchar en Spotify

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:

Nuevo vídeo de la Zona código: crear efecto de texto borroso con css

Curso del mes: Curso de child themes de WordPress

Tutorial: guía paso a paso para optimizar imágenes en WordPress

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.

La entrada 127 | Cómo optimizar imágenes para la web es una artículo de Gonzalo Navarro.

...more

View all episodes

By Gonzalo Navarro

4.8

88 ratings