Post anterior
Tipos de URLs en una arquitectura webEn 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.
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.
Trucos rápidos y directos para optimizar tus imágenes
- Utiliza imágenes propias y trata de huir de bancos genéricos
- Cuida el formato (casi siempre lo básico es usar JPG y para transparencias PNG). Prueba con nuevos formatos como WEBP
- Comprime al máximo imágenes. Yo uso Squoosh.app para imágenes unitarias. Teniendo el código de esta tool puedes hacerte algo masivo para tu proyecto o usar la API de herramientas como Kraken.io para este fin. Puedes visitar la documentación directa de Google para optimizar imágenes.
- Puedes usar CDN
- Coloca las dimansiones en el HTML (“width” y “height”) y carga unas imágenes u otras en función del tamaño de la pantalla.
- Agrega el atributo “alt” a todas las imágenes y trata de que el nombre del archivo sea descriptivo.
- Cuida el texto que rodea la imagen para que sea semántico y la potencie complementándola.
- Agrega los datos estructurados de licencias de imágenes. El resto de datos estructurados como los de producto también son relevantes para las imágenes.
Y aquí tenéis las últimas “best practices” del blog de Google para desarrolladores.
If you’re a fan of images on your website, you might want to check out our updated image publishing guidelines!https://t.co/SUCRJBrE1S
— 🍌 John 🍌 (@JohnMu) May 8, 2018
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://modpagespeed.com/doc/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.
Factores de posicionamiento OnPicture
1. Nombra adecuadamente el fichero
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.
2. Minimiza la paleta de colores
Utiliza la paleta con el mínimo número de colores que tu imagen requiera (principalmente en PNG y GIF)
3. 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
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.
4. Calidad de la imagen
Este factor es fundamental desde hace años en SEO. Imágenes de calidad funcionan mejor en prácticamente todos los ámbitos, así como en plataformas como Google Discover, donde hay hasta parámetros de tamaño mínimo para garantizar que se ve perfectamente, etc. Cuida el tamaño, el contraste…
5. 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.
6. Utiliza el formato de imagen adecuado
Elige el formato de imagen adecuado en cada caso y cuida tu #WPO y tu #SEO
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.
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?
- Sí
- JPG
- Progresivo (compresión 10:1 con poca pérdida de calidad)
- Optimizado
- Lossless
- WebP (Beta, Chrome)
- JPG
- No
- ¿Tiene transparencia la imagen?
- Sí
- ¿Alpha? – PNG 24 > PNG 8
- ¿Parcial? – PNG 8
- No
- PNG 8
- Sí
- ¿Tiene transparencia la imagen?
- Sí
Generalmente, utilizo el modo progresivo para JPG y el modo entrelazado si es GIF o PNG.
Para despejar dudas:
- JPG para imágenes y fotografías de manera habitual.
- PNG para imágenes que tienen transparencias como pueden ser los logos o imágenes planas.
- GIF para imágenes que queremos que tengan animación.
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.
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 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.
Factores de posicionamiento OnPage
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:
1. Servidor
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
2. Atributo alt, title, longdesc y pie de foto
Acordaros de que tengan un alt que describa cada imagen. Rellenar el title de la imagen. Podemos buscar mayor interpretación con el atributo longdesc, una descripción más larga aún de la imagen. En HTML5 podemos colocar las imágenes con su pie de foto y metadatos para darle mayor información a Google sobre esa imagen. <figure itemscope itemtype=“http://schema.org/
3. Otras optimizaciones
-
- Ajusta las imágenes a los bordes: evitando tener espacios en blanco bordeándolas.
- Texto alrededor de la imagen: es importante que semánticamente el texto de antes y después de la imagen tenga relación directa con la imagen, e incluso si aparece en ese contenido las palabras del alt y del nombre del fichero, mejor.
- Colocar las imágenes en un mismo lugar: es recomendable colocar las imágenes en el menor número de directorios posible, de forma que el acceso a las mismas sea lo más simple posible. Realmente, lo que buscamos con esto es facilitar el acceso a los bots a la información dentro de nuestra arquitectura de carpetas en el servidor.
- 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.
- 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.
- 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.
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.
Factores de posicionamiento OffPage
No todo acaba en la propia imagen o en el HTML de la página.
1. Enlaces internos
Las URL mejor enlazadas internamente son, a su vez, las que más fácilmente encuentran los bots de los buscadores. Por tanto, esta práctica facilita la adquisición de relevancia para las imágenes de esas URL.
2. Enlazado externo a la URL donde está la imagen
Las imágenes que se encuentran en URL relevantes del sitio web adquieren, por ende, mayor relevancia en el buscador.
3. Uso repetido a lo largo del dominio
Si la imagen se utiliza de forma repetida en diferentes URL del dominio, podemos decir que es una imagen relevante y, por tanto, adquirirá mayores posibilidades de posicionamiento.
¿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 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.
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.
Optimización básica de imágenes para WordPress
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.
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:
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
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
- Ejemplo
Herramientas para generar CSS Sprites
https://www.es.spritegen.website-performance.org/
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
Herramientas para generar gradientes
Existen muchas herramientas que podrán ayudarte a simular el efecto de degradado de una imagen, como estas:
- http://www.cssmatic.com/es/gradient-generator
- https://www.colorzilla.com/gradient-editor/
- https://css3gen.com/wp-content/cache/all/gradient-generator//index.html
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:
- 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.
- 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 WordPress: https://wordpress.org/plugins/simple-lightbox/
¿Conoces la mejor forma de cargar imágenes enormes en tus páginas?
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.
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:
-
- https://aws.amazon.com/es/cloudfront//
- https://www.maxcdn.com/
- http://www.edgecast.com/
- http://www.vozidea.com/cloudflare-servicio-cdn-gratuito-y-proteccion-ddos (tiene una versión gratuita y una de pago)
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?
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.
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 ^(.*)$ https://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
Existen un montón de herramientas tanto gratis como de pago para reducir el peso de tus imágenes.
- Web Resizer: http://webresizer.com/resizer/ , permite realizar online recortes, bordes y algunos pequeños cambios en nuestras imágenes.
- Compress PNG: http://compresspng.com/, especializado en la optimización de PNG online.
- CompressJPEG: http://compressjpeg.com/, especializada en optimizar imágenes JPEG.
- CompressNow: https://compressnow.com/sp/, nos ayuda a reducir el peso de las imágenes regulando el nivel de compresión de una manera muy sencilla.
- PunyPNG: http://www.punypng.com/, nos permitirá reducir el tamaño de PNG sin pérdida de calidad.
- Media 4x: http://optimizilla.com/, nos permite comprimir archivos JPEG, PNG, PDF, CSS y JS. Tiene un apartado interesante en el cual podemos introducir una URL yla testea indicándonos posibles puntos a corregir.
- Compressor.io: https://compressor.io/, un descubrimiento bastante reciente de herramienta que permite trabajar con 4 tipos de archivo: JPEG, PNG, GIF, SVG. Trabaja con compresión sin pérdida o con pérdida, lo que prefieras, y posteriormente te permite guardarlas automáticamente en tu equipo, en tu Dropbox o tu Google Drive.
- Kraken: https://kraken.io/web-interface, muy parecido a la herramienta anterior
- TinyPNG: https://tinypng.com
- JPEGmini: http://www.jpegmini.com/
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
También muchas de ellas son de escritorio, donde mis preferidas son:
- RIOT: http://luci.criosweb.ro/riot/
- CAESIUM: http://www.fosshub.com/Caesium-Image-Compressor.html
- GIF Optimizer Free: http://leapic.com/free-gif-optimizer.htm, para ayudarnos en la compresión de imágenes GIF
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?
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.