Reducir el tamaño de fotos e imágenes : hasta 8 veces !!!
El uso de imágenes en una web ¿? es correcto o incorrecto ¿? Deberíamos reducirlas de tamaño y optimizarlas, o mostrarlas con su mejor resolución ¿?
Utilizar imágenes para ilustrar un artículo de una página web o blog, es cada vez más utilizado por muchas personas. También utilizar imágenes de calidad para la home o página principal de una web, e incluso en banners promocionales y publicitarios. Es lógico, el poder de una imagen está fuera de toda duda y sobran las explicaciones a este respecto pero ¿Estamos haciendo un favor o daño a nuestra web con las imágenes?. Depende. Veamos por qué.
Reducir el tamaño y peso de una imagen para utilizar en un blog o web es vital para optimizar los recursos de carga y beneficiarnos del SEO sin riesgos de exceso de consumo de hosting (y costes más altos)
Como les iba diciendo, cada vez se utilizan más las imágenes ya que el efecto visual de una página gana muchísimo si se utilizan imágenes de calidad y adecuadas. Además, en ciertos contexto, el uso de imágenes para explicar, por ejemplo, el proceso de fabricación de un producto, el proceso de utilización de una web y muchas cosas más, se hace de forma mucho más fácil, entendible y de cómoda interpretación por parte del visitante de una web, mediante imágenes. Tipo infografía; tan famosas «ellas» en los tiempos que corren.
Además, el uso de imágenes optimizadas para SEO, es decir con una etiqueta «alt» y una etiqueta «title» correctas, va a permitir que los buscadores indexen estas imágenes y las muestren en las SERP (pantallas de resultados). Esto puede dar a lugar a que aumentemos considerablemente el número de visitas a una página ya que para determinadas búsquedas, Google.com (o .la-extensión-de-su-país) muestra resultados de imágenes almacenados en Google.Search
Pero claro, estas imágenes, además de que habitualmente tienen un coste (lógico…), tienen otro punto, digamos; negativo. Se trata del peso de las imágenes que, si es muy alto, va a ocasionar que la carga de nuestra página sea lenta y lo que ganemos en SEO «por un lado»; lo perdamos por otro ya que Google valora cada vez más la velocidad de carga.
Y esto hace que debamos de optimizar las imágenes.
Cómo optimizar imágenes para reducir su peso y ganar velocidad de carga de nuestra web
Para ganar velocidad de carga de una web hay muchos factores que a ello afectan. Uno es la memoria utilizada en la base de datos, por ejemplo de WordPress, y en la que convergen textos, imágenes y otros códigos informáticos. Plugins también. En definitiva todo el contenido de una página. Si hablamos de WordPress, el CMS más utilizado del mundo con mucha diferencia, tenemos que tener en cuenta que a cada visita que se recibe en una web o blog (o tienda online que también se pueden hacer con WordPress..:), se deba de cargar toda la base de datos. Esto se hace a toda velocidad pero cuantas más visitas aunemos en un mismo momento, mayor posibilidad de exceder de la capacidad de la base de datos y hosting contratado; y mayores son las posibilidades de que nuestra página ofrezca un mensaje de error de ancho de banda, se caiga e incluso «nuestra» empresa de hosting nos quiera echar de sus servicio por consumo excesivo de recursos.
Y como les iba diciendo, y es motivo de este artículo, se hace vital de necesidad optimizar las imágenes que vayamos a utilizar en nuestro espacio web para que esto no suceda, y que pueden empezar a testar con Google Page Speed http://developers.google.com/speed/pagespeed/insights/ , aunque los resultados suelen ser engañosos puesto que la velocidad de carga de un espacio web en general no es el mismo para cada url, y se debe de testar desde el país en el que esté el hosting (por eso es mucho mejor tener un hosting web en el país del que más visitas recibamos, o replicas en cloud por diferentes países del mundo, en especial el de «la mayoría de nuestros visitantes» aunque sea algo más caro), puesto que muchos medidores de velocidad lo hacen desde por ejemplo Estados Unidos de América, y se trata de datos rebotados de país a país que no ofrecen los verdaderos resultados de carga / velocidad que reciben nuestra mayoría de visitantes.
Optimizando las imágenes, es decir bajándoles su peso (en Kb), conseguiremos una menor carga de la memoria, por ende de la base de datos, y con ello nuestra página irá «con menos peso», valga la redundancia, y nuestra web más rápida. Sea cual sea la procedencia de la visita. Y debemos de optimizarlas todas, puesto que, según lo visto antes, con WordPress se carga toda la base de datos en milisegundos, pero el peso de una imagen que no está en la página que se va a visitar, afecta al resultado de carga de la página que requrimos o nos encontramos. incluso las imágenes de urls o posts que hace tiempo que no se consultan o incluso ya no recibimos ninguna visita !.
Opciones para optimizar una imagen y utilizarla en un blog con peso minimizado
Optimizar una imagen es, en cierta manera, bajar su calidad. Pero no solo eso, puesto que además de bajar su calidad visual, optimizar una imagen también puede estar relacionado con hacerla más o menos pequeña. Es decir en cambiar su formato.
La medida o formato de la imagen va a criterio de cada uno, y es lógico que una imagen grande, por ejemplo 600 px de ancho por 500 px de alto, ocupe más KB (kilobytes -1000 kb = 1 Megabyte Mb-) tenga más peso que una que sea su mitad. No es siempre cierto, pues si la primera está optimizada, y su calidad reducida, puede que tenga un peso de carga inferior a la segunda; pese a ser el doble de grande.
Por ello, lo ideal es elegir adecuadamente el formato de la imagen; y pasar a su optimización.
Existen muchos programas de diseño web que permiten esta optimización básica, si lo que queremos es reducir el peso de una imagen para conseguir mejorar la velocidad de carga de nuestra web o blog de forma cómoda y sin necesidad de alterar colores y procesos mucho más lentos. Como todos sabemos Photoshop es una opción. Magix Web Designer es otra, y en definitiva para reducir su peso lo que tenemos que hacer es antes de guardar la imagen, por ejemplo en jpg, png o gif, seleccionar la opción de calidad de imagen. Si conservamos la opción 100%, estamos guardando la imagen con toda su calidad y el peso puede ser «mortal» para nuestra web (y presupuesto de hosting).
Moverse entre el 100% y el 70% de calidad de la imagen va a repercutir en un peso muy variable. Tomando como ejemplo una imagen de las que utilizamos en ocasiones en los posts de http://www.SOCIALetic.com de formato 300 x 336 px; tenemos que una imagen al 100% de calidad tiene un peso aproximado (varía cada imagen por sus colores, brillos, resoluciones…) de 80000 bites (80 kb), que pasan a 20000 si reducimos al 80% de calidad; y a 16500 kb si nos quedamos con un óptimo 70%. Los números son claros, reduciendo del 100% al 70% tenemos nuestra página web más de 4 veces más rápida.
Bajar del 70% la calidad de una imagen suele ofrecer resultados visuales que empiezan a ser malos; aunque hay ocasiones en que si la imagen original es de mucha calidad, se puede reducir incluso hasta el 40% con lo que, de acuerdo al ejemplo anterior, nos moveremos en que la misma imagen (algo «menos perfecta») pesara unos 11000 bites lo que es casi 8 veces menos que el original !!! (sigue…)
[smartads]
Como sé que todo el mundo no utiliza Photoshop ni Maxic Web Designer, les indicaré un par de programas gratuitos para optimizar imágenes web
El primero es Photoscape, http://www.photoscape.org, editor de imágenes gratuito cuya descarga se hace desde la web antes indicada, y para conseguir menor peso de las imágenes, solo tenemos que indicar en el momento de grabar una imagen (al disco duro de nuestro ordenador) la calidad de la misma. Tomo como ejemplo la que utilizaré para este artículo, modificada, recortada, redimensionada y optimizada mediante Photoscape con calidad final 70%:
Si ya tienen la imagen y no quieren instaler Photoscape, pueden hacerlo todo online y gratis desde la página de Web Resizer, http://www.webresizer.com/resizer/, y para los usuarios de WordPress recomendaré un plugin que, aunque se trata de una segunda optimización para reducir aún más el peso de la imagen y que no exime de los anteriores. Ess WP Smush.it de wpmudev que encuentran en la página oficial de WordPress en la siguiente dirección http://wordpress.org/plugins/wp-smushit/
Ya saben que si tienen cualquier duda al respecto, solo tienen que preguntarme, david(arroba)socialetic.com o dejar su comentario tras este post.
