Cómo optimizar las imágenes de tu web para ganar velocidad
Si tienes una web seguro que te has preguntado más de una vez… ¿Cómo puedo hacer que mi página cargue más rápido? Esta es una pregunta bastante amplia ya que pueden influir un montón de factores pero uno de los más críticos es la optimización de las imágenes que se uses. No consiste en reducir su cantidad ya que mejoran estéticamente la web y estimulan al lector, consiste en reducir el espacio que ocupan.
Índice de contenido
¿Por qué son importantes las imágenes en tu web?
Una imagen vale más que mil palabras
Seguro que conoces esta frase, y en el mundo web no podría ser más cierta. Las imágenes ayudan a transmitir el mensaje, aumentan la confianza… aunque puedan llegar a aumentar el tiempo de carga de tu web si no tenemos cuidado.
Para entender como una imagen llega a ocupar cierto tamaño tenemos que conocer 4 conceptos básicos:
El formato
El formato, de forma rápida y sin entrar en tecnicismos, es la forma en la que una imagen se procesa y se almacena en nuestro ordenador. La forma más fácil de diferenciarlas es mediante extensión que tiene el archivo de la imagen.
Hay infinidad de formatos (cada empresa digital crea el suyo propio para intentar coger su parte del pastel, ser popular… ¡y ganar dinero en el proceso!)y cada uno tiene unas características muy concretas (compresión, capas, colores, pérdidas…) que los hacen perfectos para uno u otro uso. Por esto, saber que formato elegir es crucial para conseguir la mejor calidad en el menor espacio posible.
Dentro de todas estas posibilidades los formatos más estandarizados son los famosos JPG, PNG y GIF, y como hemos dicho, cada uno se ha creado pensando en un uso óptimo para una situación concreta:
JPG
Aparte de ser el más famoso de todos los formatos es el mejor en cuanto a optimización de espacio, consigue comprimir perdiendo solo los colores y variaciones que el ser humano no es capaz de detectar. De esta forma conseguiremos imágenes increíbles y mucho más ligeras. Este formato es el más indicado para imágenes de gran tamaño y con una gran cantidad de colores (fotos, paisajes, sliders, cabeceras…).
PNG
El PNG es el quarterback de los iconos y las ilustraciones. Al contar con menos colores (hasta 24 bits) y la predicción de píxeles consigue comprimir más el archivo sin comprometer a la calidad. Además permite transparencias lo que lo hace ideal para iconos, logos…
GIF
El formato GIF es el mejor para esos casos en los que queramos subir una imagen animada (vídeo corto) y no nos importe no tener audio. Por ejemplo, una acción concreta en el ordenador a modo de tutorial o una simple imagen animada para facilitar la lectura.
Tamaño
El tamaño es el espacio superficial que ocupa una imagen en la pantalla, no es lo mismo una de 4000px de ancho que una de 800px. Es muy importante saber en que tamaño final al que queremos mostrar una imagen en nuestra web ya que Google premia que ésta se cargue y muestre a su tamaño real (y no que se cargue a un tamaño más grande, por ejemplo, 900×600 para luego mostrarse a un tamaño pequeño, por ejemplo, 300×200).
Para ello, si utilizamos WordPress, podemos crear formatos predefinidos. De esta forma, a la hora de subir nuestras imágenes a la biblioteca de medios, será el propio WordPress el encargado de crear copias de la imagen en los diferentes tamaños que vamos a necesitar en nuestra web y así poder elegir la que se mejor se adecue en cada caso.
Resolución
La resolución, en cambio, es la densidad de pixeles que hay por cada pulgada (PPP) de la imagen.
En el caso de querer usar una foto para imprimirla, lo más habitual es hacerlo a 300ppp (300 puntos de información de color en cada pulgada de foto), pero para una web que se muestra en una pantalla digital 72ppp es más que suficiente (la pantalla no será capaz de mostrar más información y es espacio que perdemos).
Optimizando imágenes para la web
¿Para qué nos sirve todo esto? Para comprender que factores afectan al tamaño y a la calidad con la que se muestra una imagen en nuestra web.
Ahora veremos tres métodos para que compruebes lo sencillo que es optimizar una imagen y evitar que se «pixele» o que ocupe tanto que consuma todos los datos de su tarifa a nuestros usuarios móviles.
Optimización con Photoshop
Lo primero que debemos hacer es pasar nuestras imágenes por Photoshop (O programas similares como Gimp) y exportarlas para web:
Esto nos permite pasar la imagen directamente a 72ppp y modificar parámetros como la calidad, el tamaño o el formato de la misma.
En este caso, para que veas lo que se puede llegar a comprimir sólo voy a reducir el tamaño a 2000px de ancho (que en todo caso sería más de lo que tiene una pantalla de PC habitual). Lo normal para una imagen que va a ir alojada en nuestra web a ancho completo son entre 900px y 1400px si queremos que ocupe todo el espacio de escritura y aún menos si va a ser una miniatura. Si queremos que sea nuestra imagen de portada lo ideal es darle 1920px de ancho, en este caso la tienes de destacada al inicio del post ocupando 263Kb (puedes comprobarlo aqui si quieres?).
Después de realizar esto debes utilizar un programa extra de optimización que haga una mejor gestión de los colores que el propio Photoshop. Para esto hay varias opciones, puedes usar programas locales, online o plugins que se instalan en tu WordPress.
Desde el escritorio
La primera de las opciones es el uso de un software o programa instalado en nuestro propio ordenador. Los más conocidos y reputados son FastStone Photo Resizer y Riot.
En el mismo ejemplo de antes, utilizando FastStone conseguimos reducir el tamaño un 41% más sin perder calidad.
Desde una herramienta Online
Otra opción también muy buena (si vas a realizar una optimización de pocas imágenes) es utilizar una herramienta online. La ventaja que aporta con respecto a un programa local es el mero hecho de que no está instalado en nuestro equipo por lo que siempre estará disponible y no ocupa espacio en nuestro disco pero los resultados son los mismos. Mis favoritos son TinyPng y Compressor.io.
Desde un plugin en WordPress.
La última de las posibilidades que vamos a mencionar en este post es instalar un plugin en nuestro WordPress, como ewww optimizer, para realizar la tarea.
WordPress por defecto ya hace una recompresión de las imágenes que subimos a nuestra galería (un 10% extra) pero ésta normalmente escapa a nuestro control y no suele ser relevante por lo que es recomendable seguir alguna de las opciones anteriores.
¿Cómo medir nuestro progreso?
Si quieres comprobar cuanto has mejorado tu web puedes utilizar la herramienta PageSpeed Insights de Google que te permite saber cual es tu velocidad de carga. Lo ideal es realizar un escaneo antes de comenzar ninguna optimización y, a cada paso, realizar uno nuevo para ver cuál es la diferencia, ¡te sorprenderá!
En este caso te muestro el test de nuestra web (no es bueno ni recomendable obsesionarse con estos números), si consigues que esté verde habrás realizado un gran trabajo.
Bonus: conseguir mejor posicionamiento gracias a nuestras imágenes
Sí, las imágenes posicionan más de lo que piensas. Es cierto que no tanto como el texto, pero es un porcentaje nada despreciable. Es mucho más fácil salir de los primeros es Google imágenes que en Google web por lo que es importante seguir ciertas reglas que nos ayudarán a mejorar en este aspecto:
- El nombre debe estar en minúsculas, sin acentos ni Ñ.
- Con guiones y nunca espacios.
- Especifico para cada foto.
- Debe contener palabras clave o sinónimos.
- No pueden faltar los atributos «Alt» y «Title» (que se escriben normal, con mayúsculas, acentos y ñs).
¡Esto es todo amigo! Espero que te este post te sirva para mejorar tu web, ¡Nos vemos la semana que viene! ?
