¿En que consiste la optimización?
El objetivo principal de optimizar imágenes para web es encontrar el equilibrio entre el tamaño de archivo menor y una calidad aceptable. Los dos principales aspectos a considerar son el formato de archivo (.JPG, .PNG, .GIF), el tipo de compresión que utilizan (Mayor o menor calidad) y la resolución de ésta (Píxeles por pulgada, siendo 96ppp una resolución muy buena).
Con programas como, Adobe Photoshop o GIMP, se puede conseguir una reducción muy buena aplicando los términos anteriores. Una imagen se puede reducir hasta 5 veces para lograr conseguir una visualización óptima sin pérdida de calidad. Incluso hoy en día, están muy de moda compresores de imagen online, que aunque no optimizan a un máximo nivel, consiguen reducir el tamaño de una imagen de forma rápida.
¿Sabías que un 30% del tamaño de una web se debe a las imágenes?
Cómo optimizar imágenes para web es un problema muy común en muchas páginas. La optimización junto a la concatenación y minificación de código es un proceso vital para la velocidad de carga de una web.
No siempre las imágenes que se muestran están totalmente optimizadas, y es que según Google, debemos subir una imagen al tamaño exacto del que vamos a mostrar. Por ejemplo: Si subimos una imagen de 1920×1080 pixeles y luego la mostramos en 300×300, no optimizamos para nada ya que la imagen que hemos subido pesa más y además al renderizar tiene que adaptarse al tamaño final, con lo cual implica más tiempo de carga añadido.
¡Los navegadores web te ayudan!
La mayoría de los navegadores ya incorporan el aclamado Lazy Loading para imágenes o carga diferida, el cual controla que se cargue el contenido únicamente que el usuario está viendo en ese momento. De esta forma al abrir una web que contenga muchas imágenes, sólo cargará aquellas en las que se muestran por pantalla en ese momento. Las demás se van cargando conforme se vaya haciendo scroll en la página.
Esta característica ha sido muy bien recibida por diseñadores y desarrolladores de sitios web, ya que llevaba tiempo siendo demandada y por fin es una realidad.
Formatos para optimizar imágenes que vienen pidiendo paso
Es un hecho que los formatos jpg y png se han quedado algo anticuados, sin duda están muy de moda los nuevos formatos con los que se trabajan que son webP de Google, que consigue reducir aun más la compresión de la imagen.
Otro formato que se utiliza mucho es svg es un formato de archivo abierto y gratuito para crear gráficos vectoriales en dos dimensiones.
Es un formato estandarizado y aprobado por el W3C y que está totalmente respaldado por todos los navegadores web actuales.
WordPress tampoco se queda atrás
Existen muchos plugins en WordPress que ayudan de forma considerable a realizar este trabajo. Cualquiera de los que se encuentran en el repositorio son gratis y junto con sus opciones avanzadas puedes reducir y optimizar imágenes para web de forma sencilla y automática. Por ejemplo, Smush it, al instalarlo incluye una opción que automáticamente cuando subas una imagen la optimizará al instante sin problemas.
Nosotros recomendamos formatear la imagen mediante un programa especializado como los comentados anteriormente, y si trabajas con WordPress complementar con alguno de estos programas, ya que conseguirás reducir aún más el peso de una imagen y la calidad visual será perfecta.
WordPress con su nueva versión 5.8 ya soporta de forma nativa las imágenes en webP, lo que también es muy recomendable. Si tienes la opción de utilizar imágenes o iconos en formato svg, también te lo recomendamos, sin duda.
