Cómo Optimizar imágenes para SEO, Guía Completa

Cómo Optimizar imágenes para SEO, Guía Completa
5 (100%) 2 votos

En esta guía vamos a ver varias formas de optimizar imágenes para nuestra web, ya que actualmente es sumamente importante que las imágenes de nuestras páginas sean lo menos pesadas posible, de cara al tiempo de respuesta de nuestros sitios, mejorar la velocidad de carga de cada URL y cuidar la experiencia de usuario en los tiempos que corren para Google.

WPO Optimización

WPO medido en Chrome

Cuidar las imágenes adquiere también especial relevancia en Google Universal Search, donde el buscador ha dispuesto una sección en aproximadamente la 3-4 posición, donde colocará las imágenes relevantes para una búsqueda concreta. Es una posición provilegiada que no tenemos por qué desaprovechar.

WPO, Web Performance Optimization

Desde hace ya bastante tiempo Google publicó que un factor muy importante a la hora de decidir qué sitio es mejor para una búsqueda determinada y por consiguiente obtiene mejor ranking, era la velocidad de carga de esa página. Los usuarios adoran la inmediatez al servir los contenidos de una determinada URL.

Además, muchos estudios afirman que cada segundo más que tarde en cargar una web, puede suponer la pérdida de entre un 7 y un 11% de la conversión de nuestro proyecto. Este dato, extrapolado a euros, puede suponer muchísimo dinero.

Por otro lado, si hacemos campañas de Adwords, el Quality Score también se ve afectado en función de la velocidad de carga, por lo que muy probablemente si no tenemos nuestras landings optimizadas, pagaremos más en cada clic.

Por tanto, cuando hablamos de WPO nos referimos a todos aquellos factores relacionados con el aumento de la velocidad de descarga de una página web, y la sensación que tiene el usuario cuando se muestra en su navegador.

WPO para imágenes web

Centrándonos en la mejora de la velocidad de carga de las imágenes de nuestro sitio web, vamos a procurar comprimir el tamaño de nuestras imágenes utilizando formatos amigables para los diferentes navegadores del mercado.

Google, entre la documentación dedicada al módulo PageSpeed, dedica un interesante apartado a la optimización de imágenes que os recomiendo echar un vistazo tanto para Apache como para Nginx:

https://developers.google.com/speed/pagespeed/module/filter-image-optimize

Entre otras cosas vemos como indican un par de apartados dedicados a la conversión de GIFs a PNG, de PNG a JPEG y de JPEG al formato progresivo que más adelante comentaremos.

Compresión de imágenes sin pérdida o con pérdida

Cuando hablamos de optimización de imágenes veremos que existen muchas herramientas distintas en el mercado, y todas ellas podríamos segmentarlas en 2 grandes grupos según el tipo de compresión que realizan: con o sin pérdida de información.

Compresión con pérdida

Nos referimos de este modo al tipo de compresión que cuando se realiza ofrece como resultado la misma imagen pero que durante el proceso ha perdido algo de calidad. En ciertas ocasiones nos va a resultar muy útil, dado que será preferible perder un pelín de calidad que a veces es casi imperceptible, pero ganarle bytes a la imagen y por consiguiente consumir menos recursos a nivel de servidor y conseguir mayor velocidad de descarga.

Compresión sin pérdida

Este tipo de compresión es el que más me gusta de cara a proyectos en los que necesito una notable calidad de imagen. Conseguiremos comprimir sin pérdida de información y por tanto de calidad cualquier imagen que queramos.

Tipos y formatos imágenes y cuándo usarlos

Elige el formato de imagen adecuado en cada caso y cuida tu #WPO y tu #SEO - Compártelo       

Una de las decisiones rápidas que tendremos que tomar a la hora de incluir imágenes en las páginas de nuestra web es el formato más adecuado para el caso concreto.

formatos imagen web

Formatos que tendremos que escoger by @runical – @kschool

