¿Cómo optimizar imágenes para web? Conoce las mejores herramientas!

¿Sabías que el 57% de los usuarios abandona una web si tarda más de 3 segundos en cargar? Así es, y por eso es tan importante saber optimizar imágenes para web, y subirlas de forma correcta y con el menor peso posible.

Las imágenes influyen muchísimo en la velocidad de carga de una web, de hecho es el segundo elemento después del video que más aumenta el peso de las páginas, por eso te voy a enseñar a optimizarlas!

Por si acaso no te lo habías planteado, te adelanto que no puedes cargar en tu web las fotografías que has hecho con tu cámara réflex o las que has descargado por Internet, así tal cual están!

Para que te hagas una idea, en “bruto” pueden pesar hasta unos 10 Mb! y en general el tamaño de cada página de tu web debería ser menor que 1 Mb! Así que si pensabas subirlas así, tenemos un problema!

Pero tampoco podemos pasarnos al comprimirlas, porque entonces se verían mal, “píxeladas”, y perdería el sentido usar imágenes porque se trata de que apoyen el contenido, y hagan más compresible y amena la información.

Y ya sé que me vas a decir que no sabes Photoshop y que no tienes ni idea de esto… pero tranquilo, voy a enseñarte a reducir el tamaño por un lado, y por otro el peso de tus imágenes, tanto en Photoshop como con otras herramientas gratuitas.

1. ¿Qué significa optimizar imágenes para web?

La optimización de imágenes es el proceso de disminuir su tamaño y peso, manteniendo la mayor calidad posible.

Podemos optimizar imágenes para web mediante el uso de plugins o utilizando un software, que nos ayudarán a realizar esta tarea de forma automática o manual, y siempre con el fin de acelerar el tiempo de carga de tus páginas.

¿Quieres saber cuál es la velocidad de tu web? Compruébala aquí

Además, hacer esto nos ayudará a mejorar la experiencia de usuario, y en última instancia a posicionarnos mejor en Google, pues desde 2018 la velocidad de carga pasa a ser un factor fundamental para el posicionamiento orgánico.

Veamos más en detalle a qué nos referimos con redimensionar y comprimir nuestras imágenes.

1.1 ¿Qué es redimensionar una imagen?

Redimensionar es básicamente cambiar el tamaño de la imagen. Y para elegir la dimensión adecuada de nuestras imágenes tenemos que tener en cuenta dos factores:

1. La resolución de las pantallas.

Lo primero que tienes que saber es que el tamaño de pantalla y la resolución no es lo mismo! Te lo explico brevemente para que lo entiendas.

El tamaño se mide en pulgadas, y se refiere a la longitud de la línea diagonal que va desde la esquina superior izquierda hasta la esquina inferior derecha (o viceversa) de cualquier pantalla.

En cambio la resolución, se basa en los píxeles. Un píxel es un punto diminuto de color y es la superficie más pequeña que compone una imagen.

Es decir, una imagen está formada por un conjunto de varios píxeles. A mayor cantidad de pixeles, más alta será la definición (nitidez) de esa imagen.

Por tanto, volviendo a las pantallas, la resolución se refiere a la cantidad de píxeles que contiene dicha pantalla. Pero no se miden los píxeles totales, sino que la resolución se expresa con el número de filas y columnas que forman dichos puntos.

Por ejemplo, una pantalla Full HD tiene una resolución de 1920×1080 píxeles, lo que significa que tiene de ancho 1920 puntos o píxeles y de alto 1080.

Cada vez se aumenta más la resolución de las pantallas, lo más novedoso ahora mismo son las televisiones con resolución 4K o Ultra HD que tienen 3840×2160 píxeles.

Así que teniendo en cuenta esto, para optimizar imágenes para web te recomiendo un ancho máximo de 1920px para que tus imágenes ocupen toda la pantalla del ordenador.

2. Dónde vamos a colocar la imagen.

Lo mejor es subir las imágenes con el tamaño exacto al que se van a mostrar en la página, y para eso es necesario saber el ancho del espacio donde queremos colocar nuestra imagen.

No tiene sentido subir una imagen a 1920px para colocarla en una columna al lado de un texto, que mide 500px de ancho, o en un post dentro de un blog cuyo ancho son 800px.

