7 Formas De Optimizar Imágenes Para Web Y Por Qué Es Importante Hacerlo

Puede parecer lógico pensar que a mayor calidad de imagen de las fotos de una web, mejor se verá ésta, pero no es tan sencillo. Antes de decantarnos por JPG o por PNG, debéis saber que es el primero de ellos es un formato de imagen con pérdida, es decir, para hacer que ocupe menos, reducimos la calidad de la imagen. Por el contrario, el formato PNG es un formato de imagen sin pérdida.

En Quality, movemos el puntero a la izquierda de la barra para bajar el peso hasta unos 125KB por ejemplo. Podremos subirla hasta 200KB en caso de que sea la única imagen de la página. Como ves, se trata de encontrar el equilibrio entre tamaño y peso, y calidad. 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. Para saber el tamaño al que tienes que reducir una imagen, te voy a enseñar un pequeño truco. 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.

Guardaremos las fotografías complejas, con muchos colores y degradados, con la extensión jpg. Ya que su algoritmo da unos resultados de compresión de imágenes mejores. Cuando trabajemos con imágenes transparentes en formato gif, debemos revisar con atención después de guardar porque pueden dentarse los bordes haciendo que se vean mal.

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. Automatizan procesos, añaden funcionalidades… en definitiva, nos facilitan enormemente el trabajo.

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. 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. Una vez que hemos ajustado el tamaño de la imagen debemos tratar de bajar su peso lo máximo posible sin perder la calidad. Existen herramientas que nos ayudan en este proceso sin que tengamos que perder la cabeza 😁. No se pueden hacer lotes, pero si nos permite elegir 2 tipos de optimización y que las imágenes puedan ser de los siguientes formatos .jpg, .png, .gif y .svg y no mayores de 10Mb.

Se suele utilizar cuando tenemos muchas imágenes para comprimir iloveimg.com. Podemos comprimir en lote hasta un máximo de 15 imágenes en .jpg, png o gif y no podemos elegir el porcentaje de compresión. Además de reducir el tamaño también es importante que nuestra imagen pese lo menos posible para ayudar a que cargue más rápido la página web. Las imágenes son a menudo las causantes de un tiempo de carga lento en la web. Te enseñamos como reducir el tamaño de las fotos sin perder calidad. Excelentes recomendaciones, siempre es importante estar al tanto de los mejores trucos para poder optimizar imágenes en páginas web, ayudan bastante.

En esa optimización de los tiempos de carga de una web los elementos que más peso suelen tener e influencia en los tiempos de carga suelen ser las imágenes. Esta imagen y la siguiente tienen aproximadamente 8kb de tamaño, y como vemos cumple con el requisito perfecto para que ocupe poco en formato PNG , y por el contrario se necesita comprimir muchísimo para reducir su tamaño en JPG. Este formato es el ideal para mostrar fotografías o texturas, ya que es el que permite comprimir mejor este tipo de imágenes. Las imágenes de nuestra web o blog, como primera premisa, deben de estar siempre en el tamaño que se van a usar y no tener imágenes enormes que después se verán pequeñas, sino queremos aumentar el peso de la web. Una vez visto el ejemplo y cómo se pueden optimizar las imágenes que se quieren mostrar en la web, es el momento de ver cuáles son los principales beneficios que se obtienen después de haber realizado todo este proceso.

Sin duda con este plugin ayudaremos a que nuestro sitio web sea más rápido, con imágenes sin pérdida de calidad y más ligeras. Así es que si tienes una web y entre tus objetivos están, aumentar el número de visitas, obtener un buen posicionamiento web, y mejorar la experiencia de usuario, debes hacer lo posible por evitar que esta sea lenta y pesada. Es un programa para reducir tamaño de las imágenes online que te permite subir hasta 20 imágenes a la vez con un máximo de 5 Mb cada una.

️posicionamiento Web

El problema es que la resolución de estas imágenes es tan grande, que tienen un gran tamaño . Fácilmente estamos hablando de imágenes con 3, 4 ó 5 Megabytes de peso, y una resolución de 3000 x 2000 píxeles . En muchas ocasiones, las imágenes capturadas con estos dispositivos quieren utilizarse para acompañar un texto en una página web. En cambio, si prefieres hacerlo manualmente, prueba a reducir su peso y tamaño con alguna de las herramientas que hemos expuesto. Muy bien explicado, enhorabuena, como información extra añadiría que desde la version 5.4 WordPress trae por defecto la opción lazy load, para la carga diferida de imágenes cargadas desde la biblioteca de medios. 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.

Para solventar los problemas que puede causar un peso excesivo de nuestras imágenes, vamos a ver dos de las mejores para optimizar tus fotografías, mediante plugins de WordPress y herramientas de edición online. En mi caso, no acostumbro a utilizar herramientas online, además de tampoco tener mi blog en WordPress; por lo que acostumbro a usar Riot y FSResizer. Dos herramientas que se pueden usar de forma portable para Windows. También me gusta mucho y cuando se me termina la opción gratuita de tinyPNG es mi siguiente opción para comprimir imágenes.

En la casilla de “Width” introduce los valores que quieres que tenga el ancho de tu foto. 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”. 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.

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. Reduce el peso de forma totalmente imagen en la web automática y gratuita, tanto de imágenes PNG como JPG. 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.

