Cómo Optimizar imágenes para web y WordPress +【Consejos y Buenas prácticas】

Cómo Optimizar imágenes para web y WordPress +【Consejos y Buenas prácticas】

Cómo Optimizar imágenes para web y WordPress +【Consejos y Buenas prácticas】
[prom] ([por]) 4 votos

Hoy te quiero enseñar cómo optimizar imágenes para Web y WordPress ya que esto como bien sabes es un elemento clave o factor de posicionamiento web y lo puedes hacer gratis.

Te enseñare cada una de las técnicas, herramientas, plugins que conozco y que alguna de ellas utilizo para optimizar imágenes para mi WordPress.

Para acelerar WordPress y no este lento se hace uso de herramientas y plugins con las cuales podrás comprimir imágenes png, comprimir imágenes jpg entre otros formatos conocidos.

Así que quédate conmigo y te enseñare cuales son los mejores plugins para optimizar imágenes para WordPress, programas para comprimir imágenes Online y programa para comprimir imágenes en SO Microsoft Windows.

Si tenemos un blog por ejemplo y hacemos uso de un banco de imágenes gratis sabemos que aquí no termina nuestro trabajo, ya que debemos tratar de mantener la calidad de las fotos pero optimizar su peso ya que es un factor clave de posicionamiento.

¿Por qué debo optimizar las imágenes para mi web?


Las imágenes y fotos a menudo representan una gran porción de espacio lleno en nuestro Hosting, en consecuencia debes optimizar tus imágenes para bajar el impacto que tienen en tu espacio contratado, esto también te permite hacer un ahorro en los bytes o ancho de banda consumidos por cada usuario que ingresa a tu site.

Cuanto menos recursos o solicitudes se les hagan a nuestro servidor su tiempo de respuesta será menor.

En el año 2017 la navegación móvil lego a la impresionante cifra de 50% y este 2018 va en un 52% y cabe destacar que estamos a mitad de año con lo que se estima que esto crezca mucho más respecto al año anterior.

Ahora que importancia representa estos números a la hora de optimizar nuestras imágenes y fotos para nuestra web, bueno es sencillo, la conexiones a Internet móvil son conexiones lentas y por consiguiente las páginas web con un peso bastante grande (superior a los MB) tardarán más en descargarse, esto trae como consecuencia que el usuario se vaya de tu web antes de descargarse el contenido.

Lo ideal es que tus contenidos carguen en menos de 3 segundos.

Creo que ya estamos convencidos de porqué se deben usar programa para optimizar fotos y comprimir nuestras imágenes al máximo.

¿Cómo saber el impacto de las imágenes y fotos en mi web?

Si deseas saber el impacto en tu web que tienen las imágenes puedes ir a tu cpanel a la ruta principal presiona el botón “Uso del disco”.

Ver espacio en disco en el servidor WebempresaLuego en la pantalla desplegada debes ir al final de tu pantalla y ubicar en la lista la opción o el desplegable “public_html/wp-content/uploads” con esto veras el tamaño que ocupan todo el contenido media de tu web incluyendo imágenes y fotos.

Ver espacio en disco en el servidor Webempresa

De esta manera sabes qué espacio ocupa en tu Hosting y el impacto en cuanto a velocidad de carga lo puedes visualizar a través de varias herramientas online como:

Sabias que soy diseñador de páginas web y te la puedo hacer en tan solo 15 días, te puedo hacer una Página Web en WordPress Profesional y te enseño de manera gratuita a cómo a editarla para que no dependas de terceros.

Tendrás un descuento de 10% en mi servicio de diseño de Página Web en WordPress Profesional si la alojas en algunas de las empresas de Hosting que te dejo a continuación:

Recordemos que nuestro diseño web y Hosting son piezas claves de nuestro posicionamiento web, así que has a mejor elección y comienza con el pie derecho.

Te recomiendo leer: Cómo elegir el mejor Hosting para WordPress + Comparativa Hosting WordPress 2018.

Conceptos acerca de imágenes y fotos para web

