Optimizar imágenes para un sitio web

By 27 noviembre, 2015 Marketing, Movilidad, Olivoworld

Vamos a afrontar este tema desde el principio para no dejarnos lo básico:

Las imágenes tienen dos tamaños asociados, principalmente:

  • El tamaño del archivo que normalmente se mide en KB o MB
  • Las dimensiones de la imagen, medidas en píxeles (px)

Ambos valores están relacionados, cuanto mayor sea la imagen más ocupa el archivo, ya os dije que íbamos por lo básico.

Podemos considerar los siguientes tamaños de partida:

  • Miniatura, 150 x 150 px
  • Medio, 300 x 200 px
  • Grande, 660 x 440 px
  • Completo, 825 x 550 px

Cuando agregamos una imagen a un post o página elegiremos el tamaño en función del espacio disponible y si no coincide con nuestra imagen cogeremos el inmediatamente superior.

Uno de los defectos más habituales es el incorporar imágenes directamente desde el formato de una cámara o de un repositorio a tamaño completo. Hay que tener en cuenta que estos archivos están normalmente a calidad de impresión por encima de 6000 x 4000 px, ocupando 7 MB, aproximadamente. Totalmente exagerado para nuestros propósitos; consecuencias: páginas que se cargan lentamente, SEO negativo, imposibles de cargar en móviles con 3G y nombres de archivo ilegibles. Todos descontentos.

¿Cúal es el tamaño ideal?

Pues en la mayoría de los casos viene determinado por nuestra plantilla para crear la página o el post. Si utilizamos wordpress como CMS, también será importante conocer el tamaño por defecto de la opción “imagen destacada”. Esta información estará en la documentación del tema, en la configuración de las imágenes de wordpress, o la obtenemos mediante medios alternativos como la inspección de páginas de los navegadores o algunas extensiones de medida. Por regla general una imagen completa en un tema rejilla es de 960 px y en un tema ampliado 1140 px (1200 px últimamente). No confundir con el fondo de la web, ya que este depende del tamaño de la pantalla que utilizamos, no de la plantilla.

Vale, os voy a relacionar algunos tamaños de fondos para tenerlos como referencia:

  • Móviles: iPhone 4 (320 x 480 px), iPhone 5 (320 x 568 px), iPhone 6 (375 x 667 px), Nexus 5 (360 x 598 px), Galaxy S5 y HTC One (360 x 640)
  • Tabletas: Galaxy Tab 7’ (600 x 1024 px), Galaxy Tab 10’ y Nexus 10 (800 x 1280 px), iPad Air (1920 x 1080 px)
  • Ordenadores: netbooks (1024 x 600 px), medianos (1280 x 800 px), grandes (1600 x 1200 px)

De ahí que un fondo mayor de 1400 x 900 px casi nunca será necesario. Eso sí, otra cosa básica, de una imagen grande podemos hacer una pequeña pero no lo contrario.

Como conclusión una imagen web debe de ser lo suficientemente amplia para su contenedor de destino, preferiblemente no más; y el archivo lo más pequeño posible sin pérdida notable de calidad (una densidad de 72 ppi – píxeles por pulgada – será suficiente). Para esto último tenemos distintas herramientas de compresión, con el formato habitual jpg (dejamos el png solo para elementos sin fondo, logos o iconos), como TinyPNG.com o plugins para wordpress como EWWW o Smush.