Cómo optimizar imágenes para un sitio web

Posicionamiento Web

Cómo optimizar imágenes para un sitio web

En nuestra agencia es importante compartir el conocimiento por eso les prepare este videotutorial para que optimicen las imágenes de sus sitios web y mejoren el posicionamiento orgánico. Espero lo disfruten. 

Transcripción video

Hola a todos ¿cómo están?, mi nombre es Camilo López, Director Digital de DesignPlus y hoy vamos hablar de optimización de imágenes, banners, productos, para sus sitios web; bueno básicamente ¿qué pasa? Hoy día es muy importante que ustedes optimicen sus imágenes para que sus sitios web rankeen mejor en Google. 

Esta optimización lo que hace es que le quita una meta información a las imágenes y hace que pues cargue de una manera mucho más rápida, somos muy insistentes en DesignPlus de que todos nuestros clientes optimicen sus imágenes y pues de esa manera el sitio web o la página va a cargar más rápido y probablemente eso ayude en el ranking y ustedes aparezcan pues mejor posicionados en Google.

Lee también: La guía completa de cómo crear una estrategia de SEO

Para esto vamos hablar de dos herramientas, les quiero presentar hoy ImageOptim ustedes buscan acá en Google y bueno les va a dar un resultado; no me pregunten por qué pero si yo trato de abrir esta página nunca me ha abierto, creo que es un problema con Claro, que es nuestro proveedor de Internet, pero ustedes tienen un segundo resultado que se llama MacUpdate, ustedes pues le dan clic a la pestaña, eh los va a llevar a un sitio web donde pues hay muchos programas de Mac y pues probablemente lo puedan descargar desde ahí, pues más fácil, es la manera en que yo lo hago porque la página a mi no me abre. Y la otra herramienta se llama Kraken.io o aio como quieran, esta tiene una interfaz web, entonces lo que pasa es que este de ImageOptim es un programa para Mac, entonces, pues para los que no tengan Mac lo pueden utilizar aquí directamente sobre el navegador. 

Para esto yo he preparado aquí pues un material; he preparado una carpeta que se llama optimización donde tengo unas imágenes que son originales, entonces lo que nosotros nos vamos a fijar aquí es en el peso, ustedes se dan cuenta esto pesa 794 K y pues ya tenemos así como todos los pesos de todas las imágenes, estos Screenshots pues los saque del sitio web nuestro, digamos que quiero tomar otro, entonces este que tengo acá, voy a tomar un nuevo Screenshot, estos son como cualquier ejemplo, ustedes pueden tomar el que ustedes quieran. Voy a tomar este del Gimnasio Fontana, abro una nueva pestaña acá, entonces esta imagen si se dan cuenta es un PNG, vengo y lo meto en optimización, vengo a originales y son todas estas imágenes las que vamos a optimizar. Correcto.

El primero que voy a traer es el del ImageOptim, ustedes ya lo han descargado, lo instalan en su computador perdón y lo que vamos hacer es lo siguiente vamos a guardar estos que son pruebas, esto no lo tienen que hacer ustedes esto simplemente es para comparar ahorita los pesos, entonces digamos que siempre es muy importante que las imágenes que ustedes vayan a optimizar le saquen una copia por si llega a pasar algo, aquí solamente la vamos a optimizar, a mejorar el peso, pero probablemente ustedes a veces quieran hacer no se un redimensionamiento algo así, entonces, pues es recomendable que siempre hagan una copia. Bueno voy a duplicar esto y a estas las voy a llamar ImageOptim, entonces listo lo que hago es que meto toda la carpeta sobre esta interfaz (este es el programa), y él lo que va hacer es que toma cada una de esas imágenes y les va hacer pues la optimización, por ejemplo miren aquí en este momento a esta imagen, de momento le hemos optimizado, la hemos reducido en peso en un 25.7%, algo que ustedes se den cuenta que ya finalizó la descarga es que este icono que está aquí en la parte izquierda se va a poner con un chulito verde, entonces eso quiere decir que pues la imagen ya terminó de ser optimizada, si ven, por ejemplo la primera ya acabo y terminó en 25.7, eso fue pues lo que lo redujo, listo entonces démosle un momento mientras que termina de optimizarse y pasamos ya a la interfaz web.

Mientras tanto yo voy duplicando nuevamente la carpeta y esta se llama Kraken.io. Listo entonces bueno aquí si se dan cuenta ya finalizó pues toda la optimización, ya todas las imágenes estan listas. Me voy a la interfaz web, y aquí pues así como si fuera directamente sobre el programa de ImageOptim hago lo mismo, arrastro mi carpeta, toda, con todos mis archivos la suelto aquí sobre la interfaz y él me va a mostrar aquí en la parte inferior pues el estado (démosle un segundo que termine), aquí me va a decir como pues al tamaño que quedó reducido, el total de ahorro y el porcentaje. Bueno esta ya va aquí en un noventa y algo... listo ahí ya van tres archivos, cuatro y quinto. Ya listo, ya acabe con todos, yo puedo descargar todo el .zip, o sea yo puedo descargar aquí individualmente cada una de las imágenes o puedo descargarlos todos, voy a descargarlos todos… me doy cuenta aquí que finalice la descarga, ya acabo, lo voy a poner acá en la carpeta donde tengo todas las pruebas, las comprimo. Y básicamente yo creo que la prueba más fácil es saber cuánto pesaba la carpeta con todos los archivos originales, si ustedes se dan cuenta aquí ese pesaba 4.8 megas, si me voy a la de ImageOptime... denme un segundo (¿cómo lo comparo? listo). Originales 4.8, las que pase por el ImageOptime quedaron en 3.6 y las de Kraken.io, pues dense cuenta que va ser el que los reduce muchísimo más, entonces super recomendado utilizar esa interfaz web, ustedes igual pues pueden revisar digamos a nivel interno la calidad, si ustedes ven que pues, no se, se bajó mucho la calidad, como que se pixela, como que se pierde el detalle, por ejemplo miren aquí zapatos planos tacones y plataformas vamos a compararlo contra los originales… ah bueno no, la imagen estaba así pues originalmente entonces pues no hay mucha diferencia.

Pues bueno eso era lo que les queríamos mostrar hoy, que ustedes se den cuenta la importancia de optimizar imágenes, que se den cuenta pues a través de una interfaz tan fácil como es esta de Kraken.io pues optimizarlo es supremamente sencillo solamente arrastran la carpeta, y bueno miren el tamaño o sea de 4.8 megas que pesaban los archivos originales lo hemos reducido a 1.5 listo, entonces pues bueno eso les quería contar el día de hoy y espero nos sigan visitando en nuestro sitio web y nos sigan en nuestras redes sociales.

Comentarios