Como podemos ver en la imagen anterior, podríamos hacernos un esquema mental rápido simplemente respondiéndonos a pequeñas perguntas:

  • ¿Tienes muchos colores?
      • JPG
        • Progresivo (compresión 10:1 con poca pérdida de calidad)
        • Optimizado
        • Lossless
      • WebP (Beta, Chrome)
    • No
      • ¿Tiene transparencia la imagen?
          • ¿Alpha? – PNG 24 > PNG 8
          • ¿Parcial? – PNG 8
        • No
          • PNG 8

Generalmente, utilizo el modo progresivo para JPG y el modo entrelazado si es GIF o PNG.

Formato JPG Baseline vs Formato Progresivo

Seguro que muchas veces como usuarios navegando por Internet nos hemos encontrado cargas de imágenes de estos dos tipos. Por regla general, es más interesante para nosotros que la página se vea lo antes posible, aunque las imágenes que haya no estén focalizadas al 100%. Aquí radica la diferencia entre Baseline y Progressive.

JPG Baseline vs Progresivo

Como podemos ver en la imagen, las dos cargas consiguen el mismo resultados, pero por caminos distintos:

  • JPG Baseline: realiza la carga de la imagen por partes, mostrando a modo de “persiana” la imagen completa, siempre a la máxima calidad.
  • JPG Progresivo: realiza una especie de previsualización de la imagen sin la calidad óptima, y a medida que se produce la descarga de la misma va mejorando la calidad progresivamente hasta la descarga final con la mayor calidad posible. La sensación que tienen los usuarios es mejor, dado que no tienen huecos en blanco ni imágenes cortadas en ningún momento en pantalla.

En este artículo que he encontrado sobre las diferencias entre estos formatos de imagen podéis ampliar información.

El formato WebP

Este formato es relativamente nuevo desarrollado por Google, y aún no soportado por todos los navegadores del mercado. Soporta compresión tanto con pérdida como sin ella.

Nació para ser el principal competidor del estándar actual JPEG. Es capaz de optimizar imágenes consiguiendo reducir el tamaño de los ficheros con una calidad muy similar al JPEG.

Podéis ampliar información sobre WebP en la propia web de Google.

Composición alphaComposición alfa y transparencia

Se suele llamar composición alfa o canal alfa a lo que define la opacidad de un pixel en una imagen.

Si lo que queremos es mezclar distintas capas dentro una misma imagen, o fondos opacos.

Utilizando esta composición los objetos transparentes se pintarán después que los opacos en una composición, otorgando esa sensación a los ojos del usuario de profundidad.

¿En qué vamos a fijarnos para poder optimizar?

Trucos y técnicas avanzadas para optimizar las imágenes de tu web #wpo #seo - Compártelo       

Muchas veces me he enfrentado a tener que optimizar imágenes y por más que he jugado con las herramientas, llega un punto que ya no dan más de sí.