En cambio, si quieres poner una imagen grande que ocupe toda la pantalla en tu página de inicio, si necesitaremos dejarla con un ancho de 1920px.

1.2 ¿Cómo saber el tamaño que ocupa una imagen dentro de una web?

Para saber el tamaño al que tienes que reducir una imagen, te voy a enseñar un pequeño truco.

Es tan sencillo como ir a la web, y en el espacio donde quieras colocarla hacer clic con el botón derecho, y elegir «inspeccionar elemento» o «inspeccionar» dependiendo de si usamos Firefox o Chrome.

Por ejemplo, imaginemos que quiero colocar una imagen justo debajo del primer párrafo de este post, hacemos clic con el botón derecho encima del párrafo, como puedes ver en esta imagen.

Nos saldrá una venta integrada en nuestro explorador con el código de la página (no os asustéis), normalmente en la parte de abajo. En un color azul nos señala exactamente el código que pertenece a esa zona (en este caso nos señala en azul “<p>…</p>” porque es un párrafo).

Si pasamos el ratón por encima de ese color azul, vemos que la zona se colorea en la web de azul clarito y nos dice en la parte superior en un bocadillo negro, la medida en píxeles: 880×90, justo lo que buscamos!

De esta forma sabemos el ancho exacto que tenemos que darle a nuestra imagen: 880px y el alto no nos importa, porque depende de nosotros y de la imagen que queramos poner, si queremos que se vea más cuadrada o más alargada.

2. ¿Qué es comprimir una imagen?

Comprimir una imagen no es otra cosa que reducir su peso, y como es lógico, lo ideal será lograr el menor peso manteniendo la máxima calidad posible.

Normalmente al reducir su tamaño, como hemos visto anteriormente, suele bajar bastante el peso, pero si se trata de una imagen muy grande, también deberemos tocar esta variable.

Como norma muy general, para optimizar imágenes para web lo mejor es que las imágenes pesen unos 100KB, pero esto no es una regla exacta, depende de cada imagen, de los colores que contiene, y sobre todo de si se pixela.

Normalmente es más que suficiente para imágenes pequeñas, pero en los slider o en portadas, que ocupan todo el ancho de la pantalla, es probable que la calidad se quede muy justa y necesitaremos subir de 100KB.

Por otro lado, si tenemos una página con una sola imagen grande, podría pesar 200KB o incluso 300KB sin problemas, porque se mantendría el peso total de la página por debajo de 1MB.

En cambio, si queremos mostrar muchas imágenes en una misma página, por ejemplo en el caso de una galería, o un proyecto, tendremos que reducir más el peso para no sobrepasar el máximo.

Como ves, se trata de encontrar el equilibrio entre tamaño y peso, y calidad.

3. ¿Qué formatos de imagen se pueden usar en Web?

Antes de comenzar a optimizar nuestras imágenes, lo último que quiero que sepas es que lo más habitual es usar 3 tipos de formatos:

JPG: Es el que más comprime, y ofrece un buen equilibrio entre calidad y tamaño. Es el formato más común por ser el ideal para imágenes y fotografías con muchos colores.

PNG: Son imágenes de mayor calidad, pero también tienen mayor tamaño. Usaremos este formato cuando necesitemos imágenes pequeñas con fondo transparente, como logotipos o iconos.

GIF: Sólo utiliza 256 colores, por lo que tiene un peso bastante bajo. Es el formato que elegiremos para imágenes animadas, por ejemplo es muy usado en banners que van cambiando de mensaje.

Descubre aquí dónde descargar imágenes gratis y profesionales para tu web!

4. Optimizar imágenes para web en Photoshop

Ahora que hemos aclarado los conceptos clave, te enseñaré a reducir el tamaño y el peso de tus imágenes en Photoshop.

Para mi éste el mejor método de optimizar imágenes para web, porque nos da un control total del proceso.

1. Abrimos nuestra imagen en Photoshop.

2. Vamos al menú Archivo – Guardar para web (dependiendo de la versión puede ser que esté dentro de la opción Exportar)

3. Saldrá una ventana, con nuestra imagen a la derecha y diferentes parámetros en la zona izquierda.