Antes de continuar y saber Cómo Optimizar imágenes para web y WordPress debes tener claros algunos conceptos acerca de nuestras imágenes y fotos como por ejemplo:

  • Resolución: Muchas veces un término que se confunde con Puntos por pulgadas (DPI) cuando esta medida se expresa con las unidades de PPI para referirse a puntos por pulgadas haciendo referencia a la cantidad de pixeles que hay en una columna y fila que forman un cuadrado de un tamaño de una pulgada, generalmente esto determina la calidad de la imagen junto al tamaño de la misma.
  • Tamaño: muchas veces se confunde con tamaño en disco, ya que este indica el peso de la imagen incluyendo su metada, pero el tamaño solo se refiere a la medida de la imagen definido por su ancho x alto.
  • Unidades de medida: Pulgadas, Centímetros y Pixeles.
  • PNG: Es un formato gráfico basado en un algoritmo de compresión sin pérdida para Mapa de bits y esta normalizado por la ISO 15948 y IETF RFC 2083
  • JPG: Joint Photographic Experts Group, es el nombre de un comité de expertos que creó un estándar de compresión y codificación de archivos e imágenes fijas con un algoritmo de compresión con pérdidas.
  • GIF: Formato de Intercambio de Gráficos, utilizado ampliamente en la Web, tanto para imágenes y fotos como regularmente usado para animaciones. formato sin pérdida de calidad para imágenes con hasta 256 colores.
  • SVG: es un formato de gráficos vectoriales bidimensionales, tanto estáticos como animados, en formato XML, cuya especificación es un estándar abierto desarrollado por el W3C desde el año 1999.

Cualidades de programas y plugins para optimizar imágenes para web y WordPress


Ya que sabemos la importancia de optimizar nuestras imágenes para la web y definiciones básicas, debemos usar programas, plugins y herramientas que nos permitan:

  1. Reducir peso y tamaño de fotos sin perder calidad.
  2. Comprimir imágenes online, si no deseas descargar programasen tu computador.
  3. Reducir tamaño de fotos para que tu web vuele.

Para esto dividí lo que verás a continuación de la manera siguiente

  • Mejores plugins para optimizar imágenes para WordPress.
  • Programas para comprimir imágenes Online.
  • Programas para comprimir imágenes en SO Microsoft Windows.

Vamos entonces a ver el fuerte de este post y para lo que estas aquí  🙄 🙄 🙄 🙄

Mejores plugins para optimizar imágenes para WordPress


Plugin Compress JPEG & PNG images – Tinypng

Plugin WordPress Compress JPEG & PNG images TinyPNG

Unos de los plugins más utilizados para optimizar las fotos e imágenes en formato JPEG y PNG. Este complemento optimiza automáticamente todas las imágenes al integrarse con los servicios de compresión de imágenes TinyJPG y TinyPNG.

Características principales:

  1. Optimiza automáticamente nuevas imágenes al cargarlas.
  2. Optimice las imágenes individuales que ya están en su biblioteca de medios.
  3. Optimización masiva fácil de su biblioteca multimedia existente.
  4. Cambie el tamaño de las imágenes estableciendo un ancho y altura máxima.
  5. Conserva los metadatos de copyright, la fecha de creación y la ubicación del GPS en las imágenes originales.
  6. Admite la compresión de PNG animados.
  7. Soporte multisitio con una sola clave API.
  8. Convierte CMYK a RGB para ahorrar más espacio y maximizar la compatibilidad.

Este complemento o plugin WordPress tiene cierta desventaja desde mi punto de vista ya que puede optimizar aproximadamente 100 imágenes por mes de forma gratuita de resto tendrás que pagar y que dicha optimización se hace en un servidor externo y no en el tuyo.

Plugin WordPress Wp smush – Smush Image Compression and Optimization

Plugin WordPress Smush Image Compression and Optimization Wp Smush

El plugin creo que más nombrado en las esferas de WordPress por algo cuenta con más de un millón de instalaciones activas y con más de 3.500 valoraciones de cinco estrellas hacen este complemento uno de los favoritos de los amantes de este CMS.

Optimiza y comprime tus imágenes que esta en la biblioteca de medios o las que están siendo cargadas

Características principales:

  1. Redimensionar imagen al momento de la carga.
  2. Comprime las imágenes en cualquier directorio.
  3. Conserva los datos EXIF.
  4. Compatible con instalaciones multisitio.

A pesar que tiene muchas instalaciones activas tiene bastantes detractores.

Plugin EWWW Image Optimizer3

Plugin WordPress EWWW Image Optimizer

Plugin que optimiza automáticamente las imágenes que vayas subiendo, también puede comprimir todas las imágenes y fotos subidas previamente y opcionalmente, convertirlas al mejor formato de archivo.

Características principales

  1. Sin limitaciones de velocidad y sin limitaciones de tamaño de archivo.
  2. Compresión máxima en los formatos más conocidos como JPEG y PNG.

Posee más de 280 revisiones con cinco estrellas y más de 600.000 instalaciones activas, lo cual lo convierten en un claro competidor de los listados anteriormente.

Plugin ShortPixel Image Optimizer

Plugin WordPress ShortPixel Image OptimizerEste plugin cuenta con los dos métodos de compresión de fotos los cuales son con pérdidas y sin pérdidas para los formatos de imágenes más comunes como por ejemplo JPEG, PNG y GIF.