Sin embargo, si pensamos un poco en cómo optimizan los algoritmos internos que llevan todas estas herramientas, y sacamos los puntos comunes que pueden tener tras utilizarlas por separado, llegamos a la conclusión de que podemos llegar a profundizar mucho más en esa compresión si tratamos la imagen en puntos como estos:

  • Quizá lo primero sea cercionarnos de que contamos con un servidor decente y rápido (Ya que estamos recuerda que cuando el navegador intenta mostrar una imagen y no está – error 404 – hará un montón de comprobaciones que tirarán a la basura un montón de tiempo valiosísimo)
  • Ajustar las imágenes a los bordes evitando tener espacios en blanco bordeándolas.
  • Utilizar el formato adecuado en cada caso según los tipos de imágenes que he mostrado en este artículo.
  • Ajustar el tamaño de cada imagen al tamaño real que tendrá cuando lo mostremos en nuestra web. Si permitimos que el navegador tenga que redimensionar la imagen al mostrarla, tardará más tiempo.
  • Evita colocar eñes, tildes o caracteres especiales en los nombres de los ficheros. Hacerlos amigables te ahorrará más de un disgusto. En ocasiones incluso me ha pasado que al migrar una web de servidor, el antiguo servidor sí reconocía estos caracteres especiales y el nuevo no… errores 404 emergiendo a granel de debajo de las piedras… ¡a corregir!
  • Muchas de las imágenes contienen información que a los ojos de cualquier usuario es completamente innecesaria, como los datos de autoría, copyright o EXIF: equipo con la que se realizó la fotografía, modelo, apertura de la lente, método de detección, tamaño de la lente, versión del firmware, resolución, fecha, flash, PixelXDimension, PixelYDimension, etc.
  • Añade el tamaño final de cada imagen en el código HTML, por ejemplo: <img src=”http://www.miimagen.com/imagen.jpg” width=”88″ height=”150″ />. El navegador ahorrará tiempo en identificar estos datos si se los mostramos directamente nosotros.
  • Utiliza la paleta de colores con el mínimo número que tu imagen requiera (principalmente en PNG y GIF)
  • Recortar la parte relevante de una imagen mostrando solo lo que interesa, con lo que conseguimos reducir el tamaño probablemente de la misma, y por tanto su peso.
Foto optimizada recortando

Imagen optimizada recortando la parte relevante

  • La tendencia actual y cada vez más acogida por los navegadores actuales es la de utilizar imágenes progresivas en lugar de los jpg habituales. La descarga de estos elementos es notablemente más rápida.

Modo de color LabOptimización por desenfoque

En ficheros JPEG cuyo fondo no sea importante, podemos desenfocarlo reduciendo detalles que no son críticos de la imagen, aumentando la eficiencia de los algoritmos. Quizá en este apartado, por ejemplo, podamos jugar con el modo de color Lab de Photoshop, que nos permitirá maximizar el desenfoque para conseguir reducir el peso de la imagen al menor posible.

El modelo de color Lab está basado en cómo el ser humano es capaz de percibir el color. Cada valor numérico de este modelo describe un color que una persona es capaz de ver normalmente.

El modelo color Lab nos puede ayudar también a conseguir mejores imágenes en escala de grises, en vez de marcar directamente la opción típica de Photoshop que convierte cualquier imagen RGB en escala de grises.

¿Conoces la optimización de imágenes por desenfoque o la ponderada?  - Compártelo       

Optimización ponderada

También se suele llamar compresión por regiones. Consiste en aplicarle distintos grados de compresión a las distintas partes de una imagen. Por ejemplo, podríamos utilizar distintas máscaras alpha para aplicar diferentes grados de calidad con pérdidas, ajustes de difuminado a las distintas áreas de una misma imagen, etc.

Esta forma de reducir bytes de la imagen hemos que utilizarla con precaución, y es muy raras ocasiones merece la pena el esfuerzo empleado, ya que incluso una mala gestión del tramado de máscaras podría aumentar el tamaño del archivo.

Compresión de imágenes en .htaccess

La gran mayoría de los navegadores web más utilizados del mercado permiten cachear las imágenes de los sitios web, entre otros elementos.

Cuando hablamos de utilizar la caché nos referimos a realizar una copia física de la imagen en el ordenador del usuario. A esta imagen se le añade información en la cabecera con el TTL (Time To Live – fecha de expiración de la caché), de tal manera que cuando el navegador tenga que volver a solicitar esa misma imagen al visitar de nuevo el usuario la misma URL, no tenga que volver a descargársela del servidor, sino que directamente el navegador la abre de la ubicación interna del PC del usuario donde la primera vez la guardó.

Configura tu .htaccess para comprimir imágenes - Compártelo       

Mod Expires

Con esto conseguiremos realizar un menor número de peticiones al servidor, economizando el ancho de banda disponible y mejorando la experiencia de usuario dado que se sirven mucho más rápido.

