Aligerar el peso en KB de las imágenes contenidas en tu página web no sólo va a incrementar la velocidad de carga de éstas, sino que te hará ahorrar ancho de banda. Esto último es especialmente importante ya que en la mayoría de sitios web las imágenes representan la mayor parte del ancho de banda consumido.Elegir el formato y compresión de imagen adecuados
Si en muchas ocasiones las imágenes de un sitio web tienen un tamaño desproporcionado o incluso muestran un aspecto pobre (pixelación, falta de color…), es debido al desconocimiento de los diferentes formatos de imagen y la conveniencia de usar uno en concreto dependiendo del caso.
El formato JPEG («Joint Photographic Experts Group»), con extensiones .jpeg o .jpg, posee un algoritmo de compresión que lo hace ideal para la representación de fotografías o similares (por ejemplo imágenes 3D realistas). Al exportar una imagen a este formato es posible establecer el grado de compresión. A mayor compresión, menor peso de la imagen, aunque también mayor perdida de calidad (pixelación). Encontrar el equilibrio justo entre peso y calidad es la clave para el correcto uso de este formato. La pérdida por compresión hace que este formato sea muy poco adecuado para la representación de texto, líneas o formas simples.
Reducir el peso de las imágenes de una página web según un experto en consultor seo:
Los formatos PNG («Portable Network Graphics») y GIF («Graphics Interchange Format») basan sin embargo su fortaleza en la identificación de patrones y formas, por lo que son ideales para iconos, logotipos, texto gráfico, etc. Estos formatos no permiten establecer un grado de compresión, sin embargo permiten variar el peso del archivo mediante la reducción de colores. Al usarse normalmente en imágenes con poca gama de color (fondos, sombras, textos…) y en elementos muy repetidos a lo largo de todo el sitio web (logotipo, menús, partes del diseño…) esta característica es especialmente útil y no debe ser desestimada. La limitación en el número de colores (256) del formato GIF y un rendimiento por lo general menor ha hecho que pierda terreno respecto al PNG, más flexible.Elegir el tamaño de imagen adecuado
El factor más decisivo en el peso de una imagen es por supuesto su tamaño. Elegir las dimensiones más adecuadas para cada imagen que quieras mostrar en tu web es por tanto de vital importancia para evitar un exceso de peso innecesario.
Un error muy común al respecto es redimensionar una imagen no con un editor gráfico sino modificando los atributos width y height (ancho y alto) de la etiqueta HTML que muestra dicha imagen. Con esta práctica sólo conseguirás dos cosas. La primera, que la imagen tenga un peso mayor al necesario (la imagen no reduce su tamaño real, sino sólo el aparente). La segunda, que se vea mal en tu página, ya que un navegador web no es Photoshop y no está capacitado para mostrar convenientemente una imagen redimensionada.
Si por alguna razón deseas mostrar una imagen de gran tamaño (y por lo tanto muy pesada), no la incluyas directamente en la página. Con esto evitarás además que sus dimensiones rompan el diseño de tu web. En su lugar, incluye un enlace a esa imagen, para que sólo la descarguen aquellos usuarios que realmente estén interesados en ella. Como solución óptima puedes enlazar a la imagen de gran tamaño a través de una versión en miniatura (thumbnail) de la misma, que servirá a modo de «vista preliminar».
El sistema de blogs WordPress tiene una característica interesante que es a menudo infrautilizada. Cuando una imagen es subida al servidor a través del gestor de archivos, WordPress crea automáticamente una imagen en miniatura de dicha imagen. Lo que sucede es que el tamaño por defecto que usa para esos thumbnails es demasiado pequeño para resultar de utilidad. Sin embargo es posible cambiar ese tamaño por uno más adecuado con un sencillo código. Por ejemplo, las siguientes líneas establecen un ancho fijo de 250 pixels para los thumbnails generados:
<?php
function my_thumbnail_size( $size, $attachment, $file ) {
$width = 250;
if ( !$file || !function_exists( «getimagesize» ) ) return $width;
$image_size = @getimagesize( $file );
if ( !is_array( $image_size ) ) return $width;
if ( !$image_size[0] ) return $width;
if ( $image_size[0] >= $image_size[1] ) return $width;
else return round( ($image_size[1] / $image_size[0]) * $width );
};
add_filter(«wp_thumbnail_max_side_length», «my_thumbnail_size», 10, 3);
?>
Añade el código anterior al archivo functions.php del tema que estés usando (crea dicho archivo si no existe) o alternativamente guárdalo como plugin e instálalo desde el panel de WordPress. No hace falta decir que puedes cambiar el 250 por cualquier medida que prefieras. Ahora cuando subas archivos gráficos a tu blog y los envíes al editor, sólo tienes que elegir la opción Mostrar: Miniatura para que todas tus entradas incluyan imágenes de un tamaño adecuado (y además con una buena compresión en el caso de los jpg).
Si estás usando el tema de este blog (1 Blog Theme), éste ya incluye la mencionada característica, y además el ancho es configurable desde la página de configuración, por lo que no es necesario que realices esta modificación.
Establecer un ancho fijo para las imágenes de tu sitio web tiene el valor añadido de proyectar una imagen más profesional y cuidada.