Existen 2 factores principales a la hora de mejorar el proceso de carga de las im\u00e1genes, estos son:<\/p>\n
- \n
- el peso<\/strong> de la imagen<\/li>\n
- el tama\u00f1o<\/strong> de la imagen<\/li>\n<\/ul>\n
Tambi\u00e9n hay otros factores que pueden ayudarnos a mejorar la experiencia de usuario y tiempos de carga, pero principalmente se basa en estos 2 factores.<\/p>\n
\u00bfC\u00f3mo beneficia la optimizaci\u00f3n de las im\u00e1genes a una web?<\/h2>\n
Cuando optimizamos las im\u00e1genes por tama\u00f1o y peso, lo que estamos logrando es mejorar la velocidad con la que una p\u00e1gina se descarga y lograr que el servidor donde tenemos alojada nuestra web tenga que realizar menos trabajo para descargar todos los elementos<\/strong>.<\/p>\n
\u00bfTienes un blog y quieres ganar dinero?<\/div>\nDentro de Publisuites podr\u00e1s generar ingresos vendiendo posts patrocinados dentro de tu blog para otros usuarios. Entra y Hazte una cuenta de editor para empezar a ganar dinero.<\/p>\n
<\/i> Reg\u00edstrate como editor y gana dinero con tu blog<\/span><\/a><\/div><\/div><\/div><\/div>\nMejorando estos tiempos de descarga conseguiremos que el usuario vea la p\u00e1gina antes y reduciremos la probabilidad del rebote<\/a>. Con esto, mejorar\u00e1 la satisfacci\u00f3n respecto a la p\u00e1gina.<\/p>\n
Mejorar los tiempos de carga tambi\u00e9n beneficia el posicionamiento web. Ya que las ara\u00f1as de Google<\/a>\u00a0tienen que hacer menos trabajo para rastrear tu web y pueden dedicar ese tiempo extra a rastrear otras p\u00e1ginas internas a trav\u00e9s del interlinking<\/a>. Adem\u00e1s, al saber que los usuarios van a recibir una mejor experiencia en tu p\u00e1gina web optimizada, va a tender a posicionarla mejor.<\/p>\nC\u00f3mo optimizar im\u00e1genes y mejorar el rendimiento de tu web (GU\u00cdA 2019) <\/a><\/span>Compartir en X<\/a><\/span>\n
Ejemplos de rendimiento de una imagen<\/h3>\n
Bueno, todo lo comentado antes est\u00e1 bastante bien a modo teor\u00eda, pero a veces es necesario ver para creer. Es por ello que os voy a mostrar un ligero ejemplo de lo que supone adaptar una imagen en cuestiones de tiempo y velocidad:<\/p>\n
El siguiente ejemplo es algo exagerado, esto es lo que sucede con un imagen de 753 KB que solo est\u00e1 comprimida:<\/p>\n
![\"imagen](\"https:\/\/www.publisuites.com\/blog\/wp-content\/uploads\/2019\/02\/imagen-seo-sin-optimizar.png\")
<\/p>\nEsto es lo que sucede, si cambiamos el tama\u00f1o y volvemos a comprimir la imagen:<\/p>\n
![\"imagen](\"https:\/\/www.publisuites.com\/blog\/wp-content\/uploads\/2019\/02\/imagen-seo-optimizada.png\")
<\/p>\nAunque el nombre se muestre diferente, es la misma imagen, lo \u00fanico que al guardar la guard\u00e9 con un nombre distinto. <\/em><\/p>\n
El tiempo de descarga de la foto se reduce bastante como se puede ver, pasando de 1.44 segundos a 165.5 milisegundos.<\/p>\n
Aspectos a tener en cuenta en la optimizaci\u00f3n de im\u00e1genes web<\/h2>\n
Una vez sabemos para qu\u00e9 sirve y en qu\u00e9 nos beneficia la optimizaci\u00f3n de las im\u00e1genes, toca explicar lo necesario para aprender a realizar todo esto.<\/p>\n
Antes de ello, haremos un breve repaso a las extensiones de im\u00e1genes m\u00e1s usadas y los nuevos formatos recomendados por Google.<\/p>\n
\u27a1\ufe0f Formatos de imagen web existentes<\/h3>\n
- \n
- PNG<\/strong>: los archivos .png suelen dar m\u00e1s calidad de imagen pero suelen pesar mucho m\u00e1s de normal. Si la paleta de colores es peque\u00f1a, pesa menos que las im\u00e1genes en JPG. Si tu imagen necesita transparencia, deber\u00e1s usar este formato.<\/li>\n
- JPG<\/strong>: suele utilizarse para archivos con una amplia paleta de colores, con el objetivo de tener una buena relaci\u00f3n de calidad y peso de las im\u00e1genes.<\/li>\n
- GIF<\/strong>: se utiliza normalmente para fotos animadas.<\/li>\n
- SVG<\/strong>: los svg son im\u00e1genes vectoriales que suelen usarse para logos, iconos o im\u00e1genes sencillas. Son indexables, escalables a diferentes resoluciones y su peso suele ser menor que los archivos .jpg y .png<\/li>\n
- JPEG\u00a02000<\/strong>: extensi\u00f3n de imagen de nueva generaci\u00f3n no soportado por todos los navegadores. Se lanz\u00f3 con el objetivo de reemplazar el est\u00e1ndar original .jpeg<\/li>\n
- JPEG\u00a0XR<\/strong>:\u00a0extensi\u00f3n de imagen de nueva generaci\u00f3n no soportado por todos los navegadores. Puede ofrecer la misma calidad que las im\u00e1genes .jpeg llegando a reducir su peso hasta un 50%.<\/li>\n
- WebP<\/strong>:\u00a0extensi\u00f3n de imagen de nueva generaci\u00f3n no soportado por todos los navegadores. Es el competidor directo de las im\u00e1genes jpeg y de las extensiones de nueva generaci\u00f3n, es el que ofrece una mejor respuesta en cuanto a calidad y peso de la imagen.<\/li>\n<\/ul>\n
Como recomendaci\u00f3n sobre qu\u00e9 formato trabajar te dir\u00eda que dependiendo de tus necesidades. Por lo general jpg<\/strong> y png<\/strong> son los m\u00e1s usados y si no quieres muchos quebraderos de cabeza, es mejor usar estos dos.<\/p>\n
Pero si quieres empezar a darle ca\u00f1a al tema de carga web y mejorar la puntuaci\u00f3n de Pagespeed, empezar\u00eda a usar WebP<\/strong> (que yo ya estoy empezando a testear en algunos proyectos), siendo consecuentes que os puede dar problemas en algunos navegadores y cms.<\/p>\n
\u27a1\ufe0f Optimizaci\u00f3n de tama\u00f1o<\/h3>\n
La optimizaci\u00f3n de tama\u00f1o consiste en que el tama\u00f1o de la imagen de ancho y largo, sea igual al que se descarga la web.<\/p>\n
Si el tama\u00f1o es m\u00e1s grande o peque\u00f1o, se produce lo que llamamos una redimensi\u00f3n de la imagen al tama\u00f1o indicado mediante programaci\u00f3n, lo que lleva a realizar un trabajo extra cuando se sirve nuestra web al navegador del usuario.<\/p>\n
Para ver esto m\u00e1s claro, solo debemos ir a una imagen de nuestra p\u00e1gina web, por ejemplo, si nos vamos a una p\u00e1gina de nuestra web con el navegador chrome, y con el rat\u00f3n encima de una imagen, pulsamos el bot\u00f3n derecho, se nos desplegar\u00e1 un men\u00fa<\/strong>, nos vamos a\u00a0inspeccionar<\/strong>. Se nos abrira una pesta\u00f1a con el c\u00f3digo de la web en html.<\/p>\n
La etiqueta de la imagen deber\u00eda aparecer seleccionada, si pasamos el rat\u00f3n por encima de ella, veremos el tama\u00f1o real de la imagen y el tama\u00f1o en el que se muestra. Si son distintos, es que se puede optimizar la imagen.<\/p>\n
![\"publisuites](\"https:\/\/www.publisuites.com\/blog\/wp-content\/uploads\/2019\/03\/publisuites-footer-redimension-1024x417.jpg\")
<\/p>\nConforme menos procesos se tengan que realizar, m\u00e1s r\u00e1pidamente se mostrar\u00e1 nuestra p\u00e1gina completamente.<\/p>\n
\u27a1\ufe0f Optimizaci\u00f3n de peso<\/h3>\n
La optimizaci\u00f3n de peso consiste en reducir el peso de las fotos para acelerar los tiempos de carga.<\/p>\n
Por lo general, siempre se recomienda que una imagen est\u00e9 por debajo de los 100kb, y cuanto menos sea el peso, mejor.<\/p>\n
Para lograrlo, podemos reducir el tama\u00f1o, bajar la calidad, usar los nuevos formatos de imagen o reducir la escala de colores. Al final hay que encontrar un equilibrio entre calidad y peso<\/strong>, pero muchas veces, puede ser complicado, sobre todo para aquellas webs que utilizan im\u00e1genes grandes o sliders<\/em>.<\/p>\nOptimizaci\u00f3n de im\u00e1genes para SEO: formatos, herramientas y plugins para rankear mejor. <\/a><\/span>Compartir en X<\/a><\/span>\n
\ud83d\udee0 Herramientas para la optimizaci\u00f3n de fotos<\/h2>\n
Existen diversas herramientas para optimizar las creatividad de una p\u00e1gina web. Tenemos tanto las aplicaciones de escritorio como herramientas online que pueden ayudarnos a ello.<\/p>\n
Herramientas online para optimizar im\u00e1genes<\/h3>\n
- \n
- Compressor.io<\/strong><\/a>: esta es la herramienta que normalmente uso cuando creo un art\u00edculo y publico las im\u00e1genes. Mantiene la calidad de las im\u00e1genes y reduce bastante su peso.<\/li>\n
- Squoosh.app<\/a><\/strong>: un compressor de im\u00e1genes lanzado oficialmente por Google. Ofrece algunas opciones para reducir la calidad y paleta, adem\u00e1s de mostrarte cuanto se reduce el peso de la imagen, adem\u00e1s de que te permite descargar la imagen en WebP, formato que no todos los compresores aceptan.
\n![\"squoosh\"](\"https:\/\/www.publisuites.com\/blog\/wp-content\/uploads\/2019\/03\/squoosh.jpg\")
<\/li>\n- Imagecompressor.com<\/strong><\/a>: otro compresor de im\u00e1genes, con la ventaja de que te permite subir m\u00faltiples archivos al mismo tiempo. Tiene un l\u00edmite de 20 im\u00e1genes al mismo tiempo, pero de normal, suele ser m\u00e1s que suficiente.<\/li>\n<\/ul>\n
![\"Optimizilla\"](\"https:\/\/imagecompressor.com\/images\/imagecompressor\/logo.svg\" "\\"Optimizilla\\"")
<\/p>\n- \n
- Imageresize.org<\/strong><\/a>: este compresor de fotos, te permite subir la imagen o directamente, insertar la url, por lo que no es necesario que la descargues y la subas de nuevo para comprimirla. Una ventaja si quieres optimizar de forma r\u00e1pida alg\u00fan art\u00edculo.<\/li>\n<\/ul>\n
![\"Imageresize](\"https:\/\/www.publisuites.com\/blog\/wp-content\/uploads\/2019\/03\/imageresize.png\")
<\/p>\nHerramientas de escritorio<\/h3>\n
Las herramientas online suelen estar bien para realizar tareas r\u00e1pidas o rematar alguna imagen y asegurarnos que est\u00e1n comprimidas, pero si disponemos de herramientas de escritorio, podemos asegurarnos de que salen comprimidas y con una calidad de imagen y peso razonable. Vamos a ver algunas de ellas:<\/p>\n
- \n
- Photoshop<\/strong>: la herramienta de dise\u00f1o por excelencia de Adobe. Una potente herramienta de dise\u00f1o que nos permitir\u00e1 guardar las im\u00e1genes en varios formatos y llevar al m\u00e1ximo, la relaci\u00f3n de calidad y peso, aunque es necesario conocer c\u00f3mo usar la herramienta.<\/li>\n
- Gimp<\/strong>: la alternativa gratuita de Photoshop. Nos es tan potente como la de Adobe pero es lo suficientemente potente como para sacarnos de m\u00e1s de un apuro. Es necesario tambi\u00e9n conocer como funciona para poder sacarle el mayor partido posible.<\/li>\n
- File Optimizer<\/a><\/strong>: esta herramienta la acabo de descubrir mientras realizaba el art\u00edculo y me parece brutal. Comprime todo tipo de archivos, no solo im\u00e1genes y de forma masiva (incluso archivos de audio, v\u00eddeo y pdf).<\/li>\n<\/ul>\n
\u2699\ufe0f Plugin para optimizar im\u00e1genes en WordPress<\/h2>\n
WordPress es uno de los cms m\u00e1s usados del momento, y algunas de estas tareas, pueden automatizarse con plugins, adem\u00e1s de ofrecer otras interesantes ventajas.<\/p>\n
Optimizaci\u00f3n de peso y tama\u00f1o de im\u00e1genes<\/h3>\n
Optimizar de forma autom\u00e1tica las fotos con plugins en WordPress puede interesarnos bien por si se nos pasa optimizar alguna imagen, por ahorrar tiempo en nuestro m\u00e9todo de trabajo o porque ya tenemos la web creada con cientos de miles de im\u00e1genes y puede resultar una locura optimizar todas las fotograf\u00edas y subirlas de nuevo al servidor.<\/p>\n
- \n
- Optimizador.io<\/a><\/strong>: este plugin gratuito de Webempresa y te ayudar\u00e1 a optimizar tus fotograf\u00edas y por tanto a mejorar el rendimiento de tu WordPress.<\/li>\n
- WP Super Cache<\/strong><\/a>: entre sus m\u00faltiples funcionalidades de optimizaci\u00f3n, la opci\u00f3n de pago te permite optimizar las im\u00e1genes mediante cr\u00e9ditos.<\/li>\n
- Swift<\/strong><\/a>: otro plugin de optimizaci\u00f3n de WPO para WordPress. La opci\u00f3n de pago te permite optimizar todas las im\u00e1genes de la web de forma autom\u00e1tica sin l\u00edmite.<\/li>\n
- Smush<\/strong><\/a>: un plugin orientado espec\u00edficamente a la optimizaci\u00f3n de las im\u00e1genes.<\/li>\n<\/ul>\n
Optimizaci\u00f3n de carga as\u00edncrona<\/h3>\n
La optimizaci\u00f3n de carga as\u00edncrona de las im\u00e1genes permite cargar las fotos solo cuando se muestran por pantalla al usuario, es decir, si tenemos una imagen en el footer<\/em>, esta no se mostrar\u00e1 hasta que el usuario llegue al footer<\/em>.<\/p>\n
Es especialmente \u00fatil en tiendas online con largas listas de productos, donde se pretende mejorar mucho la experiencia del usuario para que este compre.<\/p>\n
Los plugins mencionados anteriormente, Swift<\/strong> y WP Super Cache<\/strong>, permiten esto, aunque tambi\u00e9n puede usarse Lazy Load<\/strong> para ello, que es m\u00e1s conocido.<\/p>\n
C\u00f3mo posicionar tus im\u00e1genes en Google<\/h2>\n
Para complementar todo lo mencionado anteriormente, te dejamos un episodio de nuestro podcast donde profundizamos m\u00e1s en otros factores que influyen a la hora de trabajar el SEO en im\u00e1genes y conseguir tr\u00e1fico org\u00e1nico gracias al contenido visual.<\/p>\n
- WP Super Cache<\/strong><\/a>: entre sus m\u00faltiples funcionalidades de optimizaci\u00f3n, la opci\u00f3n de pago te permite optimizar las im\u00e1genes mediante cr\u00e9ditos.<\/li>\n
- Gimp<\/strong>: la alternativa gratuita de Photoshop. Nos es tan potente como la de Adobe pero es lo suficientemente potente como para sacarnos de m\u00e1s de un apuro. Es necesario tambi\u00e9n conocer como funciona para poder sacarle el mayor partido posible.<\/li>\n
- Photoshop<\/strong>: la herramienta de dise\u00f1o por excelencia de Adobe. Una potente herramienta de dise\u00f1o que nos permitir\u00e1 guardar las im\u00e1genes en varios formatos y llevar al m\u00e1ximo, la relaci\u00f3n de calidad y peso, aunque es necesario conocer c\u00f3mo usar la herramienta.<\/li>\n
- Squoosh.app<\/a><\/strong>: un compressor de im\u00e1genes lanzado oficialmente por Google. Ofrece algunas opciones para reducir la calidad y paleta, adem\u00e1s de mostrarte cuanto se reduce el peso de la imagen, adem\u00e1s de que te permite descargar la imagen en WebP, formato que no todos los compresores aceptan.
- JPG<\/strong>: suele utilizarse para archivos con una amplia paleta de colores, con el objetivo de tener una buena relaci\u00f3n de calidad y peso de las im\u00e1genes.<\/li>\n
- el tama\u00f1o<\/strong> de la imagen<\/li>\n<\/ul>\n