Optimización de imagenes

Tweet about this on Twitter90Share on Facebook0Share on Google+3Share on LinkedIn11Pin on Pinterest0

Uno de los aspectos que más influyen en ralentizar el tiempo de carga de nuestra web es la utilización de imágenes no optimizadas. En esta sección vamos a dar algunos consejos y analizar algunas herramientas relativas a este tema. Esta sección está especialmente destinada a aquellas webs que no utilizan un CMS que perita la optimización automática. También veremos otros aspectos a tener en cuenta relativos al SEO de las imágenes.

DIRECTRICES

A la hora de optimizar las imágenes para nuestra web deberemos tener en cuenta las siguientes directrices:

– Nombrar las imagenes de acuerdo a la temática de nuestra web. Eso no significa que todos los nombres utilicen nuestras palabras claves, sino que de forma natural se utilicen nombres relacionados con las mismas. Pongamos un ejemplo, digamos que la página donde vamos a insertar imágenes habla de piscinas, los nombres que podríamos utilizar serían (a nivel totalmente orientativo): piscinas con hidromasaje, complementos de jardin, mantenimiento de la piscina, control de ph… Debemos obrar con precaución en esta práctica, ya que la sobreoptimización puede ser penalizada por los buscadores.

– Utilizar el llamado tag “alt” en las imágenes, siguiendo los mismos consejos que en el punto anterior. Veamos un ejemplo:
<img src=”cuidado-piscinas-.jpg” alt=”mantenimiento de piscinas” />

– Reducir el tamaño de las imágenes mediante las herramientas que veremos posteriormente.

– Debemos optimizar las imágenes sin perjudicar su correcta visualización. Las herramientas de optimización permiten reducir el tamaño de las mismas, sin que su aspecto visual se vea deteriorado.

– Debemos asegurarnos de que las imágenes que ven los usuarios corresponden a su tamaño real. A veces se redimensiona mediante html o css el tamaño de las imágenes, ello provoca que aunque estas “aparezcan” en un tamaño reducido en verdad estamos caragando en la página la imagen original de mucho mayor peso; ello comporta un aumento innecesario del tiempo de carga de la web.

– Debemos asegurarnos de incluir las imágenes en el sitemap de nuestra web. En el campo “recursos adicionales”, podremos ver una guía orientativa al respecto.

INSTRUCCIONES

Existen dos formas de optimizar las imágenes que vamos a utilizar en nuestra web: mediante software de escritorio y mediante herramientas online. Vamos a ver algunas de las principales.

Sofware de escritorio

Empecemos por el popular Photoshop. Una vez abierta la imagen de dicho programa, nos dirigiremos al siguiente menú:

photoshop-save for web

Veremos que aparece la siguiente pantalla:

photoshop-format

Deberemos especificar el formato (gif, png…) que queremos utilizar y el tamaño de la imagen, es importante ver (resaltado amarillo izquierdo) el tamaño que tendrá la imagen. En general, raras veces utilizaremos un tamaño superior a las 50k.

Algunas alternativas gratuitas a este programa son las siguientes:

  1. Gimp: Un editor gratuito y open source.
  2. Seashore: Otro editor gratuito y open source, pero para ordenadores Mac.
  3. Paint.net: Un editor desarrollado con el apoyo de Microsoft.

Si preferimos utilizar una herramienta online, existen múltiples alternativas. Tenemos, por ejemplo, webresizer, el procedimeinto es muy sencillo, simplemente tendremos que subir la imagen desde nuestro ordenador, y el programa hará el resto.

online resizer

En el siguiente ejemplo veremos como hemos pasado de un peso de 32k a 17 k, sin ninguna merma en la calidad visual.

optimized

Otras webs similares a la anterior que podemos utilizar:

  1. Pixlr: Un editor muy completo y gratuito
  2. Picfull: Se caracteriza por su facilidad de uso
  3. Sumopaint: Otro interesante editor, que tiene  también versión gratuita

 

RECURSOS ADICIONALES

Google nos ofrece unas importantes directrices a la hora de optimizar nuestras imágenes, lo podéis ver en la siguiente página:

https://support.google.com/webmasters/answer/114016

De dicha página es interesante ver el siguiente vídeo que nos da detalles sobre cómo funciona la búsqueda de imágenes en Google:

Esta página de Google nos da información sobre cómo incluir las imágenes en el sitemap de nuestra web:

https://support.google.com/webmasters/answer/178636?hl=en

Destacamos de la misma los campos más relevantes

Image tag definitions

Tag Required Description
<image:image> Yes Encloses all information about a single image. Each URL (<loc> tag) can include up to 1,000 <image:image> tags.
<image:loc> Yes The URL of the image.In some cases, the image URL may not be on the same domain as your main site. This is fine, as long as both domains are verified in Webmaster Tools. If, for example, you use a content delivery network (CDN) to host your images, make sure that the hosting site is verified in Webmaster Tools OR that you submit your Sitemap using robots.txt. In addition, make sure that your robots.txt file doesn’t disallow the crawling of any content you want indexed.
<image:caption> Optional The caption of the image.
<image:geo_location> Optional The geographic location of the image. For example, <image:geo_location>Limerick, Ireland</image:geo_location>.
<image:title> Optional The title of the image.
<image:license> Optional A URL to the license of the image.

 

Tweet about this on Twitter90Share on Facebook0Share on Google+3Share on LinkedIn11Pin on Pinterest0
<< Post Anterior
Post Siguiente >>

Leave A Response

* Denotes Required Field