4. Abajo a la derecha nos informa sobre el peso de la imagen: 1,387 MB.

5. Lo primero es tocar el tamaño. Abajo a la izquierda nos dice la dimensión en píxeles (An: 2500 y Al: 1408). En la casilla del ancho escribimos 1920 (en caso de que vaya en un post, y usando la medida que hemos obtenido antes con el truco que os he enseñado, pondríamos 880px)

6. Vemos que al redimensionarlo a 1920px el peso ahora es de 1,187 MB. Sigue siendo muchísimo, así que, en la zona superior derecha, debajo de JPEG, vemos que tiene la máxima calidad.

7. En el apartado calidad pone 100, y vamos a ir bajando ese valor hasta que el peso sea poco más de 100KB. Vemos que a 130KB queda más o menos bien, pero como ya os he dicho esto depende de la foto, de su función, de si es algo muy importante que necesitemos que se vea muy bien y de si la página contiene más imágenes a parte de esta.

8. Podremos subirla hasta 200KB en caso de que sea la única imagen de la página.

9. Guardamos, poniendo un nombre adecuado y separado por guiones, tal y como se debe hacer de cara al SEO.

Fácil, verdad?

5. Otros programas para optimizar imágenes para web

A parte de Photoshop, hay un montón de programas en línea para optimizar imágenes para web, tanto de forma manual como de forma automática. Pero te voy a comentar sólo los que yo he probado.

TinyPNG

Es un programa en línea, muy fácil de usar. Reduce el peso de forma totalmente automática y gratuita, tanto de imágenes PNG como JPG.

Está en inglés pero no tiene ningún misterio.

Simplemente pinchas en el cuadro con línea discontinua al lado del oso panda. Se abrirá una ventana con los archivos de tu equipo y eliges la imagen que quieras de tu ordenador.

Esperas a que se comprima y le das al botón “Download” para descargarla en tu ordenador. Puedes comprimir hasta 20 imágenes de una vez.

En cuanto a los resultados, suelen ser bastante aceptables pero no siempre acierta. Puede ocurrir que haya algunas imágenes que o no bajen suficiente de peso o se vean fatal.

Es cuestión de ir probando.

Compressor.io

Es otra herramienta super fácil y automática, para optimizar imágenes para web, muy parecida a la anterior, para reducir el peso de las imágenes sin perder casi calidad. Solo tienes que seleccionar una imagen y descargarla una vez finalizado el proceso de compresión.

Permite comprimir muchos formatos: JPG, PNG, GIF y SVG.

Al contrario que TinyPNG, esta herramienta suele bajar poco el peso total de la imagen. Necesitaremos comprimirla más mediante otro metodo adicional, como usando los siguientes programas que te comento o un plugin en WordPress.

Befunky

Es un editor de fotos en línea, y permite optimizar imágenes para web en JPG o PNG de forma sencilla.

También tiene bastantes funciones gratis, como girar, recortar, editar el color, hay filtros…

Hay que hacerlo todo manualmente pero es muy fácil, te voy a enseñar paso a paso el proceso:

1. Entramos en Befunky y hacemos clic en el botón «Empezar«.

2. Selecciona la opción «Editar una foto«.

3. Arriba dale a «Open» y selecciona «Computer«. Si la imagen la tienes en tu ordenador, si no también puedes importarla desde Drive, Facebook…

4. Elige tu imagen y haz clic en «Abrir«.

5. Una vez abierta, en la izquierda vemos un menú con multitud de opciones. Por defecto está abierta la «pestaña EDIT«, y el «desplegable ESSENTIALS«. Dentro encontramos la opción «Resize«.

6. Al clicar, nos da la medida en píxeles del ancho (width) y el alto (height) de nuestra imagen. En el ejemplo vemos que el ancho es de 2500px, así que si la queremos poner en un slider, en esa casilla escribiremos la medida que necesitamos, por ejemplo 1920px. Haz clic en el botón azul con el tick!

8. Ahora arriba, vamos a Save – Computer, para guardarlo en nuestro ordenador. Y nos sale una ventana como esta, donde pondremos el nombre, elegiremos JPG en este caso al ser una imagen. En Quality, movemos el puntero a la izquierda de la barra para bajar el peso hasta unos 125KB por ejemplo.