También tiene un algoritmo de compresión glossy JPEG, que es una optimización con pérdida de muy alta calidad.

Características principales

  1. Comprime imágenes JPEG, PNG, GIF.
  2. Opción para convertir automáticamente PNG a JPEG.
  3. Sin límite de tamaño de archivo.
  4. Opción para convertir libremente cualquier formato JPEG, PNG o GIF.
  5. Optimiza las miniaturas así como las imágenes destacadas.
  6. Conversión de CMYK a RGB.
  7. Puede ejecutar en varios sitios web o en un multisitio con una única clave de la API.

Un plugin que se las trae y que tiene muy buena pinta en palabras.

reSmush.it Image Optimizer

Plugin WordPress reSmush.it Image Optimizer

reSmush.it Image Optimizer permite utilizar la optimización de imagen gratuita basada en la API, esta acepta archivos JPG, PNG y GIF de hasta 5MB.

Características principales.

  1. Optimizar imágenes en distinto formatos como PNG, JPEG y GIF.
  2. Optimización en bloques masivos.
  3. Plugin disponible para los CMS más usados como Drupal, Joomla, Magento y Prestashop.

Ya quiero probarlo para ver cómo le va con respecto a los demás, ya que promete bastante segun vi algunos comentarios en algunas web.

Si deseas buscar más plugin para bajar el peso de las fotos puedes colocar la palabra clave “compress image” en el repositorio de plugin de nuestro WordPress y listo.

Prueba y resultados de la optimización de imágenes y fotos con los plugins

Procedimiento de prueba:

  1. Se prepararon varias imágenes en formato JPEG y PNG.
  2. Se instalaron los plugins en una plataforma WordPress de prueba.
  3. Se compararon el peso antes de la carga respecto al optimizado.

Resultados de la optimización con plugins

Resultados:

  1. Se obtuvieron hasta un 60 a 76% de ahorro en peso de la imagen comparado con la original.

Conclusión:

Indudablemente el ganador es ShortPixel Image Optimizer junto a reSmush.it Image Optimizer.

Otro plugin que saco buenos números fue Compress JPEG & PNG images y que no debemos olvidarnos de este plugin.

 

Programas para comprimir imágenes Online


Tiny PNG y Tiny JPG

Programas para comprimir imagenes Online Tiny PNG

Es un servicio para comprimir imágenes para web Online que cuenta con la capacidad de mantener las transparencias de formatos PNG. El servicio es bastante sencillo de usar ya que cuenta con la tecnología Drop (Arrastrar y soltar) y comienza el proceso de optimización de nuestras imágenes.

Una opción ideal de cómo reducir una imagen en Photoshop es usar el plugin que ellos tienen disponible por solo 50$. Ademas de contar con los plugins para nuestro WordPress que te lo indique más arriba y para Magneto.

Con el servicio de Tiny PNG y Tiny JPG puedes comprimir imágenes de hasta 20 imágenes de 5MB cada una.

Luego de arrastrar la imagen la comprime al máximo y te permite descargar la imagen en tu computador o guardarla en Dopbox. Es espectacular este servicio y muy sencillo.

Compressor

Programas para comprimir imagenes Online compressor

Compressor.io es un servicio para comprimir fotos para la web Online, es bastante sencillo con las características de un Drag a Drop (Arrastrar y soltar) que posee dos métodos de compresión de imágenes como lo son con o sin perdida.

Acepta los formatos de fotos más usados como lo son JPEG, PNG, GIF y SVG y te permite luego de comprimir tu imagen que la misma la puedas guardar en servicios en la nube como Dropbox y Drive.

Este tipo de servicios son muy potentes pero a las vez sencillos, solo arrastras la imagen, escoges el método de compresión y listo a descargar tu foto comprimida para cargar a tu web.

Optimizilla

Programas para comprimir imagenes Online Optimizilla

Es un optimizador de imágenes en linea que utiliza un método de compresión con pérdidas para los formatos PNg y JPEG.

Puedes subir hasta 20 imágenes. Contiene también una interfaz sencilla con algunos controles para configurar el nivel de color y compresión.

Prueba y resultados de la optimización de imágenes y fotos con programas Online

Procedimiento de prueba:

  1. Se prepararon varias imágenes en formato JPEG y PNG.
  2. Se arrastraron hasta la interfaz de cada una de los programas Online para optimizar fotos.
  3. Se configuraron con compresión máximo las herramientas que permitían esto como es el caso de Optimizila.

Resultados de la optimización con programas Online

