TruquiTrucos Dev – Cómo crear imágenes para nuestra web del tamaño correcto

La velocidad de carga de nuestra web es un factor clave a la hora de posicionar bien en los buscadores. Ahorrar unas décimas de segundo en la carga de una web puede ser la diferencia entre estar en la primera página de Google o en el olvido. Y aunque no hay que obsesionarse en demasía con el tema, es importante cubrir unos mínimos.

Como puedes imaginar, la velocidad a la que se carga la página está estrechamente relacionada con el peso de la misma. Cuantos más megas pese la web, más tardará en cargar. Y la tendencia de los últimos años es que las webs pesen cada vez más, y más, y más. Hemos pasado de unos 700kb en 2010 a más de 2,2Mb en el 2016, triplicando el tamaño.

Obviamente, este aumento de peso en las webs no ha sido a cambio de nada. Hoy en día tenemos webs mucho más interactivas (gracias a JavaScript), visualmente más atractivas (gracias al CSS) y con recursos audiovisuales mucho más llamativos.

Como en todo proceso de optimización, lo más importante es aplicar el principio de Pareto, o regla del 80-20, para determinar qué arreglar primero. Es decir, lo primero será identificar qué 20% de los recursos de nuestra web son los que acaban pesando el 80% de nuestra web. Y sí, en general estos recursos suelen ser las imágenes.

Hoy te cuento cómo manipulamos las imágenes que subimos al blog para asegurar que sus dimensiones y peso son los adecuados para nuestra web. ¡Al bash-terminal!

Adaptando la imagen a nuestras necesidades

Veamos cómo conseguir las imágenes perfectas para nuestra web.

Los formatos de imagen

Lo primero que debes saber es que existen diferentes tipos de formatos de imagen, cada uno con sus características de compresión y calidad. No voy a extenderme mucho en este punto, porque existen un montón de artículos en la web que te explican esto ya. Básicamente, quédate con lo siguiente:

• JPG es uno de los formatos más usados y con mejores tasas de compresión, aunque dicha compresión se consigue a través de reducir la calidad de la imagen. Es ideal para fotografías donde no haya bordes o esquinas muy definidas.
• PNG es un formato que permite transparencia y tiene un algoritmo de compresión que no reduce la calidad de la imagen. En fotografías con muchos colores, su capacidad de compresión es inferior a JPG, pero para capturas de pantalla de, por ejemplo, el escritorio de WordPress, funciona de maravilla (siempre que en la captura no haya fotos, claro).
• GIF vuelve a estar muy de moda porque permite imágenes animadas. También permite crear imágenes estáticas con un elevado nivel de compresión, ya que usa una paleta de colores limitada.

Así pues, cuando decidas preparar una imagen para tu web, recuerda usar el formato que mejor se adapte a tus necesidades.

Dimensiones y peso de la imagen

Uno de los factores más importantes a la hora de determinar el peso de una imagen son sus dimensiones. Una imagen de 5.000×5.000px pesará mucho más que una de 1.000×1.000, ya que la primera será 25 veces mayor.

Antes de subir una imagen a tu web, piensa dónde la vas a usar. Si tu objetivo es usarla como imagen destacada, es probable que necesites una imagen mayor que si vas a usarla como miniatura en una entrada.

Sé lo que me dirás: «pero si WordPress ya genera miniaturas de las imágenes que subo; ¿para qué tengo que preocuparme yo?». Pues muy sencillo: si subes imágenes con unas dimensiones superiores a lo que necesitas, vas a estar ocupando más espacio en disco y te va a salir el hosting más caro. Piensa en tu bolsillo ?

Nelio A/B Testing

Pruebas A/B nativas en WordPress

Usa tu editor de páginas favorito en WordPress para crear variaciones y lanza pruebas A/B con solo un par de clics. No se necesita saber nada de programación para que funcione.

Más info

Script para manipular imágenes

Pues bien, ahora que ya tienes claro que manipular imágenes pasa por determinar su formato, sus medidas y su nivel de compresión, es hora de compartir contigo el script que uso para crear imágenes destacadas.

Recordemos primero las características de nuestro blog:

• En una entrada anterior, te comenté que en Nelio tenemos limitado el tamaño de las imágenes a 250kb.
• La mayoría de imágenes destacadas que usamos las sacamos de Unsplash, una web que tiene imágenes de una altísima calidad.
• Además, hemos implementado nuestro tema de tal forma que las imágenes destacadas que usa sean, como mucho, de 1.200x800px.

Teniendo en cuenta todo esto, creé el siguiente script:

El cual se usa de la siguiente forma:

$ sacfi image1.jpg image2.jpg

Es decir, llamamos al script con la imagen (o lista de imágenes) que queremos adaptar a nuestras necesidades. ¿Y qué hace el script? Pues por cada imagen que hemos especificado (línea 3), creamos una copia de seguridad de dicha imagen (líneas 7-11) y transformamos la imagen según nos interesa (línea 12). Veamos con más detalle esta transformación.

El script utiliza un software llamado ImageMagick que expone un comando llamado convert. Instalar este programa en Linux es tan fácil como esto:

$ apt install imagemagick

Con convert lo que hacemos básicamente es especificar el fichero de entrada y el fichero de salida. Por ejemplo, podemos convertir una imagen de PNG a JPG simplemente cambiando la extensión en la llamada:

convert image.png image.jpg

Pues bien, lo que hacemos en el script anterior es lo siguiente:

• La variable OUTFILE tiene el nombre del fichero de salida. Fíjate que será del tipo JPG, porque es lo que estoy especificando en la línea 8.
• Escalo la imagen para que mida exactamente 1200x800px. Esto lo consigo con el parámetro resize y el valor 1200x800^. El símbolo ^ al final del tamaño sirve para indicarle que la imagen resultante tiene que ser de 1200x800px exactamente, incluso si ello implica tener que recortar la imagen original.
• En caso de que la imagen tenga que recortarse, le indico al script que lo haga centrándola, de tal forma que quite lo mismo por la derecha y la izquierda (si hay que recortarla a lo ancho) o por arriba y abajo (si hay que hacerlo a lo alto). Esto lo hacemos con el parámetro gravity y el valor center.
• Finalmente, le digo que aplique el nivel de compresión que sea necesario para conseguir que la imagen no pese más de 250kb, con el parámetro define y el valor jpeg:extent=250kb.

¿Qué te parece? Con convert de ImageMagick, puedes escalar, recortar y comprimir las imágenes fácilmente para adaptarlas a tus necesidades.

Imagen destacada de Siora Photography en Unsplash.