Como optimizar una página Web en 6 pasos

Primero que todo debemos saber en que estado se encuentra nuestra página web . Para ser concisos, voy a sugerir solo dos servicios, uno es un pluging y otro es on-line:


En mi caso, la página que yo pongo como ejemplo de optimización es la de una estancia que me pidió, por cuestiones geográficas, que la página les cargara bien en cualquier sitio , aun teniendo dial-up o gprs.  Pero eso si, querían que tenga imágenes y una buena estética. Entonces, el secreto era que esté bien optimizada. La página en cuestion es de Estancia La Caledonia Sur - - y al día de hoy logré que la página respondiera con 96/100 en el pluging de Google y en el sitio logré 98/100 lo que es muy buen resultado, 95% y 98% respectivamente.






TODAS las imágenes destinadas a una página web , tienen que pasar por Photoshop. Primero que todo, tenemos que modificar ciertos parámetros importantes:

Tipo de Color: Para la web es recomendado siempre, por defecto, usar RGB primero porque este es el utilizado por las pantallas y segundo porque implica un canal de color menos, lo que representa menos peso que una en CMYK.
Pero el secreto está en utilizar la menos cantidad de colores posibles, acá te doy una guía:


Si la imagen es un icono en blanco y negro o gris, usá Duotono o Escala de Grises.
Si la imagen es un icono a color, usa Color Indexado, el mínima cantidad de colores que puedas.
Si la imagen requiere más colores, como cualquier imagen de dimensiones lo que necesitas es un perfil RGB.
Hacé esto con todas imágenes que puedas.

Canales: Para la web se recomienda el mínimo: 8 Bits/canal. (ver arriba)




Ahora que tenemos optimizadas las propiedades, tenemos que redefir tamaño y peso de las imágenes para que no pesen más de la cuenta y que sin embargo mantenga la calidad. Photoshop tiene una función para optimizar imágenes para la Web . La función se encuentra en:

Archivo Guardar para Web y dispositivos.
O bien con el atajo de teclado Alt+Mayús+Ctrl+S.


Acá podes seleccionar el tipo de archivo, la compresión y el tamaño ideal para la imagen.

Es importante que redimenciones las imágenes a la medida justa, tal como se van a ver en el navegador.

También es importante que compares la calidad de las imágenes que optimizas, para eso la utilidad brinda la posibilidad de ver el original y cuatro posibles optimizaciones (ver en la imagen).

Si querés un efecto de rapidez, no te olvides de usar el Método de progresivo de JPG, que te permite cargar la imagen de forma progresiva, de menor calidad a mayor. El mismo método pero para GIF y PNG se llama "Entrelazado" (aparece en la imagen).

Aviso: si no tenés Photoshop Cs4 o superior, la aplicación se llama Image Ready y generalmente viene en el mismo paquete de instalación de Photoshop Cs3 o inferiores, buscalo.