Optimización de imágenes para la Web. Tutorial SEO

Uno de los factores que ayudará en distintos aspectos para el posicionamiento es la optimización de las imágenes web. Es por eso que hoy dejo un breve tutorial de como optimizar las imágenes para nuestros sitios web, disminuyendo su peso y tamaño, junto a otras técnicas que mejoraran la experiencia de los usuarios en nuestro sitio web y así mismo, contribuirán para el posicionamiento orgánico de nuestros proyectos.

Disminuir el Peso de las imagenes JPG

Existe una herramienta llamada compressjpg.com que nos ayudará a disminuir el peso de nuestras imágenes en formato JPG. Sus resultados son increíbles y nos ayudará mejorar la carga de estas imágenes en nuestros sitios web

Herramienta para imágenes JPG

Disminuir el peso de las imágenes PNG

Con compresspng.com nos ayudará a disminuir el peso de nuestras imágenes en formato PNG. Sus resultados son increíbles y nos ayudará mejorar la carga de estas imágenes en nuestros sitios web

Herramienta para imágenes PNG

Tamaño de la imagen

El tamaño hace referencia a la longitud de la imagen (No confundir con peso de la imagen) y muchas veces los sitios web poseen imágenes con un tamaño extremadamente grande para visualizarlo en menor tamaño en los sitios web, lo cual es un exceso innecesario de recursos. Para ajustar el tamaño de las imagenes existen programas como Adobe Photoshop o simple mente utilizar alguno Online como reducirfotos.com o webresizer.com

Etiqueta ALT para imágenes.

En nuestro código HTML, dentro de la etiqueta “IMG” existe un atributo llamado “ALT” en el que principalmente se describe la imagen en caso de que el navegador no la pueda cargar. También dispone de otras utilidades como ser útil para personas con discapacidad visual. Según los estándares web, es obligatorio el uso de la etiqueta alt, por otro lado, ayudarán a los motores de búsqueda identificar y posicionar las imágenes.

Microdatos Schema

Los microdatos son útiles para asignar información adicional a los elementos de nuestra web y también se pueden enriquecer las imágenes con datos adicionales como ubicación en que se capturó la foto, el autor, fecha en que se tomó, etc…

A continuación un ejemplo:

<div itemscope itemtype="http://schema.org/ImageObject"> 
<h2 itemprop="name">Cordillera de los Andes, Chile</h2> 
<img src="cordillera-de-los-andes.jpg" alt="Cordillera de los Andes." itemprop="contentUrl" /> 
Por <span itemprop="author">Autor</span> Fotografiada en <span itemprop="contentLocation">Santiago, Chile</span>
<meta itemprop="datePublished" content="2016-08-01"> 
<span itemprop="description">Fotografía tomada a la cordillera desde Santiago mientras caminaba.</span> </div>

Para más información sobre Microformatos visita Schema.org

También puedes ver el tutorial de optimización de imágenes para la web en AMP

 

Eduardo Garrao

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *