Optimiza las imágenes para que tu blog vaya como un rayo

Optimiza las imágenes para que tu blog vaya como un rayo

Un enemigo de la velocidad de tu blog son las imágenes, una web que no optimiza las imágenes está perdiendo posicionamiento y visitantes.

Además de ocupar más espacio que el texto, las fotografías dependiendo del formato o la compresión pueden ser más o menos complicadas de cargar, siendo un factor que ralentiza mucho a un sitio web por ello conviene darles un tamaño, compresión y tratamiento adecuado.

como reduzco las fotos para web
Existen muchas maneras de optimizar una imagen para tu web o blog y en este post te voy a dar algunos consejos básicos y otros mucho más pro
para que arregles en un día lo que tienes estropiciado desde hace años, esto suena bien no?.

Elige el mejor formato para guardar tus fotografías

Los formatos optimos para guardar imágenes los tienes muy claros en este post sobre formatos de imágenes y cuando usar cada cual.



Utiliza el tamaño correcto de imagen

Es muy importante que no uses tamaños enormes de imagen es raro que alguna pantalla pueda mostrar más de 1200px de ancho por lo que 1200px es buena medida incluso menos dependiendo de si tienes una barra lateral para las imágenes.

Lo ideal es medir el tamaño que vas a necesitar en tu blog con el inspector de propiedades para saber cual es el tamaño que debe tener la imagen para no pasarnos de grande ni de pequeña ya que la pixelaría demasiado.

Para descubrir el tamaño optimo para nuestra foto tenemos un método simple:

Ponemos el ratón sobre el elemento que queremos inspeccionar, clic botón derecho y vamos a inspeccionar elemento se abrirá la consola y nos dirá las medidas:

Medidas son las que muestra la web y las medidas naturales que son las del archivo.

En el caso de la foto el tamaño ideal son 662 px y yo le había dado 700px porque si algún día cambio de plantilla no es mala medida para las imágenes interiores.

Optimiza-las-imágenes-para-que-tu-blog-vaya-como-un-trueno


Por lo que debemos darle esa medida en el editor que usemos para nuestras fotos o descargarlas en la resolución más aproximada.

Guarda para web en la calidad adecuada

Si utilizas un editor estilo Photoshop puedes elegir la compresión de la imagen o la calidad en la que vas a guardar la imagen.

En la opción de guardar para web puedes indicar si quieres calidad media, alta, baja o muy alta, verás que en el ejemplo la imagen pesa en original 4,98 MB lo que es demasiado y la optimizada en calidad alta con un 60 de calidad queda en 275,3Kb mucho más reducida

Optimiza-las-fotos-de-tu-blog


Ahora la imagen quedará en su tamaño reducida a tan solo 71,89 KB lo que es más ligero y hará que cargue mejor en la web que en el tamaño de imagen original.

Dependiendo del tipo de imagen puedes usar un método más o menos agresivo de compresión.

A parte de Photoshop existe editores fabulosos que te permiten seleccionar el tamaño que necesitas para las imágenes y también programas online para optimizar en lote como Befunky o Canva

https://yoblogueo.com/10-editores-fotos-gratuitos-alucinantes/


Utilizar Thumnails

Las thumbnails son miniaturas de imagen, si ves en este blog aparece la misma imagen en 5 o 6 tamaños diferentes, yo la subo una vez en grande (optimizada) y el plugin regenerate thumbnails crea las miniaturas adecuadas para cada espacio, las mini que salen en la barra lateral, las medianas de los post relacionados…

Esto ahorra  mucho a la hora de cargar y hace que la página pese mucho menos, te recomiendo ese plugin a 100%.

No te descargues los tamaños gigantes si no te hacen falta

Si usas fotografías directamente de un stock de fotos y no quieres trabajar mucho puedes bajarlas en la resolución más aproximada, luego siempre cabe la posibilidad de recortarla en WordPress desde editar imagen.

donde encontrar imágenes gratis


Vamos a optimizar las imágenes más todavía

Hasta aquí la parte menos agresiva y como he venido optimizando las imágenes siempre para el blog, con Photoshop…

Pero en la WordCamp17 Pablo López de @desarrollowp dijo que no era bastante ya que existen métodos mucho más efectivos, también agresivos y en lote… yujuuu por cierto vale para Blogspot también.

Como podéis ver lo que baja de peso la misma imagen una vez se le aplican diferentes compresiones.

Obviamente hay algunas que pueden dejar la imagen hecha una verdadera porquería pero con una compresión agresive puede servir a no ser de que tu blog necesite imágenes nítidas y muy perfectas.

reduce-las-imagenes-de-mi-blog


En mi caso como no me iba a poner a probar todos he elegido Imagify, porque tiene la versión de navegador en la que puedes procesar imágenes sin usar wordpress, lo que me parece genial para el resto de plataformas.

mejorar-las-imagenes-para-mi-web


Tienes tres tipos de compresión, la normal para web que es bastante, la agressive es la que he aplicado a las imágenes del blog para la operación bikini y la ultra que es demasiado y sólo es aconsejable si no usas texto sobre las imágenes.

Existe la posibilidad de eliminar o dejar los datos exif (no sé para que los quieres conservar) y puedes re-dimensionar la imagen.

Lo bueno de esta app es que tienes un espacio gratis al mes 25MB para optimizar imágenes, por lo que si vas a publicar pocas te sobra hasta para optimizar fotos antiguas.

Lo he utilizado en plugin para Wordpress y me ha gustado mucho, en mi caso como tengo muchas imágenes he comprado un paquete de 4 GB para que me optimizase las imágenes anteriores, lo tuve casi un día porque tengo 932 imágenes en el blog! ahorré 400MB de espacio en disco lo que es una burrada.

ganar-espacio-reduciendo-imagenes


Una vez te registras te mandan un correo con la API key para que la pongas y configures el plugin con los ajustes que creas necesarios y la compresión que veas más adecuada, te ofrece ayuda visual para que veas en qué daña más la foto.

que-es-optimizar-imagenes


Puedes hacer que las imágenes no sobrepasen de un largo para evitar tamaños desmesurados como los que provienen de editores como adobe Spark.

La posibilidad de excluir algunos tamaños de imagen de la optimización automática es un punto a su favor.

plugins-para-optimizar-imagenes


Como puedes ver el ahorro que me supuso y eso que las optimizo con PS y las recorto bastante por lo que este plugin ha sido un hallazgo para mí.

Preguntas frecuentes sobre el optimizar fotos:

Qué es optimizar imágenes: es hacer que una foto tenga un tamaño, resolución y compresión adecuado a su uso para utilizar los recursos justos.

Es importante que las fotos tengan el tamaño correcto? : Si cuanto más justo sea el tamaño menos recursos de más ocuparán.

Puedo utilizar muchas imágenes en un post ?: Si están a tamaó y resolución correcta sí, en caso de que sean muchas y grandes puedes optar por galerías o métodos que no saturen tanto la carga.

Espero haber resuelto tus dudas respecto a la optimización de fotos y como hacer para que mejore la carga de tu web.

.

Fuente: este post proviene de yo-blogueo, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Cómo crear los mejores títulos para post Los títulos para post representan uno de los elementos más importantes para conseguir visitas, seguidores e incluso conversiones en nuestro blog. Para crear lo ...

Aprende a ahorrar gestionando tu dinero ¿Dificultades para llegar a fin de mes? Seguro que  no paran de decirte «aprende a ahorrar». Lo primero de todo ¡ten paciencia!. Entre tú y yo, ahorra ...

Recomendamos

Relacionado

Blog Posicionamiento web optimiza tu web ...