Por ejemplo en un servidor Apache, colocaríamos estas líneas en el fichero .htaccess:

<ifmodule mod_expires.c>

SetOutputFilter DEFLATE
Header unset ETag
FileETag None

## max-age=1h
<FilesMatch “\.(flv|gif|jpg|jpeg|png|ico|svg)$”>
Header set Cache-Control “max-age=3600″
Header unset Last-Modified
</FilesMatch>

</ifmodule>

Max-age, Etags y Last-Modified

El valor “max-age” nos permitirá indicar en segundos el tiempo de expiración deseado en función de lo que estimemos oportuno que es útil según nuestro negocio. Además en este código hemos aprovechado para desactivar Etags, etiqueta que se suele asignar a cada archivo que sirve para poder comparar la caché del navegador frente a la del servidor, de forma que si coinciden el fichero no se descarga.

El problema radica en que la definición de este atributo puede variar según el servidor, por lo que la comprobación falla y se descarga de igual manera la imagen. Por tanto, suele ser recomendable directamente desactivarla.

Desactivar Last-Modified nos permite eliminar peticiones del tipo If-None-Match y If-Modified-Since, ahorrándonos respuestas 304 Not Modified. Nuestras imágenes quedarán guardadas en caché hasta que el Expires que le hemos indi cado nos diga que ya está disponible.

¿Cuál es el peso y el tamaño correcto para una imagen?

No existe un tamaño más adecuado que otro ni un peso ideal para colocar en un determinado apartado de la web. Lógicamente, estos datos son perfectos siempre que consigamos unos resultados correctos a nivel de usabilidad y correctos a nivel de velocidad de carga de la URL.

En mi caso, siempre que puedo optimizar un poco más una imagen, lo hago. Inicialmente la genero optimizando lo que puedo, y la próxima vez que revise veré la manera de mejorarlo. Y así de forma cíclica.

Optimización de imágenes en WordPress

Optimización básica de imágenes para WordPress - Compártelo       

WordPress… defensores y detractores a miles de este CMS que cada día coge más y más fuerza entre las plataformas elegidas al realizar cualquier estrategia digital que requiera de una página web.

En este apartado voy a hablar de plugins, pero que de igual manera incluyen ideas y técnicas aplicables a cualquier otro CMS o desarrollo a medida que se preste.

Wp Smush.it

Es un plugin que nos permite automatizar de alguna manera la compresión de imágenes de nuestro WordPress. Ayuda a mejorar el rendimiento en la optimización de imágenes sin pérdida. Cada vez que subamos una nueva imagen al sitio web, automáticamente:

  • Eliminará los metadatos sobrandtes de los archivos JPEG
  • Optimizará la compresión JPEG
  • Pasará los GIF a PNG indexados
  • Eliminará colores que generalmente ni usamos de esas imágenes

Simplemente veremos que al subir una imagen nuestro WordPress tarda un poco más en procesarla, debido a que está actuando este plugin.

Bulk Smush.it: esta opción nos permitirá pasarle el algoritmo a todas las imágenes que tengamos ya subidas a nuestro servidor de forma automática. Yo la utilizo principalmente en sitios donde instalo el plugin cuando ya ha estado en funcionamiento la web un tiempo sin él, para optimizar el resto de imágenes previas a su incorporación.

En alguna que otra ocasión el plugin se ha desactivado solo. Esto es debido a posibles errores de conexión con el servicio real Smush.it de Yahoo. Simplemente lo volvemos a activar y pasamos el Bulk de nuevo para optimizar las imágenes que durante este tiempo hayamos subido.

Lazy Load

Digamos que este es uno de los plugins que más me gustan. Como bien escuché una vez a Sergio Falcón @runical (de quien he aprendido muchísimas cosas de las que indico en este artículo) WPO no solo consiste en ser rápido, sino también parecerlo.

