La Optimización de Imágenes en Diseño Web

Inicio/Diseño Web/La Optimización de Imágenes en Diseño Web

Optimización de imágenes para el diseño de una web

Sin duda ante el reto de hacer la optimización de imágenes en diseño web es uno de los factores que más nos cuesta llegar a perfeccionar, sin embargo hay algunos procesos los cuales pueden ser muy sencillos de aplicar para una buena optimización de imágenes y velocidad de tu web.

En primer lugar atendamos a la lógica antes de empezar con la optimización de imágenes, es decir, veamos cómo son las imágenes que necesitamos en cada caso y para cada lugar de nuestra web y ahorremos trabajo posterior de optimización:

Imágenes en diseño web

  1. Imágenes a pantalla completa

    1. Se ha puesto de moda utilizar en el diseño una pantalla de bienvenida con una imágen y un CTA sin mostrar nada del contenido de la web, es una opción de diseño web tan válida como cualquier otra, pero sinoptimización imágenes para diseño web embargo si pensamos en el usuario y su llegada a nuestra web y en ella se encuentra sólo con una imagen, en la mayoría de los casos va a necesitar hacer uso del scroll (a menos que hayas sido tan amable de incluir en el diseño de tu landing un anchor) y ya sabemos cuanto nos cuesta recibir vistas como para encima poner las cosas dificiles a nuestros visitantes. Mi primer consejo sería eliminar esta opción y pasar directamente al contenido en el cual podrás utilizar el número de imágenes que estimes oportuno con menor trabajo de optimización de imágenes para tu landing.
    2. Si no quieres andar haciendo optimización de las imágenes en el caso de que decidas incluir en tu diseño web esta opción, el tamaño máximo de imágenes a subir será de 2000px por 1333px, con lo cual toda imagen superior a ese tamaño lo único que va a hacer es dar más peso a la web y por tanto mayor trabajo de optimización de imágenes.
  2. Imágenes de cabecera (header)

    1. Las imágenes de cabecera son el otro gran reto, si vas a utilizar slider, algo muy de moda pero bajo mi punto de vista aporta un trabajo extra de optimización y pienso que irá desapareciendo, cómo si vas a utilizar una imagen fija, no necesitas más de 1900px de ancho, el alto es cosa tuya e irá en función del diseño de la web, a mi me gusta quedarme entre los 400 y 500px cómo máximo, este tamaño permite visualizar mayor cantidad de texto y a su vez me ahorra trabajo de optimización.optimización de imágenes para el header
  3. Imágenes en el contenido

    1. Si bien Google dijo hace ya bastante tiempo a la hora de indexar el mejor formato de imágenes; el bot entendía mejor era el tamaño de 1024px por 512px, ahora estamos constantemente hablando de experiencia de usuario. ¿Entonces porqué seguir utilizando ese formato? Una imagen de 1024px en un diseño web encajado te ocupa todo el ancho de pantalla; el ancho en diseños web encajados es de 1170px, sin embargo si seguimos la tendencia de mostrar contenido a pantalla completa podemos jugar con otros tamaños de imagen; al efectuar tu elección, si quieres evitar la posterior optimización, recuerda descontar al ancho de la imagen el tamaño de la barra lateral si la vas a utilizar.
    2. En definitiva, una vez pensado el diseño de la web, nos damos cuenta que lo más habitual es presentar imágenes justificadas a derecha e izquierda del texto correspondiente, por lo tanto en formato encajado la mejor optimización sería inferior 550px. ¿De qué sirve subir una imagen a 1024px si vamos a tener que proceder a su optimización después?
    3. En el diseño web en formato a pantalla completa tampoco tiene sentido utilizar imágenes a 1024px de ancho, si tenemos en cuenta la zona útil la cual es de 1900px el mayor tamaño admitido en nuestro diseño con imagen justificada a derecha o izquierda va a ser de 950px y debemos pensar también en la separación entre columnas, en función del cual el tamaño de la imagen va a disminuir.optimización imágenes diseño de una web
  4. Imágenes destacadas en el blog

    1. En este caso las imágenes destacadas del blog son miniaturas de la imagen original; y depende mucho del formato de presentación elegido en nuestro diseño del blog; si va a ser un diseño en formato Time Line podemos jugar con imágenes a 1024px, sin embargo últimamente desde la aparición de Pinterest; son cada vez más los desarrolladores que ofrecen a los clientes diseños en grid a varias columnas; diseño el cual se asemeja mucho al formato de presentación de los tableros de Pinterest; estos diseños en grid son más vistosos, más intuitivos y permite al usuario al acceder a nuestro blog visualizar varios post a la vez.
    2. Si decidimos utilizar diseños en grid y no queremos pasar después por la correspondiente optimización de imágenes; lo más adecuado va a ser utilizar directamente el ancho y alto de imagen exacto el cual se va a presentar en el grid de nuestro blog en función del número de columnas a utilizar; si queremos se visualice todo ordenado o si queremos que el diseño se asemeje al de Pinterest; donde el alto varía en función de la imagen destacada; es una cuetión puramente de gustos y ahí será la opinión de nuestro cliente quien decida el diseño definitivo; en cualquier caso nunca vamos a tener imágenes a 1024px. ¿Para qué complicarnos y después andar con la optimización de las imágenes?. Carguemos directamente el tamaño de imagen en función del ancho de columnas que vayamos a utilizar, teniendo en cuenta la separación entre columnas a aplicar.
    3. En el siguiente esquema podemos ver cómo sería el ancho en función de las distintas distribuciones de columnas y del ancho del diseño, tanto a full screen como encajado.

