M
Marketing Caribe
No recomendado
Verificado
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario popular!
Por qué es tan importante optimizar las imágenes de nuestra página web
Cuando subimos una foto a WordPress, la plataforma crea unas copias de ésta, con otras dimensiones diferentes. La idea es que, según con qué tamaño aparezca la imagen en la página, usar la imagen más pequeña en dimensiones (y, por tanto, más ligera) posible.
Foto a foto, copia a copia, todas estas imágenes pueden llegar a ocuparte muchísimo espacio en tu servidor web sin darte cuenta.
Además, cuando subimos la foto original, si esta es excesivamente “pesada” (que tiene un tamaño de archivo grande) va a ralentizar la carga de nuestro sitio web, y, además, Google entenderá que nuestra página es “lenta”, y nos bajará el posicionamiento de la página.
Pero tranquilo, en este artículo vamos a aprender a acceder a ellas y ver el tamaño que tienen, lo que ocupan en tu servidor y a optimizarlas.
Mejora la velocidad de carga
Cuando hacemos clic para navegar en un sitio web, la página tiene que cargar todo su contenido.
Por eso, cuanto menos pesadas, menos tamaño y menos número de imágenes tengamos, nuestra página tardará menos en cargarse.
Esto no solo resulta esencial para mejorar la experiencia de usuario (se ha comprobado que el 50% de los usuarios esperan que se cargue en menos de 2 segundos), sino porque cuanto más ágil sea nuestro sitio web, más le va a gustar a Google.
A su vez, esto supondrá que aparezcas más arriba o más abajo en las búsquedas de los usuarios y, por tanto, seas más visible de cara al mundo.
¿Qué es la carga diferida y como aumenta la velocidad de nuestro sitio web?
La carga diferida es una técnica que sirve para que, según estemos navegando por un sitio web, las imágenes que contiene se vayan cargando según vayan siendo visibles, y no de golpe cuando nos metemos en la página.
Como ya hemos visto, este tipo de archivos son los que más tamaño ocupan, y por lógica los que más tardan y consumen al cargarse.
Por lo que, si los vídeos e imágenes no son cargados hasta que no son necesarios supone un ahorro increíble para nuestro sitio web.
A lo largo de este post veremos la forma que consideramos más eficaz para conseguir la carga diferida en tu sitio web.
Aumenta el espacio libre del disco donde está la página
Todo el contenido que se muestra en una página web, o que forma parte de su estructura, tiene que almacenarse en un sitio, que tiene un espacio determinado.
En muchos casos, las imágenes suponen más del 50% del peso total de la página.
Si, por ejemplo, tenemos un blog de viajes donde subimos constantemente archivos de este tipo, tendremos más riesgo a ocupar mucho más espacio. Sin embargo, si tenemos un blog que tiene mucho texto y pocas imágenes, el espacio ocupado será menor.
Además, debemos acordarnos de las copias que hace WordPress de nuestras imágenes.
Es indispensable que revisemos las que son realmente necesarias.
Para que te hagas una idea vamos a poner un ejemplo. Subimos un post a WordPress con 5 fotos. La plataforma va a subir otras 4 copias de cada una de nuestras fotos (ya suma un total de 20 fotos), de las cuales, solo estamos utilizando un 20%, pero que están ocupando espacio.
Tanto en WordPress.com como WordPress con hosting (wordpress.org) los planes suelen contar con unos determinados límites de espacio, por eso, el ahorro no solo es de espacio, es de dinero.
Comprobar la velocidad de una página web con Google PageSpeed Insights
En relación con lo anterior, y como herramienta para medir la velocidad de carga de nuestro sitio web, existe PageSpeed Insights de Google. Gracias a esta página, podremos ir revisando como de rápido se carga nuestro sitio e identificar posibles fallos.
Solo tenemos que copiar la dirección de la página que queremos analizar y copiarla en su barra buscador. Nos devuelve un estudio bastante detallado sobre el qué puede estar haciendo que se ralentice la carga o qué podríamos mejorar.
Cuando analizamos una URL nos muestra todas estas métricas, junto a la nota global de nuestra página.
Cuando le damos a “analizar”, nos devuelve un análisis general de este sitio web, junto a un estudio bastante detallado sobre qué puede estar ralentizan la carga y qué se podría mejorar.
Conceptos previos: peso, tamaño y dimensión de imágenes
El peso del archivo es la cantidad de espacio en memoria o disco que ocupa nuestro archivo al almacenarlo. Se mide en bytes y depende de su tamaño en píxeles y de la profundidad de color (también en píxeles) del archivo.
Si una foto tiene un peso superior al óptimo, va a ralentizar el proceso de carga de la página en la que se encuentra. Y a los usuarios eso no les gusta (y a Google, tampoco).
En cuanto al tamaño o dimensión de la fotografía, uno demasiado grande también ralentizará nuestro sitio web, ya que aumenta su peso, y un tamaño demasiado pequeño va a disminuir su calidad y no se verá bien nuestra foto; aparte de no quedar nada estético.
El formato es la forma en la que se guarda nuestra imagen; y para cada tipo de imagen tenemos uno más adecuado que otro.
Los más utilizados hoy en día son PNG (recomendado para capturas de pantalla) y JPG (recomendado para fotografías).
Como podemos optimizar las imágenes sin perder calidad
Existen varias maneras de hacerlo, pero nosotros hemos querido traer las más sencillas y que menos problemas nos darán en un futuro:
Cada método tiene sus ventajas e inconvenientes, por eso te recomendamos que pruebes y elijas con la que te sientas más cómodo.
Pero, antes de empezar, debemos revisar la configuración de WordPress acerca de los medios, dónde se definen las condiciones de subida de nuestras fotos, independientemente del método de optimización de imágenes que elijas.
¡Sigue leyendo para descubrir más!
Configuración de WordPress para optimizar nuestras fotos
Antes, y como complemento, de la optimización de las imágenes, es imprescindible que revisemos los ajustes de WordPress.
Cuando nos metemos en el panel principal, vemos a la derecha el apartado de “Ajustes”, que a su vez contiene el apartado de “Medios”. Haz clic ahí.
En primer lugar, nos vamos a encontrar el ajuste de tamaño de imágenes, dónde se especifica que “determinan las dimensiones máximas a usar al añadir una imagen a la biblioteca de medios”.
Como hemos hablado antes, cuando subimos una foto, WordPress crea diferentes copias con distinto tamaño, con el objetivo de adaptar la imagen en función de dónde se muestra.
Por ejemplo, no es lo mismo una imagen de cabecera en el propio post, como el ejemplo de arriba, que en un listado, o cuando aparece referenciado. Como podemos ver en la siguiente imagen.
En estos dos ejemplos es fácil reconocer como WordPress usa las copias de distintos tamaños de la foto que hemos subido, y con esto nos facilita mucho el trabajo. Para conseguir manualmente este resultado, tendríamos que haber redimensionado nosotros mismos la fotografía en los distintos tamaños y posteriormente subirlas.
Pues nosotros aquí vamos a ajustar el tamaño máximo, en píxeles, que van a tener esas copias.
Existen tres categorías: miniatura, medio y grande. Cada una tiene un valor preestablecido, como el que vemos en la imagen:
En cada casilla puedes modificar la anchura y altura de las copias que generará WordPress.
La imagen que subamos se adaptará a las medidas que establezcamos, pero conservando sus proporciones originales en las copias de tamaño medio y grande.
Sin embargo, en las copias de tamaño pequeño tenemos la opción de recortar las miniaturas en las dimensiones exactas a las que determinemos aquí.
Por ejemplo, si dejamos las medidas predeterminadas de 150 x 150 y marcamos la casilla, nuestra copia será de 150 x 150.
¡Ten cuidado y calcula bien las dimensiones!
Asimismo, si la imagen original es más pequeña que las dimensiones de las copias, no sé generará.
Por ejemplo, cuando subo una foto de 800 x 600px, no sé va a generar la copia de tamaño grande (1024 x 1024), ya que no tendría sentido, no ganaría de ninguna manera calidad.
Para elegir el tamaño adecuado, debes pensar en el diseño de tu blog o página web, y adaptar las medidas de las imágenes a ello.
Herramientas para mejorar la calidad de nuestras fotos online
Una vez que hemos establecido correctamente los ajustes con los que se subirán nuestras fotos, vamos a optimizarlas. Esta opción es para editar nuestras fotos es de manera manual, mediante algunas aplicaciones accesibles para todo el mundo.
La ventaja de utilizar estas herramientas es que tienes todo el control sobre el proceso. El inconveniente es que te va a llevar un poco más de tiempo, pero si tienes un blog con pocas fotos no tendrás ningún problema.
Desde Ciudadano 2.0 te recomendamos dos de las más famosas: TinyPNG, para reducir el peso, y Picresize, para reducir el tamaño. También puedes usar Image Resizer que hace las dos cosas, pero no de una manera tan óptima como lo hacen las otras dos por separado.
Pero resaltar que, si ya dispones de una aplicación para ello instalada en tu equipo, o sueles utilizar una, perfecto. Aquí van nuestras recomendaciones:
TinyPNG: cómo reducir el peso de una foto
Esta herramienta reduce el peso de las fotografías que subamos, con una interfaz muy sencilla de usar, y nos permite subir hasta 20 archivos a la vez:
Haz clic en el recuadro que está en el centro para comenzar a comprimir las imágenes.
Para comenzar, hacemos clic dentro del cuadrado de líneas, donde pone “Drop your .png or .jpg files here!”.
Al clicar, nos abre las carpetas de nuestro ordenador, seleccionamos nuestro archivo y lo subimos:
Cuando aparezca “finished” en la barra verde, habrá terminado la compresión.
Cuando la barrita verde llegue al final, significa que ha finalizado el proceso y ya tendremos lista nuestra imagen.
Tenemos la opción de guardar las imágenes en nuestro Dropbox o descargarnos un zip con la carpeta que contiene las imágenes, haciendo clic en botón verde, donde pone “Download all”.
Cómo reducir el tamaño de una foto con Picresize
Gracias a este sitio web, podemos reducir el tamaño de nuestras fotos de manera rápida y sencilla, pudiendo subir un solo archivo o varios a la vez.
Cuando nos situemos en la página principal, veremos un cuadrado con el símbolo de una nube y una flecha. Hacemos clic ahí y buscamos dónde está nuestro archivo en nuestro ordenador.
Una vez que lo hayamos encontrado, damos clic en el botón azul “Continue to edit picture”:
Página inicial de Picresize. Haz click en el centro para comenzar.
Se nos abrirá una nueva página, donde veremos la foto elegida. Haz scroll hacia abajo, hasta que aparezca en tu pantalla esta imagen, donde debemos seleccionar las características que queremos que tenga la foto.
En el primer desplegable tenemos la opción de elegir el tamaño de nuestra foto. En este caso hemos elegido 800px de ancho, pero puedes personalizar según lo que necesites.
A la derecha vemos un cuadradito donde nos indica la estimación de las dimensiones totales que tendremos.
Si no queremos ningún efecto en nuestra foto, vamos directos al apartado del final donde pone
“Save as”, y escogemos el formato en el que vamos a descargar nuestra foto.
Cuando hayas terminado, haz clic en el botón de “I´m done, resize my picture!”:
Si son capturas de pantalla, elige mejor formato “PNG”.
Por último, llegaremos a esta pantalla, donde hacemos click en “Save to disk” para descargarnos la imagen que hemos retocado:
Haz click en “Save to disk” para descargar las imágenes.
Finalmente, se nos descargará el archivo.
Image Resizer y cómo editar el tamaño de nuestras imágenes online
Otro de los sitios imprescindibles en cuanto a la edición de fotografías es Image Resizer. Con un funcionamiento parecido a Picresize, nos encontramos una portada simple, con un botón central verde, en el que aparece la frase “Select Image”. Haz clic en él y elige la foto a editar.
Portada de la página de edición Image Resizer.
No solo tenemos la opción de reducir su tamaño, también podemos recortarla, rotarla y darle la vuelta.
En el apartado de “Resize”, debemos indicar el tamaño final que queremos. Tenemos la opción de seleccionar el ancho en píxeles, cm y muchas más medidas, así como el formato de descarga.
En la casilla de «Width» introduce los valores que quieres que tenga el ancho de tu foto.
Cuando hayas finalizado, haz clic en “Resize Image Now”.
La gran diferencia entre Image Resizer con otras herramientas de edición online, es que nos muestra en una tabla las medidas, en píxeles, de antes y después de la edición.
Tabla comparativa de las medidas originales y después de la edición.
Cuando estemos seguros de haber finalizado el proceso, hacemos clic en “Download Image”, y se nos descargará la fotografía ya editada. Tenemos la opción de descargar el archivo como .PDF, .PNG y en archivo comprimido (zip).
Los mejores plugins para optimizar imágenes en WordPress
Trabajar con los plugins de WordPress tiene muchísimas ventajas. Automatizan procesos, añaden funcionalidades… en definitiva, nos facilitan enormemente el trabajo. Y la optimización de imágenes no iba a ser menos.
Solo tendrás que elegir el que más te guste e instalarlo. Eso sí, es altamente recomendable que se revise periódicamente ya que, siempre que automatizamos perdemos cierto “control” sobre el proceso.
Pero tranquilo, no es una tarea para nada difícil y que no te supondrá más de dos minutos.
Ahora es momento de investigar las características de cada plugins y elegir el que más se adapte a nuestra manera de trabajar.
Reduce el tamaño de las fotos sin perder calidad con EWWW Image Optimizer
En número de descargas EWWW Image Optimizer se encuentra por detrás de Smush y con una valoración de 4,7 sobre 5. Este plugin también optimiza automáticamente las imágenes que elijas e incluso, las previamente subidas.
Esto nos ayudará a mejorar la velocidad de carga de nuestro sitio web.
Una de las grandes ventajas de EWWW es que las compresiones de fotos las hace a nivel local, en tu servidor, y no tiene que conectarse a uno externo, lo que se traduce en un ahorro de tiempo considerable.
Otra gran funcionalidad que tiene este plugin es poder cambiar la imagen al formato que más pequeño lo convierta. Es decir, si el plugin ve que nuestra foto va a ocupar menos en .png, nos va a sugerir cambiarlo.
Portada del plugin EWWW Image Optimizer.
Aunque es un plugin gratuito con opción a Premium, sus funcionalidades gratuitas son extensísimas. Es la gran ventaja frente a Smush, que tiene su versión gratuita mucho más acotada.
Smush: cómo optimizar imágenes para nuestra web
Con más de un millón de descargas, sin duda, uno de los más famosos por su utilidad es Smush.
Este plugin de WordPress es un “todo en uno”, que nos permite realizar las tareas necesarias para optimizar nuestras imágenes, como cambiar el tamaño automáticamente o comprimirlas.
Además, no importa que ya estén subidas, podemos ajustar imágenes de otros posts antiguos.
Para descargar el plugin, haz click en “Descargar”.
Uno (de los muchos) puntos fuertes de este plugin es su buscador de fotos de tamaño incorrecto, con el que te avisará de cualquier sospecha de error.
Sin embargo, la versión de prueba gratuita está acotada, por lo que si quieres mayor cobertura deberás pagar por ello.
Puedes comprimir imágenes en formato PNG, JPEG y GIF de hasta 32 MB, pero con un límite de 50 imágenes en su versión gratuita.
Imsanity y cómo reducir el tamaño de muchas imágenes a la vez
Imsanity, valorado con 5 estrellas, redimensiona automáticamente las imágenes que subimos a nuestro sitio WordPress, pudiéndose configurar con los parámetros que queramos.
Portada del plugin en la página de WordPress.org.
También permite escalar imágenes ya cargadas en nuestro sitio de forma masiva, lo que podría ahorrarnos muchísimo tiempo.
Es reciente y no tiene muchas descargas, pero sí actualizaciones cada poco tiempo.
Aumentar la velocidad de carga con Lazy Load
Lazy Load es un plugin gratuito con más de 100.000 descargas y una valoración de 4 sobre 5, que solo tendrás que descargar e instalar, pero no tenemos que configurar nada.
Para ir navegando por las opciones, haz clic en ellas.
El objetivo de este plugin no es el optimizar la imagen en sí, sino aumentar la velocidad de carga de tu página web mediante la carga diferida.
Este método consiste en solo cargar las imágenes que son visibles en ese momento.
Es decir, según vayamos haciendo scroll a lo largo de la pantalla, se irán cargando las demás imágenes.
¡Importante! No te olvides de que antes, nuestras imágenes tienen que estar optimizadas. Sería un complemento a todo lo anterior.
Cuando subimos una foto a WordPress, la plataforma crea unas copias de ésta, con otras dimensiones diferentes. La idea es que, según con qué tamaño aparezca la imagen en la página, usar la imagen más pequeña en dimensiones (y, por tanto, más ligera) posible.
Foto a foto, copia a copia, todas estas imágenes pueden llegar a ocuparte muchísimo espacio en tu servidor web sin darte cuenta.
Además, cuando subimos la foto original, si esta es excesivamente “pesada” (que tiene un tamaño de archivo grande) va a ralentizar la carga de nuestro sitio web, y, además, Google entenderá que nuestra página es “lenta”, y nos bajará el posicionamiento de la página.
Pero tranquilo, en este artículo vamos a aprender a acceder a ellas y ver el tamaño que tienen, lo que ocupan en tu servidor y a optimizarlas.
Mejora la velocidad de carga
Cuando hacemos clic para navegar en un sitio web, la página tiene que cargar todo su contenido.
Por eso, cuanto menos pesadas, menos tamaño y menos número de imágenes tengamos, nuestra página tardará menos en cargarse.
Esto no solo resulta esencial para mejorar la experiencia de usuario (se ha comprobado que el 50% de los usuarios esperan que se cargue en menos de 2 segundos), sino porque cuanto más ágil sea nuestro sitio web, más le va a gustar a Google.
A su vez, esto supondrá que aparezcas más arriba o más abajo en las búsquedas de los usuarios y, por tanto, seas más visible de cara al mundo.
¿Qué es la carga diferida y como aumenta la velocidad de nuestro sitio web?
La carga diferida es una técnica que sirve para que, según estemos navegando por un sitio web, las imágenes que contiene se vayan cargando según vayan siendo visibles, y no de golpe cuando nos metemos en la página.
Como ya hemos visto, este tipo de archivos son los que más tamaño ocupan, y por lógica los que más tardan y consumen al cargarse.
Por lo que, si los vídeos e imágenes no son cargados hasta que no son necesarios supone un ahorro increíble para nuestro sitio web.
A lo largo de este post veremos la forma que consideramos más eficaz para conseguir la carga diferida en tu sitio web.
Aumenta el espacio libre del disco donde está la página
Todo el contenido que se muestra en una página web, o que forma parte de su estructura, tiene que almacenarse en un sitio, que tiene un espacio determinado.
En muchos casos, las imágenes suponen más del 50% del peso total de la página.
Si, por ejemplo, tenemos un blog de viajes donde subimos constantemente archivos de este tipo, tendremos más riesgo a ocupar mucho más espacio. Sin embargo, si tenemos un blog que tiene mucho texto y pocas imágenes, el espacio ocupado será menor.
Además, debemos acordarnos de las copias que hace WordPress de nuestras imágenes.
Es indispensable que revisemos las que son realmente necesarias.
Para que te hagas una idea vamos a poner un ejemplo. Subimos un post a WordPress con 5 fotos. La plataforma va a subir otras 4 copias de cada una de nuestras fotos (ya suma un total de 20 fotos), de las cuales, solo estamos utilizando un 20%, pero que están ocupando espacio.
Tanto en WordPress.com como WordPress con hosting (wordpress.org) los planes suelen contar con unos determinados límites de espacio, por eso, el ahorro no solo es de espacio, es de dinero.
Comprobar la velocidad de una página web con Google PageSpeed Insights
En relación con lo anterior, y como herramienta para medir la velocidad de carga de nuestro sitio web, existe PageSpeed Insights de Google. Gracias a esta página, podremos ir revisando como de rápido se carga nuestro sitio e identificar posibles fallos.
Solo tenemos que copiar la dirección de la página que queremos analizar y copiarla en su barra buscador. Nos devuelve un estudio bastante detallado sobre el qué puede estar haciendo que se ralentice la carga o qué podríamos mejorar.
Cuando analizamos una URL nos muestra todas estas métricas, junto a la nota global de nuestra página.
Cuando le damos a “analizar”, nos devuelve un análisis general de este sitio web, junto a un estudio bastante detallado sobre qué puede estar ralentizan la carga y qué se podría mejorar.
Conceptos previos: peso, tamaño y dimensión de imágenes
El peso del archivo es la cantidad de espacio en memoria o disco que ocupa nuestro archivo al almacenarlo. Se mide en bytes y depende de su tamaño en píxeles y de la profundidad de color (también en píxeles) del archivo.
Si una foto tiene un peso superior al óptimo, va a ralentizar el proceso de carga de la página en la que se encuentra. Y a los usuarios eso no les gusta (y a Google, tampoco).
En cuanto al tamaño o dimensión de la fotografía, uno demasiado grande también ralentizará nuestro sitio web, ya que aumenta su peso, y un tamaño demasiado pequeño va a disminuir su calidad y no se verá bien nuestra foto; aparte de no quedar nada estético.
El formato es la forma en la que se guarda nuestra imagen; y para cada tipo de imagen tenemos uno más adecuado que otro.
Los más utilizados hoy en día son PNG (recomendado para capturas de pantalla) y JPG (recomendado para fotografías).
Como podemos optimizar las imágenes sin perder calidad
Existen varias maneras de hacerlo, pero nosotros hemos querido traer las más sencillas y que menos problemas nos darán en un futuro:
- Algunas herramientas online para hacerlo manualmente.
- Los plugins de WordPress.
Cada método tiene sus ventajas e inconvenientes, por eso te recomendamos que pruebes y elijas con la que te sientas más cómodo.
Pero, antes de empezar, debemos revisar la configuración de WordPress acerca de los medios, dónde se definen las condiciones de subida de nuestras fotos, independientemente del método de optimización de imágenes que elijas.
¡Sigue leyendo para descubrir más!
Configuración de WordPress para optimizar nuestras fotos
Antes, y como complemento, de la optimización de las imágenes, es imprescindible que revisemos los ajustes de WordPress.
Cuando nos metemos en el panel principal, vemos a la derecha el apartado de “Ajustes”, que a su vez contiene el apartado de “Medios”. Haz clic ahí.
En primer lugar, nos vamos a encontrar el ajuste de tamaño de imágenes, dónde se especifica que “determinan las dimensiones máximas a usar al añadir una imagen a la biblioteca de medios”.
Como hemos hablado antes, cuando subimos una foto, WordPress crea diferentes copias con distinto tamaño, con el objetivo de adaptar la imagen en función de dónde se muestra.
Por ejemplo, no es lo mismo una imagen de cabecera en el propio post, como el ejemplo de arriba, que en un listado, o cuando aparece referenciado. Como podemos ver en la siguiente imagen.
En estos dos ejemplos es fácil reconocer como WordPress usa las copias de distintos tamaños de la foto que hemos subido, y con esto nos facilita mucho el trabajo. Para conseguir manualmente este resultado, tendríamos que haber redimensionado nosotros mismos la fotografía en los distintos tamaños y posteriormente subirlas.
Pues nosotros aquí vamos a ajustar el tamaño máximo, en píxeles, que van a tener esas copias.
Existen tres categorías: miniatura, medio y grande. Cada una tiene un valor preestablecido, como el que vemos en la imagen:
En cada casilla puedes modificar la anchura y altura de las copias que generará WordPress.
La imagen que subamos se adaptará a las medidas que establezcamos, pero conservando sus proporciones originales en las copias de tamaño medio y grande.
Sin embargo, en las copias de tamaño pequeño tenemos la opción de recortar las miniaturas en las dimensiones exactas a las que determinemos aquí.
Por ejemplo, si dejamos las medidas predeterminadas de 150 x 150 y marcamos la casilla, nuestra copia será de 150 x 150.
¡Ten cuidado y calcula bien las dimensiones!
Asimismo, si la imagen original es más pequeña que las dimensiones de las copias, no sé generará.
Por ejemplo, cuando subo una foto de 800 x 600px, no sé va a generar la copia de tamaño grande (1024 x 1024), ya que no tendría sentido, no ganaría de ninguna manera calidad.
Para elegir el tamaño adecuado, debes pensar en el diseño de tu blog o página web, y adaptar las medidas de las imágenes a ello.
Herramientas para mejorar la calidad de nuestras fotos online
Una vez que hemos establecido correctamente los ajustes con los que se subirán nuestras fotos, vamos a optimizarlas. Esta opción es para editar nuestras fotos es de manera manual, mediante algunas aplicaciones accesibles para todo el mundo.
La ventaja de utilizar estas herramientas es que tienes todo el control sobre el proceso. El inconveniente es que te va a llevar un poco más de tiempo, pero si tienes un blog con pocas fotos no tendrás ningún problema.
Desde Ciudadano 2.0 te recomendamos dos de las más famosas: TinyPNG, para reducir el peso, y Picresize, para reducir el tamaño. También puedes usar Image Resizer que hace las dos cosas, pero no de una manera tan óptima como lo hacen las otras dos por separado.
Pero resaltar que, si ya dispones de una aplicación para ello instalada en tu equipo, o sueles utilizar una, perfecto. Aquí van nuestras recomendaciones:
TinyPNG: cómo reducir el peso de una foto
Esta herramienta reduce el peso de las fotografías que subamos, con una interfaz muy sencilla de usar, y nos permite subir hasta 20 archivos a la vez:
Haz clic en el recuadro que está en el centro para comenzar a comprimir las imágenes.
Para comenzar, hacemos clic dentro del cuadrado de líneas, donde pone “Drop your .png or .jpg files here!”.
Al clicar, nos abre las carpetas de nuestro ordenador, seleccionamos nuestro archivo y lo subimos:
Cuando aparezca “finished” en la barra verde, habrá terminado la compresión.
Cuando la barrita verde llegue al final, significa que ha finalizado el proceso y ya tendremos lista nuestra imagen.
Tenemos la opción de guardar las imágenes en nuestro Dropbox o descargarnos un zip con la carpeta que contiene las imágenes, haciendo clic en botón verde, donde pone “Download all”.
Cómo reducir el tamaño de una foto con Picresize
Gracias a este sitio web, podemos reducir el tamaño de nuestras fotos de manera rápida y sencilla, pudiendo subir un solo archivo o varios a la vez.
Cuando nos situemos en la página principal, veremos un cuadrado con el símbolo de una nube y una flecha. Hacemos clic ahí y buscamos dónde está nuestro archivo en nuestro ordenador.
Una vez que lo hayamos encontrado, damos clic en el botón azul “Continue to edit picture”:
Página inicial de Picresize. Haz click en el centro para comenzar.
Se nos abrirá una nueva página, donde veremos la foto elegida. Haz scroll hacia abajo, hasta que aparezca en tu pantalla esta imagen, donde debemos seleccionar las características que queremos que tenga la foto.
En el primer desplegable tenemos la opción de elegir el tamaño de nuestra foto. En este caso hemos elegido 800px de ancho, pero puedes personalizar según lo que necesites.
A la derecha vemos un cuadradito donde nos indica la estimación de las dimensiones totales que tendremos.
Si no queremos ningún efecto en nuestra foto, vamos directos al apartado del final donde pone
“Save as”, y escogemos el formato en el que vamos a descargar nuestra foto.
Cuando hayas terminado, haz clic en el botón de “I´m done, resize my picture!”:
Si son capturas de pantalla, elige mejor formato “PNG”.
Por último, llegaremos a esta pantalla, donde hacemos click en “Save to disk” para descargarnos la imagen que hemos retocado:
Haz click en “Save to disk” para descargar las imágenes.
Finalmente, se nos descargará el archivo.
Image Resizer y cómo editar el tamaño de nuestras imágenes online
Otro de los sitios imprescindibles en cuanto a la edición de fotografías es Image Resizer. Con un funcionamiento parecido a Picresize, nos encontramos una portada simple, con un botón central verde, en el que aparece la frase “Select Image”. Haz clic en él y elige la foto a editar.
Portada de la página de edición Image Resizer.
No solo tenemos la opción de reducir su tamaño, también podemos recortarla, rotarla y darle la vuelta.
En el apartado de “Resize”, debemos indicar el tamaño final que queremos. Tenemos la opción de seleccionar el ancho en píxeles, cm y muchas más medidas, así como el formato de descarga.
En la casilla de «Width» introduce los valores que quieres que tenga el ancho de tu foto.
Cuando hayas finalizado, haz clic en “Resize Image Now”.
La gran diferencia entre Image Resizer con otras herramientas de edición online, es que nos muestra en una tabla las medidas, en píxeles, de antes y después de la edición.
Tabla comparativa de las medidas originales y después de la edición.
Cuando estemos seguros de haber finalizado el proceso, hacemos clic en “Download Image”, y se nos descargará la fotografía ya editada. Tenemos la opción de descargar el archivo como .PDF, .PNG y en archivo comprimido (zip).
Los mejores plugins para optimizar imágenes en WordPress
Trabajar con los plugins de WordPress tiene muchísimas ventajas. Automatizan procesos, añaden funcionalidades… en definitiva, nos facilitan enormemente el trabajo. Y la optimización de imágenes no iba a ser menos.
Solo tendrás que elegir el que más te guste e instalarlo. Eso sí, es altamente recomendable que se revise periódicamente ya que, siempre que automatizamos perdemos cierto “control” sobre el proceso.
Pero tranquilo, no es una tarea para nada difícil y que no te supondrá más de dos minutos.
Ahora es momento de investigar las características de cada plugins y elegir el que más se adapte a nuestra manera de trabajar.
Reduce el tamaño de las fotos sin perder calidad con EWWW Image Optimizer
En número de descargas EWWW Image Optimizer se encuentra por detrás de Smush y con una valoración de 4,7 sobre 5. Este plugin también optimiza automáticamente las imágenes que elijas e incluso, las previamente subidas.
Esto nos ayudará a mejorar la velocidad de carga de nuestro sitio web.
Una de las grandes ventajas de EWWW es que las compresiones de fotos las hace a nivel local, en tu servidor, y no tiene que conectarse a uno externo, lo que se traduce en un ahorro de tiempo considerable.
Otra gran funcionalidad que tiene este plugin es poder cambiar la imagen al formato que más pequeño lo convierta. Es decir, si el plugin ve que nuestra foto va a ocupar menos en .png, nos va a sugerir cambiarlo.
Portada del plugin EWWW Image Optimizer.
Aunque es un plugin gratuito con opción a Premium, sus funcionalidades gratuitas son extensísimas. Es la gran ventaja frente a Smush, que tiene su versión gratuita mucho más acotada.
Smush: cómo optimizar imágenes para nuestra web
Con más de un millón de descargas, sin duda, uno de los más famosos por su utilidad es Smush.
Este plugin de WordPress es un “todo en uno”, que nos permite realizar las tareas necesarias para optimizar nuestras imágenes, como cambiar el tamaño automáticamente o comprimirlas.
Además, no importa que ya estén subidas, podemos ajustar imágenes de otros posts antiguos.
Para descargar el plugin, haz click en “Descargar”.
Uno (de los muchos) puntos fuertes de este plugin es su buscador de fotos de tamaño incorrecto, con el que te avisará de cualquier sospecha de error.
Sin embargo, la versión de prueba gratuita está acotada, por lo que si quieres mayor cobertura deberás pagar por ello.
Puedes comprimir imágenes en formato PNG, JPEG y GIF de hasta 32 MB, pero con un límite de 50 imágenes en su versión gratuita.
Imsanity y cómo reducir el tamaño de muchas imágenes a la vez
Imsanity, valorado con 5 estrellas, redimensiona automáticamente las imágenes que subimos a nuestro sitio WordPress, pudiéndose configurar con los parámetros que queramos.
Portada del plugin en la página de WordPress.org.
También permite escalar imágenes ya cargadas en nuestro sitio de forma masiva, lo que podría ahorrarnos muchísimo tiempo.
Es reciente y no tiene muchas descargas, pero sí actualizaciones cada poco tiempo.
Aumentar la velocidad de carga con Lazy Load
Lazy Load es un plugin gratuito con más de 100.000 descargas y una valoración de 4 sobre 5, que solo tendrás que descargar e instalar, pero no tenemos que configurar nada.
Para ir navegando por las opciones, haz clic en ellas.
El objetivo de este plugin no es el optimizar la imagen en sí, sino aumentar la velocidad de carga de tu página web mediante la carga diferida.
Este método consiste en solo cargar las imágenes que son visibles en ese momento.
Es decir, según vayamos haciendo scroll a lo largo de la pantalla, se irán cargando las demás imágenes.
¡Importante! No te olvides de que antes, nuestras imágenes tienen que estar optimizadas. Sería un complemento a todo lo anterior.
