Imágenes web, conceptos para mejorar el rendimiento
Las imágenes web son determinantes a la hora de crear ese “look and feel” que transmite sensaciones y da vida a todo el global de una página web. La necesidad de tener buenas fotografías que ayuden a comunicar nuestros mensajes es de vital importancia, no solo para los usuarios sino que también ayuda al posicionamiento web. En este artículo os enseñaremos cómo escoger imágenes web de calidad libres de royalties y cómo ajustarlas al tamaño y proporción de vuestra página web.
Directorios Fotográficos
Cuando estamos creando una página web, blog o ecommerce, es importante de primeras definir un estilo, es decir, si vamos a usar fotografías en blanco y negro, intentar que todas sean en blanco y negro, o si vamos a usar iconos juntamente con ilustraciones, que sean coherentes en sus estilos.
Por tanto vamos a dedicar todo un día a razonar cual es el mejor estilo y hacer un poco de búsqueda en directorios de calidad para generar nuestro propia biblioteca de fotos. La mayoría de directorios funcionan con packs de puntos que se compran de primeras y a medida que vamos descargando fotos se nos van gastando los puntos.
También existen directorios gratuitos en los que podemos descargar fotografías libres de royalties, pero evidentemente el fondo de armario es más reducido y la calidad es muy inferior, por tanto recomiendo gastarse algo de dinero (hay muchos packs y fotos con rankings de puntos muy distintos) en conseguir fotos de alta calidad.
Pongo como ejemplo el que es a mi modo de ver, el mejor directorio fotográfico a nivel de calidad precio y con el que trabajamos en Nordic. Se trata de istockphoto.com
En istockphoto podemos buscar por varios términos de búsqueda y ajustar los resultados con varios filtros en función incluso del color, si queremos que aparezcan personas o no, si queremos que sea foto o ilustración, el tipo de licencia, el tamaño, etc.
Los precios no son caros, teniendo en cuenta lo que te costaría tomar estas fotos con un fotógrafo profesional. Nosotros solemos comprar un pack de 6 créditos (44€) por un proyecto web standard (una web de quienes somos, que hacemos y donde estamos), e intentamos que las fotos que descargamos sean de un crédito por foto, de forma que tenemos 6 fotos superbuenas libres de royalties a alta resolución para usar en la página web a diseñar.
Un consejo a la hora de buscar fotos para una web es que si tu sector te lo permite, busques fotografías de una misma serie o un mismo autor, ya que suelen tener un “look and feel” parecido y eso va a dar coherencia a tu página web. Intenta siempre descargar el archivo con máximo tamaño, ya que siempre puedes hacerlo pequeño, en cambio si descargas una foto a tamaño pequeño, olvídate de usarla para algo que no sea tu web.
Formatos de archivo
Los archivos usados normalmente en internet suelen ser .jpg .png o .giff, la diferencia entre este tipo de archivos es importante tenerla en cuenta, ya que podemos hacer cosas muy chulas si conocemos como funciona cada uno.
Jpg: Es el estándar fotográfico por excelencia, suele pesar poco, ya que es un formato reducido de archivo que comprime los datos de la imagen en bloques de píxels, también conocidos como “mosaico”. Es el formato más universal y usado en internet, pero es desaconsejable para ilustraciones y textos, ya que tiende a pixelar por esta tendencia a comprimirlo todo.
IDEAL PARA FOTOGRAFIAS CON MUCHO DETALLE
Png: El formato png en mi opinión es el nuevo formato universal para fotos en internet, es mucho mejor que el jpg para casi todo, sobretodo porque permite transparencias, lo que va genial para iconos o logos. Esto se debe a que utiliza el algoritmo de compresión sin perdida, por lo que reconstruye los datos de manera exacta a los originales. El único pero que le veo al png es que para fotos con muchos colores y virguerías puede ser mucho más denso que un jpg y ralentizar el tiempo de carga de la web.
IDEAL PARA TRANSPARENCIAS E ILUSTRACIONES, ICONOS O LOGOTIPOS
Giff: La característica principal del formato giff es que soporta animaciones y transparencias. Este formato no se usa tanto desde que apareció el png, ya que el giff era más impreciso en las transparencias.
IDEAL PARA ANIMACIONES
Peso de las fotos
El peso de las imágenes web esta íntimamente relacionado con el tiempo de carga de tu web, recordemos que para una buena experiencia de usuario es importante que la web cargue a la velocidad de la luz, con lo que presta atención al peso de las fotos y optimízalas para que pesen lo mínimo posible.
No hay un peso concreto para las imágenes web, pero si podemos marcar fronteras, en nuestro caso no solemos tolerar fotos más pesadas que 100kb, salvo en excepciones en las que no hay más remedio por las características de la foto. Imaginemos que tenemos una cabecera que ocupa toda la pantalla y de fondo tiene que aparecer un paisaje con mucho detalle. En este caso podemos dar manga ancha hasta llegar a los 500 kb, si no es un slide, ya que si nos encontramos con un slide con tres mega fotos, inevitablemente vamos a consumir muchos más recursos.
CONSEJO: EVITA LOS SLIDES
Optimizar para web
Hay muchas formas de optimizar fotografías para web, la mejor de todas es Photoshop y la opción guardar para web, que nos permite calibrar las fotos en todas los posibles formatos de archivo, permitiendo saber cual es el peso asociado a cada resolución en tiempo real viendo como pierde resolución la foto a comprimir. En el ejemplo vemos una fotografía que en su formato original pesa 3,47 mb (algo descomunal) y guardando en formato jpg a calidad mínima (lo hemos exagerado) conseguimos reducir a 44kb.
Por supuesto en este ejemplo aparece pixelado, pero subiendo la calidad del jpg a 30 se vería bien y con poco peso de imagen.
También hay softwares específicos que te permiten reducir el tamaño del archivo sin perdida de resolución, como por ejemplo JPEG mini. En el que simplemente tenemos que arrastrar las fotos y automáticamente se guardan en un peso inferior sin perdida alguna de resolución. Este software tiene una versión freemium que te permite comprimir un máximo de fotos, pero si estamos hablando de una web con unas 10 fotos, hay suficiente.
Nomenclatura Imágenes Web
El posicionamiento web para fotos también existe independientemente de la página web, y esta relacionado directamente con la misma, tenemos que tener contemplar muchos aspectos como el atributo alt, el nombre del archivo, el contexto, el tamaño del archivo, los datos exif, la descripción larga de la foto, el sitemaps de imágenes web, etc. Pero solo nos centraremos en el nombre del archivo, ya que es lo que directamente sube al servidor y al código de la página.
El nombre del archivo es un indicador del contenido de la imagen. Piensa en una imagen llamada «flor-de-primavera.jpg», lo más seguro que muestre una flor de primavera. Con lo que no vale subir una foto con nombre «DSC018374.jpg» ya que no aporta ninguna información, ni mucho menos ayuda a tu posicionamiento web.
Para optimizar el nombre tienes que ser corto y descriptivo y no es necesario incluir tanta información como en la etiqueta alt. Con un nombre más específico es más fácil que google entienda el contenido y, por tanto, tendrás más posibilidades de aparecer en una posición más prominente.
1. Describe el contenido de la imagen
2. Incluye la palabra clave principal
3. Se muy preciso (puedes excluir palabras vacías)
4. Utiliza guiones para separar palabras
5. Evita acentos, «ñ» y otros caracteres no validos en web
