optimización de imágenes para internet.

 Luego de haber visto cómo optimizarlas, se nos solicitó generar 5 imágenes aptas para su visualización web:

1. 
Una imagen fotográfica color.

2. Una imagen fotográfica monocromática.

3. Una imagen de origen vectorial (svg/ai/cdr, p.e.). Un logotipo gráfico (al estilo del de IBM, o Adidas, etc).

4. Un mapa que tenga elementos pequeños y definidos (nombres de calles por ejemplo).

5. Una combinación de dos imágenes anteriores (p.e una foto y un logo, una foto y un mapa, etc.) en una sola imagen a color.

Lo primero y principal es buscar las imágenes con las que se trabajará. Las mismas debían pertenecer a bancos de imágenes gratuitas para asegurar su uso libre. Teniendo esto en cuenta, extraje la imágen de un grupo de jirafas caminando de la plataforma Pexels y el archivo .svg del logo de Discovery Channel desde el repositorio de Wikipedia. Por su parte, obtuve el fragmento del mapa de un print de pantalla de Google Maps

Con esto en mente, queda por definir el destino de las imágenes para establecer su optimización. En mi caso, el objetivo fue lograr que las imágenes pudieran ser utilizadas como miniaturas para videos publicados en la plataforma YouTube. Es por ello que mantuve una resolución de 1280 x 720 pixeles. Las medidas elegidas corresponden a las recomendaciones del artículo Las miniaturas de YouTube: clave del éxito donde, a demás, se especifica que las mismas no deben pesar más de 2MB. 

Si bien es un formato bastante grande para su función, decidí intentar generar imágenes que puedan ser bien vistas a la hora de ocupar el lugar destinado y respeten el último requisito importante a tener en cuenta para el desarrollo de la actividad: la suma de todos los archivos no debe superar los 700 KB. Es así que, al final de la presentación, encontrarán un mockup de la quinta imágen en el entorno digital elegido. 

Aviso: Las imágenes fueron insertadas directamente en el blog debido a que ImgBB ha estado presentando problemas a la hora de visualizar las embebidas. 

Ahora sí, habiendo definido todos estos aspectos, les presento las imágenes que optimicé para esta actividad:


1. Imagen fotográfica a color



96.2 KB

2. Imagen fotográfica monocromática


99.3 KB

3. Una imagen de origen vectorial


11.9 KB

4. Un mapa que tenga elementos pequeños y definidos


112 KB

5. Una combinación de dos imágenes anteriores


101 KB


Peso total de los 5 archivos: 420.4 KB
Peso total de los 5 archivos desde "Inspeccionar": 429.7 KB


Ejemplo de uso: 
Si bien sabemos que no hay jirafas en la Amazonia, quería probar cómo se vería el resultado de la actividad puesto en el contexto determinado. Es así que armé este mockup utilizando un print de pantalla del buscador de YouTube y coloqué sobre el mismo la imagen optimizada. 





Comentarios

Entradas populares de este blog

charlemos un ratito.

html y css (si se pudo).