Resultados:

  1. Se alcanzaron compresiones de imágenes desde 25 hasta 73% con métodos de compresión con o sin perdida.
  2. Según tabla de arriba, Compressor  muestra clara ventaja con respecto a Tiny PNG Tiny JPG y Optimizila, donde en formatos PNGse obtuvieron ahorros de 73%.

Conclusión:

No hay mucho que decir en este apartado, creo que los resultados hablan por sí mismo, quedando como ganador Compressor.

Programas para comprimir imágenes en SO Microsoft Windows


Riot

Programas para comprimir imagenes Online Riot Radical Image Optimization Tool

Este es mi programa preferido y utilizado hasta el día de hoy para reducir tamaño de fotos sin perder calidad y para comprimir imágenes, junto con herramientas archiconocidas de SO Microsoft Windows como lo es Paint hace una mezcla explosiva.

Es un optimizador de imágenes gratuito que le permite ajustar visualmente los parámetros de compresión mientras mantiene un tamaño de archivo mínimo.

Se utiliza con una interfaz de vista única (vista dual) o de lado a lado para comparar el original con la imagen optimizada en tiempo real y al instante ver el tamaño del archivo resultante.

Características principales

  1. Podrá controlar la compresión.
  2. El número de colores.
  3. La configuración de metadatos entre otros.
  4. Seleccionar el formato de imagen (JPG, GIF o PNG) para su archivo de salida.
  5. Soporte para usar optimizadores PNG externos (optipng, pngout, etc.)
  6. Puedes convertir tu formato de PNG a JPEG y viceversa.

Brutal no. I Love this program  😳 😳 😳 😳

Puedes usar el Plugin de RIOT con su aplicación favorita tales como IrfanView, GIMP, XnView.

Prueba y resultados de la optimización de imágenes y fotos con programas de SO Microsoft Windows

El procedimiento de prueba:

  1. Peso original de 88,68KB.
  2. Formato de imagen JPEG y PNG.
  3. Reducción de color a 256 (Formato PNG).
  4. Compresión máxima.
  5. Optimizador externo PNGout Xtreme (Formato PNG).

Imagen optimizada en formato JPEG

 

Imagen optimizada en formato PNG

Resultados:

  1. Se obtuvo una compresión de 44% y 88% y respecto a la imagen original en los formatos JPEG y PNG respectivamente.
  2. Mantiene la calidad en zonas esenciales y tamaño.

Conclusión:

Una de las razones por las cuales uso este programa es que me permite comprimir al máximo mis fotos e imágenes y tener el control total de lo que elimino o no.

Por ejemplo puedo controlar la cantidad colores, las transparencias en el caso de formatos PNG, la metadata entre otros y todo esto con un visor dual que me da una idea de cómo estaba y cómo va a quedar.

Y una de las más importantes es que no haces uso de la potencia de tu servidor web para optimizar las fotos, ya que este programa lo instalas en tu computador.

Ya concluyendo el artículo


Como al principio del post te había comentado que este artículo lo iba a estructurar así, cuales son los mejores plugins para optimizar imágenes para WordPress, programas para comprimir imágenes Online y programa para comprimir imágenes en SO Microsoft Windows de manera que tuvieras a la mano varias herramientas y técnicas para optimizar imágenes para web y WordPress.

Cada una de esas secciones tiene pruebas que te ayudaran a decantarte por alguna de ellas, en su mayoría gratis.

Como buenas prácticas te recomiendo no hacer uso indiscriminado de plugin, instala los esenciales como te diste cuenta para optimizar imágenes para web y WordPress no necesariamente necesitas instalar un plugin ya que puedes hacer uso de Programas para comprimir imágenes Online o Programas para comprimir imágenes en SO Microsoft Windows.

Sin embargo a veces toca instalar lamentablemente este tipo de plugins ya que WordPress y otros plugins crean por defecto archivos thumbnails que no lo puedes actualizar a través de programas online o para pc, esto hasta ahora solo se puede a través de plugins

Por ejemplo, para mi web hago uso como bien sabes de Programas para comprimir imágenes en SO Microsoft Windows como lo es Riot, la verdad que me va genial y a un costo cero y lo complemento con el pugin reSmush.it.

Bueno, ya creo que es el final, espero haya sido de tu agrado este post, bastante trabajo que me dio pero me quedo con la satisfacción que se que te va a ayudar bastante.

No solamente te cuento cuales son las mejores herramientas para optimizar las imágenes para web y WordPress sino que también te digo con datos por qué.

Por ultimo ayúdame a ser este post social compartiendo en las redes sociales con amigos y regálame cinco estrellas al final de este artículo.

También puedes dejarme alguna duda o experiencia al respecto en la zona de comentarios si así lo deseas. Te contestaré enseguida.

Derechos de imagen destacada: Vecteezy

Artículos relacionados