Ejemplo a 4 columnas

optimización imagenes diseño web en grid
optimización imagenes diseño web en grid
optimización imagenes diseño web en grid
optimización imagenes diseño web en grid

Ejemplo a 3 columnas.

optimización imagenes diseño web en grid
optimización imagenes diseño web en grid
optimización imagenes diseño web en grid
  1. Imágenes en el Background

    1. Las imágenes del Background; en el caso de utilizarlas, nos sucede más o menos lo mismo que con las de bienvenida a tamaño completo; el ancho máximo el cual vamos a poder utilizar es de 2000 px y el alto va a variar en función del diseño elegido; no soy muy amigo de utilizar este recurso en mis diseños; prefiero utilizar distintas imágenes en parallax intercaladas entre los distintos bloques de texto, pero si decides optar por el uso de background mi consejo; para no trabajar después en la optimización de imágenes, sería utilizar el formato visto anteriormente de 2000px por 1333px.

Cómo vemos la optimización de imágenes es un tema simple si lo planteas adecuadamente desde su inicio; seguramente te va a ahorrar mucho tiempo y espacio en tu servidor.

Optimización de imágenes con Photoshop

Si hay una buena herramienta para la optimización de imágenes es sin duda Photoshop; se trata de una aplicación de pago, pero para mi es realmente rentable. Veamos como sería el proceso de optimización:

  1. Abrimos con Photoshop la imagen a la cual vamos a aplicar la optimización
  2. Seleccionamos en el menú superior imagen y navegamos hasta la opción tamaño; aquí se abre una pantalla emergente, en la cual podemos seleccionar el tamaño de imagen deseado para utilizar en la optimización.
  3. En el menú superior navegamos por el menú archivo donde encontraremos la opción guardar para web; aquí podemos volver a seleccionar el tamaño de imagen y en función de donde la vayamos a situar dentro de nuestra página; seleccionamos la resolución deseada para la optimización; en mi caso acostumbro a utilizar imágenes con 72ppp de resolución; pero según el detalle de la imagen podemos llegar incluso a 50ppp y vemos cómo una imagen con un peso alrededor de 6 Mb antes de su optimización; se convierte ahora en una imagen con un peso alrededor de 300 Kb después de la optimización; si es posible la guardamos en jpg, a menos que queramos utilizar fondos transparentes y en cuyo caso seleccionaremos png24 para su optimización; es necesario saber que las imágenes png pesan más que las jpg en las mismas condiciones de optimización.
  4. Repetimos la operación de optimización para tantos tamaños de imagen como vayamos a utilizar; una vez hecho el proceso y ya tendremos nuestras imágenes en perfecto estado de optimización.

Optimización de imágenes con Plugin

optimización de imágenes con pluginSi utilizamos WordPress, como es mi caso, o cualquier otro CMS debemos saber que automáticamente al subir la imagen genera un conjunto de miniaturas en función de donde se vaya a presentar la imagen, si la imagen subida ya está en perfecto estado de optimización las miniaturas van a coger el peso adecuado, recuerda regenerar las miniaturas antes de la optimización, pero en determinadas ocasiones podemos observar que las miniaturas presentan pesos superiores a la imagen inicial, en estos casos podemos optar por hacer la optimización manualmente o bien utilizar alguno de los plugin existentes en el mercado, hasta hace relativamente poco siempre utilizaba wp smush para mis optimizaciones, pero desde hace ya algunos meses estoy utilizando Shortpixel, es un plugin de pago, pero los resultados son simplemente espectaculares.

Plugin Shortpixel

Mi buen amigo Alex Florescu de Shortpixel me ofreció la oprtunidad de probar este plugin de optimización de imágenes; y debo decir que ya me he enganchado a él; tiene distintos precios en función del número de optimización de  imágenes que necesitemos; desde un plan gratuito que te permite la optimización de 100 imágenes al mes; hasta planes mucho más completos que permiten la optimización de 50000 imágenes pagando una sóla vez por ello; puedes encontrar todos los planes de precios en la página oficial de Shortpixel.

También puedes hacer la optimización online de hasta 20 imágenes; admite formato jpg, png o gif  sin coste alguno; lo cual os permite comprobar la eficacia del plugin antes de su compra.

Tanto el servicio cómo la optimización son espectaculares comparado con wp smush; el nivel de compresión es mucho mayor y aporta una mejor optimización; la aplicación además guarda un backup de las imágenes fruto de optimización por si quieres revertir el proceso; para mí es, sin duda el mejor plugin de optimización actualmente en el mercado.

La optimización de imágenes en diseño web es una de las principales claves de optimización del diseño de una web.

Rating: 5.0. From 28 votes.
Please wait...
2017-03-15T07:28:49+00:00