Este plugin sigue perfectamente esa filosofía al permitirnos cargar solamente las imágenes que el usuario ve en ese momento en pantalla, de forma que solamente cargará el resto una vez realice scroll en la misma, es decir, cuando el usuario las tenga en pantalla y siga viendo el resto de la página con la rueda del ratón.

Este plugin no es más que una adaptación para WordPress, pero no es más que un javascript que podemos implementar en cualquier desarrollo.

Existen más plugins para WordPress, aunque tampoco soy muy amigo de utilizar más que estos y alguno que veremos en los siguientes apartados. Existen otros como Hammy que te permiten crear imágenes de distintos tamaños, etc… y esto es algo que siempre puedo realizar a mano y conseguir resultados más óptimos.

CSS Sprites y las descargas de imágenes pequeñas

Muchas veces no pensamos que tener muchos iconos e imágenes pequeñitas en nuestras páginas pueden hacer que el rendimiento sea bastante pobre, y utilicemos más recursos de nuestro servidor de los necesarios.

Pensar que cada uno de esos elementos solicitarán una petición al servidor para descargarlos, por lo que tendremos muchísimas peticiones del todo innecesarias, ya que podemos resolverlos realizando una sola petición como veremos a continuación con CSS Sprites.

CSS Sprites

Como vemos en la imagen, Google almacena todos sus recursos gráficos pequeñitos en una sola imagen. Para mostrarlos en su web, solo tendrá que indicarle al navegador las coordenadas exactas de esa imagen dentro de la imagen grande. El servidor, por consiguiente, solo tendrá que hacer una petición al servidor para descargar la imagen grande, y mediante órdenes con coordenadas en la hoja de estilos, le indicaremos al navegador qué porción de esa imagen queremos que sea mostrada en cada caso.

Esta técnica viene heredada del mundo de los videojuegos, donde eran capaces de simular el movimiento de los elementos gracias a esta técnica, mirad:

Sprite supermario

Quizá pueda ocurrírsenos la feliz idea de utilizar esta técnica para pintar el fondo de nuestro sitio web además del resto de iconos. Sin embargo, si utilizamos esta técnica existe una limitación que nos impide utilizar la propiedad “repeat” de CSS, por lo que no podremos emplearla para los fondos web.

Puedes echar un vistazo a esta guía que proponen los chicos de w3schools.com para entender bien cómo se utilizan los Sprites.

Recomendaciones y herramientas para generar CSS Sprites - Compártelo       

Recomendaciones a la hora de generar tus Sprites CSS

  • Generalmente, si colocamos los elementos del Sprite en horizontal, el archivo resultante es más pequeño que si los introducimos verticalmente.
  • Si tratamos de colocar en el Sprite imágenes con colores similares, podríamos conseguir utilizar una paleta de colores más pequeña, de forma que con guardarlo en un formato PNG8 sería suficiente, ahorrando en tamaño.
  • Coloca las imágenes de tu Sprite lo más cerca una de otra. El tamaño del archivo no variará, dado que el color blanco queda igualmente comprimido. Din embargo, necesitaremos menos recursos de memoria a la hora de descomprimir la imagen en un mapa de pixels.
    • Ejemplo
      • Si tenemos una imagen de 10×10 son 100 píxeles
      • Si tenemos una imagen de 100×100 serán 10000 píxeles

Herramientas para generar CSS Sprites

 

 

El favicon

Este elemento no puede estar incluido en ningún fichero de Sprite. Es una imagen que debemos colocar en la raíz de nuestro servidor. Además, no debemos olvidarnos de incluirla, ya que aunque no la tengamos el navegador siempre nos la va a pedir y si no la tenemos generará un 404 Not Found.

Suelo intentar que este elemento siempre tenga menos de 1kb, tal como indica Yahoo con sus recomendaciones en YSlow. Además, lo podemos incluir al establecer el Expires Header, colocándole por ejemplo unos meses de duración, o si no tienes pensado cambiarlo incluso 1 año.

Optimización de imágenes con gradientes

