Autor: Gilberto Darcy Herrera López / gilbertod.herrera@vcl.jovenclub.cu
Manage the design of images for web page
Cuando una imagen acompaña a una publicación en la web, trasmite una comunicación visual capaz de ofrecer una completa información dirigida a captar la atención del consumidor final de productos y servicios. La composición de la misma debe entregar un lenguaje plástico-visual para transmitir el mensaje deseado, por lo que la gestión en el desarrollo de una imagen para la Web exige de la imaginación y el ejercicio de la creación artística.
Recomendaciones para el diseño de imágenes para páginas web
Se debe tener en cuenta que las imágenes que se quieren utilizar, deben caracterizarse por su dimensión, tamaño, formato, etc., pues la atracción de la web dependerá en gran medida de estas características.
- Debe de ser autor de sus imágenes. Google penaliza el uso de imágenes o fotos que provienen de otras páginas, aunque algunas sí se pueden usar libremente ya que tienen licencia libre o llamadas common creative, por ejemplo: Photolia, iStock, Freepik, Pixabay, Unsplash.
- Tamaño de la imagen: Una imagen muy pesada hará que la página tarde más en cargarse, atentando contra las visitas de los usuarios y que se marchen antes de ver el contenido. Son recomendables aquellas imágenes que tengan un peso de 90 Mb y no sean superior a 200 Mb. Sin embargo, si lo que se desea exponer es un icono, bastará con un peso de 10 Kb. Siempre teniendo presente que debe de verse de forma aceptable en la web y tener una buena resolución.
- Formato adecuado: La Web, utiliza comúnmente tres formatos, png, jpg y gif, su elección depende de cómo se gestionará la imagen dentro de la página, por ejemplo, png, conserva las transparencias y no pierde mucha calidad cuando se comprime la imagen, es muy utilizada para logotipos, pero tiene limitaciones al reducirse el tamaño. En el caso de JPG, aunque se pierde un poco de calidad al comprimir las imágenes, sin embargo, no se pierden los colores o tonalidades, es el más utilizado, ideal para fotografías con detalles y muchos colores; gif es ideal para animaciones y requiere de un trabajo inicial para su gestión final.
- Optimizar la imagen: Tratar de conseguir la mayor calidad de la imagen en el menor espacio, tratando de distribuir los atributos de forma conveniente, al final es muy importante trabajar con los píxeles, resolución y tamaño, cuya relación es directamente proporcional entre las misas, para ello pueden utilizarse programas como: Free Image optimizer, Photoshop, Photo Resizer, Canvas, entre otras.
- Aplicar las recomendaciones del SEO: Mejorar la visibilidad del sitio Web a través de la optimización para los motores de búsqueda, auxilia la correcta elección y calidad marcando la diferencia con la competencia, por lo tanto añadirle los atributos alt a la imagen ayudará a mostrarla cuando la misma tiene alguna situación en exponerse, usar títulos cortos con palabras claves para su identificación, preferentemente usar minúsculas, no usar tildes ni ñ, ni caracteres especiales, tan solo letras y números, usar link adecuados, utilizar herramientas como Seo Rank tracker, SEO Quake y optar por los marketing de contenidos para poder hablar de su empresa, industria o sector de acción.
La competencia que hoy en día se establece entre las páginas Web, para que estas sean vistas por los usuarios finales, por el bien de la empresa o sector interesado, debe hacer uso de imágenes con mensajes sutiles, inteligentes y que puedan conquistar al que las visite. Con el uso de herramientas adecuadas y el cuidado de los atributos de las mismas, podrá obtener una Web con lenguaje creativo y visual acorde al mensaje que se quiere exponer.
Referencias bibliográficas
- Alba, Teresa. (2017). Diseño de imágenes para páginas web en tus artículos: Herramientas y consejos. Recuperado el 21 de enero de 2021 de, https://www.webempresa.com/blog/diseno-de-imagenes.html
- Multiplicalia. (s/f). Cómo preparar las fotos para el diseño de tu web. Recuperado el 9 de noviembre del 2020 de, https://www.multiplicalia.com/como-preparar-las-fotos-para-disenos-web/?cn-reloaded=1