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. 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.