Herramientas para la optimización masiva de imágenes

Existen muchos programas que te permiten optimizar imágenes para la web, entre todos ellos puede estar cualquier editor gráfico, desde el clásico photoshop hasta gimp, paint.net...

El problema de todos estos excelentes programas es que si tienes una cantidad inmensa de imágenes o fotografías que debes colgar en la web (por ejemplo para un catálogo de productos) deberías ir una a una modificándolas. Esto además de ser un trabajo pesado requiere un gran tiempo que muchas veces no tenemos.

De momento he encontrado dos herramientas muy útiles que nos permiten optimizar muchas imágenes con unos pocos clicks.

• Image Resizer for Windows. Con este programa podemos cambiar de manera personalizada el tamaño de las imágenes disminuyendo su peso. Una vez instalado tan solo debemos hacer botón derecho en la carpeta que contiene las imágenes y pinchar en resize images. De esta manera se creará una nueva carpeta conservando la original donde se ubicarán las nuevas fotografías redimensionadas.
• Image Optimizer. Esta aplicación funciona de una manera similar a la anterior permitiéndote reducir considerablemente el peso de cualquier imágen o grupo de imagenes contenidas en un directorio. Problema: en la versión de prueba se añade una pequeña etiqueta con publicidad sobre la herramienta.

Iré ampliando esta lista progresivamente si descubro alguno más interesante.

Optimizar caché de navegador editando .htaccess en sitio web con apache

Si tu servidor de alojamiento web es apache puedes mejorar la velocidad de tu sitio estableciendo el tiempo de la caché insertando dentro del archivo htaccess de la raíz de tu aplicación web:

# Optimización caché navegador
<FilesMatch "\.(ico|pdf|flv|jpg|JPG|jpeg|png|gif|js|css|swf)$">
Header set Expires "Wed, 15 Apr 2020 20:00:00 GMT"
Header set Cache-Control "public"
</FilesMatch>


En estas líneas lo que estamos estableciendo es habilitar la caché para los ficheros que contienen las extensiones indicadas "\.(ico|pdf|flv|jpg|JPG|jpeg|png|gif|js|css|swf)$". En el ejemplo se indica también el tiempo en el que expirará la caché para los archivos indicados: el miércoles 15 de abril del 2020 a las 20:00 horas.

Optimizar caché de navegador editando web.config en sitio web con IIS

Si tu servidor de alojamiento web es IIS puedes mejorar la velocidad de tu sitio estableciendo el tiempo de la caché insertando dentro de <system.webServer> del archivo web.config de la raíz de tu aplicación web:

<staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
</staticContent>

Donde cacheControlMode puede tomar los valores:

• "NoControl": no se establece un tipo de caché para el sitio, con lo que tomará los valores globales de configuración heredados.
• "DisableCache": caché deshabilitada para el sitio.
• UseMaxAge: se especifica una edad de expiración de la caché en el parámetro cacheControlMaxAge en días, horas, minutos y segundos (d.hh:mm:ss)
• UserExpires: indica la fecha exacta de expiración de la caché.

Habilitar compresión gzip o deflate editando .htaccess en sitio web con apache

Para habilitar la compresión antes de nada es fundamental saber si el servidor apache donde está alojado tu sitio web permite la compresión.
Si es así entonces en muchas ocasiones podremos aumentar la velocidad del sitio modificando el archivo .htaccess en la raíz de tu aplicación e insertar esto:

# Compresión GZIP con mod_gzip
<IfModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

# Compresión GZIP con mod_deflate
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/css text/javascript application/x-javascript application/javascript    text/x-component text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon     application/json
</IfModule>

En esta configuración podremos incluir o excluir las extensiones de archivo que creamos convenientes.

Bienvenido al blog de rendimiento de sitios web

Hola,
Bienvenidos a este nuevo blog donde trataremos temas para mejorar el rendimiento de las webs. Espero que os guste y que sea de utilidad.