En algunos sitios web me he encontrado con casos en los que ciertos botones, barras de menú, pies de página, cabeceras, etc… utilizan una imagen para indicar el fondo que quieren emplear, algo similar a esto:

background: url(“http://www.miweb.com/wp-content/uploads/fondocongradiente_bg.png”) repeat-x;

Como ves, estamos indicando al navegador que cargue un archivo con una imagen, estamos haciendo una petición del todo innecesaria. Gracias a la potencia de CSS3, podemos prescindir de estas imágenes y generar en los mismos estilos del sitio web ese efecto degradado a través de sencillos códigos.

background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */

Has de incluir todo el código que te generan las herramientas, dado que cada línea está preparada para activarse en un navegador diferente, de forma que siempre consigamos el resultado óptimo sea el navegador que sea.

Optimiza los degradados de tu web #wpo - Compártelo       

Herramientas para generar gradientes

Existen muchas herramientas que podrán ayudarte a simular el efecto de degradado de una imagen, como estas:

 

 

Cargar imágenes grandes y Lightbox

Muchas veces, por ejemplo en fichas de producto de tiendas online con e-commerce, tenemos que mostrar imágenes con mucho detalle, y para ello es necesario cargar grandes archivos con imágenes enormes a gran resolución. Tenemos dos formas de hacerlo:

  1. Cargar la imagen directamente en la ficha de producto, lo que hará que al cargar esa URL de producto la imagen se descargue y por consiguiente tengamos un retardo importante en la carga de la página.
  2. Cargar imágenes en miniatura que enlacen a la imagen grande, por ejemplo con efectos tan famosos como el Lightbox, que permite que el usuario al hacer clic en la imagen, esta aparezca en una ventana emergente con el fondo oscurecido. Os sonará, ¿verdad?. De esta forma además, mantenemos al usuario en la misma pantalla, sin despistarlo.

Plugin Lightbox para WordPresshttps://wordpress.org/plugins/simple-lightbox/

¿Conoces la mejor forma de cargar imágenes enormes en tus páginas? - Compártelo       

CDN´s, subdominios o dominios externos

Para servir las imágenes de nuestro sitio web, podemos hacerlo directamente desde nuestro hosting o utilizar otras técnicas avanzadas que nos permitirán aumentar y mejorar el rendimiento de esta distribución.

CDN´s

Por ejemplo, podemos utilizar la potencia de otros servidores mucho mejores que el nuestro para que sean ellos quienes descarguen nuestras imágenes en nuestro sitio web.

Esto se consigue a través de lo que se conoce como CDN´s (Content Delivery Network), un sistema distribuido de servidores desplegados por todo Internet. Nos permitirán servir nuestros contenidos, en este caso nuestras imágenes, con alta disponibilidad y alto rendimiento a los usuarios finales.

CDN Imágenes web

Uno de los CDN´s más famosos es el de Amazon, aunque también hay otros muchos en el mercado como CloudFlare que están creciendo:

Algunos de estos servicios permiten realizar una prueba durante un tiempo, por lo que os animo a probarlos y medir los resultados en rendimiento que os ofrece. Si la mejora es notable, quizá merezca la pena invertir en estos sistemas. Dependerá de tu sitio web el que sea interesante o no, tan pronto puedes tener muchas imágenes como solamente texto con páginas estáticas que no necesitaría un sistema CDN como este.

¿CDN´s o subdominios para cargar mis imágenes? - Compártelo       

Subdominios

A veces nos es demasiado costoso un CDN para la mejora que realmente obtenemos al utilizarlos. En estos casos, quizá pueda interesarnos probar a montarnos nosotros mismos una especie de CDN utilizando subdominios en nuestro host. Esta técnica puede servirnos para descargar simultáneamente imágenes, CSS o JS.

Parallelice

Por regla general, los navegadores actuales pueden resolver hasta 60 peticiones simultáneamente. Sin embargo, los host de las webs resuelven alrededor de 6 peticiones a la vez únicamente. Por tanto, estamos desaprovechando la oportunidad de conseguir que todas o casi todas las imágenes de nuestros sitios webs se muestren de una sola vez en los navegadores.

Para centrarnos un poco en la descarga lo más rápido posible de todas esas imágenes que ya previamente hemos comprimido y optimizado, podemos utilizar un plugin en WordPress que nos permite aumentar el número de descargas paralelas de elementos utilizando una técnica de subdominios, aprovechando el cacheo de recursos en el mismo host.

Simplemente tendremos que indicarle a este plugin desde que subdominios estamos interesados que se descarguen las imágenes de nuestro sitio web, tal y como muestro en la imagen.

Parallelize

Descarga de imágenes desde subdominios

Los botones “Update Options” y “Update Posts” nos permitirán actualizar de forma automática todas las URLs de las imágenes que hata ahora hemos utilizado en anteriores artículos.

Debemos de asegurarnos de que los subdominios que utilizamos apuntan directamente al dominio principal, y no solo eso, sino que también resuelven el mismo contenido.

Cuidado con esta configuración ya que si la realizamos mal podríamos ser culpables de la generación de un montón de contenido duplicado por un mal bloqueo o una redirección incorrecta, como se explica en este post de la agencia HumanLevel, donde además se especifica un código que podemos introducir directamente en nuestro .htaccess pero cambiando simplemente www.albertofdez.com por vuestro dominio:

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{HTTP_HOST} !^www\.albertofdez\.com$ [NC]
RewriteRule ^(.*)$ http://www.albertofdez.com/$1 [R=301,L]

Existen varios plugin similares que nos permiten configurar esta técnica, como son: Domain Sharding

Herramientas para Optimizar imágenes para una web

Herramientas para optimizar imágenes para tu web - Compártelo       

Existen un montón de herramientas tanto gratis como de pago para reducir el peso de tus imágenes.

Web Resizer: http://www.webresizer.com/resizer/ , permite realizar online recortes, bordes y algunos pequeños cambios en nuestras imágenes.

 

 

Luego hay otras herramientas, por ejemplo las que te permiten medir el rendimiento de tu web, que ya te ofrecen vesiones optimizadas de todas aquellas imágenes que detectan que se pueden optimizar. Entre ellas:

https://developers.google.com/speed/pagespeed/insights_extensions

http://gtmetrix.com

También muchas de ellas son de escritorio, donde mis preferidas son:

 

 

Elige la herramienta que más te guste

En mi caso particular suelo jugar con todas las uqe pueda en funciòn de los recursos de tiempo de los que disponga. Inicialmente por comodidad comienzo diseñando, cortando…  la imagen en Photoshop, la guardo para web en el formato que corresponda y con la paleta más pequeña posible (incluso a veces en color Lab), y le paso RIOT o Caesium. Esto, lo básico, aunque luego pasando otras herramientas podría llegar a reducir hasta un 20% más.

En optimizaciones profundas, no escatimo recursos y voy a por todas, hasta que no puedo bajar ni un mísero bit. Además, cada vez los sectores se fortalecen más y hemos de hilar mucho más fino.

Más cositas interesantes

¿Cómo afecta la velocidad de carga de una web al SEO?

http://www.humanlevel.com/articulos/desarrollo-web/como-afecta-la-velocidad-de-carga-de-tu-pagina-web-al-seo.html

Una curiosidad que me he encontrado para poner imágenes en distintas pantallas de móvil, ordenador y tablets… https://placeit.net/

 

Y ahora, ¿conoces alguna herramienta o alguna técnica simple o avanzada que no hayamos comentado aquí?

Te animo a compartirla y la añadimos a esta guía.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Post relacionados con: Cómo Optimizar imágenes para SEO, Guía Completa

Solicita presupuesto



Mensaje

Acepto condiciones y términos legales

Posts relacionados con:close