Como contábamos en nuestro post anterior donde te hablábamos de los mejores plugin de posicionamiento para SEO en wordpress, hoy nos gustaría enseñarte unos plugin que te ayudarán a optimizar tu web, y de esta forma conseguirás posicionar mejor tu web en google. ¿Te animas a descubrir que cosas te van a ayudar a posicionar tu web de wordpress en SEO? ¿Qué razones hay para usar WordPress para hacer ...

Artículos de diseño web

En el artículo de hoy os hablaremos de la importancia que tiene optimizar imágenes en WordPress para acelerar y mejorar los tiempos de carga, logrando así una experiencia de usuario más positiva. Sabemos la importancia que tienen las imágenes en las páginas webs, y es que gracias a estas se puede crear un contenido más visual y atractivo. Compaginar el texto con imágenes permite que el usuario no ...

google

La optimización de imágenes son la parte más importante de un sitio web. Son la representación visual de su contenido y deben optimizarse para una mejor experiencia de usuario. Lo primero que debe hacer es echar un vistazo a sus imágenes existentes. Si encuentra que algunas de ellas no han sido comprimidas, debería considerar eliminar su calidad o aumentar su tamaño. Pero llegados a este punto, si ...

Emprender Negocio On-line bancos de imágenes ...

¿Por qué insertar imágenes en tu Web? Como ya habrás escuchado muchas veces, una imagen vale más que mil palabras. Siempre llama más la atención una página Web con imágenes que vayan acompañando los textos. Si quieres que tu Web y Blog, luzcan profesionales y que atraigan la atención de tus lectores (potenciales clientes), te tendrás que trabajar la parte visual de tus páginas y artículos. Cuando ...

general blogs herramientas ...

Comprime las imágenes de tu sitio web y aumenta la velocidad de carga. En notas anteriores, hemos hablado sobre la gran importancia que tiene el manejo de las imágenes en la comunicación de las ideas, a través de nuestro sitio web o blog. El material gráfico es de gran importancia hoy en día y que nos ayuda a crear mensaje más eficientes. Sin embargo el tener muchas imágenes en nuestro sitio web ...

web 2.0 Servicios Web blogs ...

Comprime las imágenes de tu sitio web y aumenta la velocidad de carga. En notas anteriores, hemos hablado sobre la gran importancia que tiene el manejo de las imágenes en la comunicación de las ideas, a través de nuestro sitio web o blog. El material gráfico es de gran importancia hoy en día y que nos ayuda a crear mensaje más eficientes. Sin embargo el tener muchas imágenes en nuestro sitio web ...

Posicionamiento Web elegir imagenes web optimizar imagenes para seo

Bienvenid@ a un nuevo post de Coach2Coach. Cómo elegir y optimizar imágenes para tu web Cuando en diseño web nos referimos al contenido, no estamos hablando solamente de los textos. El contenido web es todo aquello que un usuario puede ver en una página e identificar. El contenido web, por tanto, incluye imágenes, vídeo e infografías (al fin y al cabo, imágenes). Como ya sabrás, el contenido web t ...

compresor de imágenes vía web técnica fotográfica

TinyPNG es un nuevo servicio gratuito de compresión de imágenes online que, vistas sus características técnicas y su sencillez de uso va a plantar cara a otros servicios similares. Sin duda este compresor de imágenes vía web es fundamental. No olvides anotar toda la información sobre este compresor de imágenes vía web. Aquí te describiremos todos los elementos de este compresor de imágenes vía web ...

rendimiento

Optimizar las imágenes, en términos de rendimiento web consiste en hacer que, sin perder su calidad, ocupen menos espacio en KB para que su descarga desde el servidor al navegador del cliente sea lo más rápida posible. Analizaremos varias formas de optimización de imágenes. En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio we ...

SEO

Las imágenes que utilizas en tu Blog, en tu web, no son sólo un reclamo o un añadido decorativo para tus contenido. Pueden servir a los buscadores web para comprender mejor la información que proporcionas, estructurar con mayor precisión tus contenidos dentro de su índice y potenciar tu posicionamiento sobre una determinada temática. Hay sitios web que basan la mayor parte de su contenido en imáge ...