Normalmente la carga de imágenes se suele optimizar de varias formas, donde en su mayoría todas ellas tienen en particular o bien reducir el tamaño de las imágenes, utilizando menos calidad u otro formato más eficiente (gif, jpg...), o reducir el número de peticiones al servidor o servidor de imágenes.
La primera opción no tienen ningún secreto, cuanto menos ocupe la foto más rápido llegará al visitante. Por ello se recomienda exportar todas las imágenes para web (Photoshop u otros editores llevan ya opciones de optimización para ello), escogiendo una calidad razonable.
La segunda opción se puede abordar de varias formas pero la más utilizada es la creación de hojas de sprites. Esta técnica consiste en juntar todas las imágenes de la web en una sola imágen más grande. Por tanto se reduce drásticamente el número de peticiones que se realizan al servidor.
Ahora bien una vez que el visitante tiene todas las fotos descargadas, es decir, en su caché del navegador. Por qué debería esté volver a descargar las fotos cada vez que vuelva a visitar la web. Puesto que si las fotos no han cambiado, entonces no se deberían volver a bajar. Este es el caso que vamos a optimizar en este artículo, para así ahorrar ancho de banda en la red y a su vez el tiempo de carga de la página.
Para habilitar la caché de imágenes tan solo debemos indicarle al navegador que las fotos no han caducado todavía, que están son todavía válidas. Y esto se consigue indicando o bien la duración de dichas fotos, o la fecha específica de caducidad. Dicha fecha de caducidad o duración debe ir en la cabecera de cada foto. Esto se puede hacer en PHP gracias a la función “header”, pero es mucho más rápido hacerlo vía .htaccess utilizando el módulo de “expires” de Apache (mod_expires).
Por ejemplo podemos incluir en nuestro .htaccess el siguiente código:
ExpiresActive On ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpg A2592000
De esta manera estamos indicando que todos los archivos gif, png y jpg serán válidos hasta 1 mes después de tenerlo en la cache, es decir, desde que visitamos la web por primera vez. Ahora bien si indicamos en vez de “A” de “access”, una “M” de “modification” entonces los archivos serían válidos hasta 1 mes desde su fecha de modificación, de esta manera caducarán a la vez para todos los visitantes.
ExpiresByType image/gif M2592000
El tiempo en estos casos se indica en segundos. Pero esta directiva permite una forma más sencilla como:
ExpiresByType text/html "access plus 1 month" ExpiresByType image/gif "modification plus 5 hours 3 minutes"
Esto no es solo aplicable para las imágenes, sino también para archivos css y javascript. Ahora bien supongamos que cambiamos una de las imágenes y la mantenemos con el mismo nombre. En este caso si la foto caduca un mes después de la primera visita, entonces el visitante seguirá viendo la foto antigua, por ello una solución consiste en ir añadiendo un sufijo a la imagen como un número de versión, de esta forma al cambiar el nombre de la imagen, esta se volverá a descargar.
Comentarios