El problema de este programa, a diferencia de Photoshop, es que no podemos previsualizar el resultado, y tenemos que elegir la calidad a ojo. Una vez guardada en nuestro equipo, comprobaremos cómo ha quedado. Y si se ve mal, habrá que repetir el proceso.

Squoosh

Es una herramienta manual de Google para optimizar imágenes para web. Es mucho más sencilla que la anterior, porque nos da las opciones justas para optimizar una imagen.

1. Selecciona o arrastra tu imagen y aparecerá dividida en dos zonas. La izquierda es la versión original y la derecha, la nueva resolución.

2. En el pequeño menú de la derecha, hacemos clic en “Resize” y lo mismo de antes, en lugar de 2500px, escribimos la medida que necesitamos.

3. En Compress, en este caso dejamos el formato que viene de JPEG, y bajamos la calidad hasta que el peso que sale abajo sea un poco más de 100KB, por ejemplo a 125KB se ve bastante bien.

La ventaja es que aquí sí podemos previsualizar el antes y el después. Y una vez que hayamos probado varias calidades, en el botón azul descargaríamos nuestra imagen optimizada.

6. Plugins de WordPress para Optimizar Imágenes para web

Lo primero de todo, decirte que no soy partidaria de abusar de los plugins en WordPress.

Si lo piensas estamos optimizando nuestras imágenes para reducir el tiempo de carga de las páginas, y el peso de nuestra web. Así que no tiene sentido aumentarlo por otro lado sobrecargando la web de plugins.

No obstante, sí pueden ser útiles cuando ya tenemos una web con más de 100 imágenes, por ejemplo en una tienda online, y sería mucho trabajo descargar todas y optimizarlas una por una en Photoshop y volverlas a subir.

También es cierto que comprimen automáticamente las nuevas imágenes que vayamos subiendo, y como ya hemos visto, algunas de las herramientas automáticas que os he comentado no bajan suficiente el peso.

Pero esto significa que comprimimos las imágenes dos veces, lo cual va a influir mucho en la calidad final, porque habrá imágenes que lo necesiten y otras no.

Para mi la mejor opción es controlar el proceso de compresión lo máximo posible. Si no es con Photoshop, Befunky o Squoosh también son buenas opciones, y de esta forma sólo tocamos la imagen una vez y elegimos el tamaño según las peculiaridades de cada una.

No obstante te dejo tres de los mejores plugins para optimizar imágenes para web.

Plugin WP Smush

El plugin WP Smush elimina la información oculta de las imágenes para reducir el tamaño sin perder calidad. Tiene una versión gratuita y trabaja con 50 archivos a la vez. Comprime tanto las imágenes nuevas como las que ya tengas cargadas en WordPress.

Lo bueno es que se puede usar el plugin manualmente y funciona con JPG, PNG y GIF.

Es muy sencillo, solo hay que instalarlo y en el menú Multimedia – WP Smush te aparecerá un mensaje con el número de imágenes que tienes sin optimizar.

Con el botón azul “Bulk Smush Now” se inicia el proceso de optimización automáticamente. Y a partir de ahí, las imágenes que subas a tu web se comprimirán automáticamente.

Plugin Imagify Image Optimizer

Creado por los desarrolladores del plugin WP Rocket, el plugin Imagify Image Optimizer permite elegir entre tres niveles de compresión, normal, agresiva y ultra. Tiene función de restaurar así que, puedes probar hasta dar con el nivel más apropiado.

La versión gratis está limitada a 25 MB de imágenes por mes.

Al igual que el anterior, optimiza automáticamente las imágenes, reduciendo supeso sin sacrificar su calidad.

Plugin Optimizador.io

El Plugin Optimizador.io es gratuito y ha sido desarrollado por Webempresa para optimizar tus imágenes sin ralentizar tu web, reduciéndolas al máximo sin perder calidad.

7. ¿Necesitas un profesional para hacer tu web en WordPress?

Si quieres que un profesional desarrolle tu web y te ayude a optimizar imágenes para web, estaré encantada de echarte una mano! No dudes en contactar conmigo!

¿Te ha gustado este post? Compártelo!