Otros Aspectos A Tener En Cuenta Antes De Optimizar Imágenes Para Tu Pagina Web

Por ejemplo, si nuestra web cuenta con un ancho de 640 pixeles no tendría chiste que coloquemos imágenes con un ancho de 1020 pixeles, ya que solo tendríamos una imagen más pesada en nuestra web que se vería igual. Este es el plugin más conocido en cuanto a optimización de imágenes. El nivel de optimización de las imágenes es realmente increíble y además las imágenes son optimizadas automáticamente. También veremos el tamaño o peso en ese momento que se irá modificando a medida que vayamos bajando la calidad de la foto.

• Por eso, si la imagen se va a ver a un tamaño, pongamos, de 800 píxeles; no tiene sentido que subas una de 6.000 píxeles.
• Hay muchas webs que permiten subir las fotos y tenerlas listas en un segundo de forma automática, sin tocar nada.
• Utilizamos cookies para saber cuándo visita nuestros sitios web, cómo interactúa con nosotros, para enriquecer su experiencia de usuario y para personalizar su relación con nuestro sitio web.
• Aquí encontramos multitud de páginas web que comprimen imágenes, tanto gratuitas como de pago sin perder calidad.
• Solo tenemos que copiar la dirección de la página que queremos analizar y copiarla en su barra buscador.
• Como hemos visto en el apartado anterior podemos redimensionar la imagen al tamaño que nedesitemos y guardarla para web lo que optimizará al máximo la resolución para que se vea bien pero no se pierda calidad.

Y tampoco cabe en un moderno monitor con resolución HD y resolución 1920×1080. El destinatario de tus datos es Webempresa (el hosting de este blog, ubicado en España) y podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos (ver la política de privacidad). No dejes imagen en la web enlaces a tu web en el comentario, dispones del campo «sitio web» para ello. También permite escalar imágenes ya cargadas en nuestro sitio de forma masiva, lo que podría ahorrarnos muchísimo tiempo. Aunque es un plugin gratuito con opción a Premium, sus funcionalidades gratuitas son extensísimas.

Haz clic en el botón “OPEN” y selecciona la imagen que deseas abrir.-“Compress to size” – Introduce un peso no superior a 300KB comprobando que la imagen se vea bien. Si vas a usar varias imágenes dentro de un mismo post, intenta usar imágenes que pesen cerca de 150KB, intentando perder la menor calidad posible. Puedes cargar hasta 20 imágenes de 5MB máximo cada una para comprimir de una tirada. TinyPNG utiliza técnicas de compresión para reducir el tamañode los archivos PNG y JPEG. Espero que ahora tengas una idea global respecto a un tema tan importante como es optimizar correctamente las imágenes de tu web hecha con WordPress. Esto está genial si tienes un montón de imágenes y quieres despreocuparte de su impacto en los tiempos de carga.

Yo uso RIOT, y me parece fundamental utilizar un programa de este tipo para reducir el peso de las imágenes de una web. En la mayoría de los casos la reducción de tamaño es muy considerable. Esta herramienta online gratuita permite elegir elporcentaje de compresión(por defecto a 65%) yfijar una anchura máximade fotografía (en píxeles). Ya hemos comentado que Photoshop se ha convertido en la principal herramienta a la hora de optimizar las imágenes, pero no todo el mundo tiene acceso a ella o sabe utilizarla.

Si tienes varias imágenes en tu página, entonces la primera imagen debería incluir tu palabra clave objetivo. Cada imagen que le sigue debería usar una variación de esa frase, sin dejar de ser relevante para la imagen. Con estos, todo lo que tienes que hacer es subir tus fotos y la herramienta se ejecutará y descargarás tus fotos optimizadas.

Picmonkey es la herramienta que uso cuando no necesito realizar ninguna modificación de mis imágenes. Es un recurso que me gusta mucho, ya que a la hora de descargar la imagen redimensionada, te ofrece varias opciones de calidad con su consecuente diferencia de peso. Normalmente las imágenes, son las que más tiempo tardan en cargar debido a su tamaño en Mb. Por lo que cuidar estas dos características es primordial para conseguir una carga rápida de la web.

Éstaherramienta onlineprometereducir hasta un 90% el tamaño de la imagen sin una perdida perceptible de calidad. Se trata de una herramienta de compresión ligera y sencilla de utilizar. Usar Lightroom/Photoshop es la mejor forma deempezarcon la optimización de fotografías.

No obstante, tampoco es bueno abusar de ella ya que puede llegar a producir “ruido” en la imagen y hacer que ocupe más espacio. A continuación hablaremos sobre algunas recomendaciones que podemos llevar a cabo para la optimización de las imágenes. Al igual que el anterior, optimiza automáticamente las imágenes, reduciendo supeso sin sacrificar su calidad. 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.

En el vídeo-tip de hoy nos salimos un poco del repaso que estamos haciendo por todas las opciones del administrador de WordPress porque optimizar imágenes para WordPress es básico también. Algo que debes hacer desde el principio para luego no tener que volver a ello. Como puedes ver es exactamente lo mismo pero hecho de dos formas. Si no conoces muy bien Photoshop y lo único que quieres hacer es reducir el tamaño, el método 2 te resultara más rápido y fácil ya que está todo en la misma ventana.