Cómo optimizar imágenes para tu web en WordPress

Optimizar imágenes en Wordpress

Tabla de Contenidos

¿Quieres saber por qué es importante optimizar imágenes? Te lo contamos. Empecemos por el principio: todo es una imagen. Lo dice la poesía y también los mejores consejos de visibilidad en Internet. Nuestro acercamiento primero al mundo es a través de los ojos: imágenes, colores, formas. Asociamos las cosas por cómo las percibimos con los ojos. A la hora de trabajar nuestro contenido en Internet no debemos olvidar esta premisa importantísima; puesto que nos será de gran ayuda para alcanzar una interesante repercusión. Buenas imágenes serán una buena lanzadera para nuestro contenido, por eso optimizar imágenes para web online es fundamental en los tiempos que corren.

Hay una mala noticia: las fotos pesan, y a veces suelen ser las culpables de la ralentización en nuestra navegación. Google cada vez es más exigente y las webs que tardan en mostrarse suelen no tener una buena imagen para el gigante de los motores de búsqueda. Por eso, ser competentes en este aspecto de la estrategia SEO es fundamental para alcanzar el éxito. ¿Sabes cómo conseguir tener buenas fotos sin que esto desemboque en pérdida de velocidad para los lectores de tu sitio? Optimizando. Una sobreesdrújula cuyo dominio puede asegurarte una buena fluidez de lectores y clientes. Aquí te lo contamos todo acerca de cómo optimizar imágenes para WordPress, para que puedas poner tu sitio por todo lo alto.

¿Qué significa optimizar imágenes?

Sin duda hacer un trabajo estratégico y ordenado con nuestro contenido es el mejor punto de partida para obtener beneficios. Para ello resolver y gestionar adecuadamente todas las exigencias del SEO de tu web es imprescindible. Si tienes una web muy ordenada y eficiente pero tus imágenes pesan 15 MB, probablemente tu página tarde en cargar y con el correr del tiempo esto repercutirá negativamente en tu tráfico. Saber tratar adecuadamente tus imágenes, por tanto, te servirá para resolver este problema, a fin de no echar por la borda todo tu trabajo. Para conseguirlo sólo necesitas poner en práctica este consejo: Optimizar tus imágenes.

Optimizar es un término que se viene usando desde hace años en el mundo de los videojuegos y desde hace unos años, muchísimo en el territorio de la visibilidad y la eficiencia en el desarrollo de portales y blogs en Internet. Optimizar es un verbo que significa “sacar el mayor provecho posible de las herramientas que tenemos”. En el caso de las imágenes, la optimización implica ligereza sin pérdida de calidad. Es decir, conseguir que tus fotos se vean coloridas y con una buena resolución sin que eso signifique que pesen considerablemente mucho.

La forma de conseguirlo es a través de la compresión. En la compresión, se sintetizan colores sin que pierda colorido la imagen, y se consigue llevar el tamaño de la imagen al mínimo posible, sin renunciar a una buena resolución. Para tener un buen rendimiento, debes formatear tus imágenes.

Ahora bien, ¿cómo hacemos esto? Existen muchas maneras de comprimir a fin de optimizar imágenes WordPress, y en este artículo podrás encontrar algunos trucos que seguramente podrán ayudarte con tu web.

Optimizar imagenes

Las ventajas de formatear tus imágenes

Debes tener en cuenta que las imágenes representan más de un veinte por ciento del peso de tu página web, por eso es tan  importante formatearlas e implementar optimización en el contenido de tu sitio. Debes saber que es ésta una de las tareas más sencillas a realizar en lo que respecta a la eficiencia del sitio; aunque te sorprendería conocer el número de personas que se saltan este requisito y lo pagan caro. Porque no optimizar imágenes en la web, deviene páginas sumamente pesadas que no reciben una buena aceptación por parte de Google y que, a la larga, pierden tráfico a causa de este inconveniente.

Formatear las imágenes de tu sitio te permitirá mejorar la velocidad en la que se cargan las páginas de tu portal, mejorar tu SEO (al tener un sitio absolutamente competitivo para los motores de búsqueda), permitir que tus usuarios accedan a tu contenido con más facilidad y algo para nada menospreciable: ganar espacio en tus servidores, porque las imágenes ocuparán muchísimo menos lugar. Es decir, esta optimización te servirá para conseguir un tamaño de imagen adecuado para tu sitio con la máxima calidad posible.

Existen dos formas de optimizar tus imágenes: previamente a cargarlas a WordPress, usando para ello un programa de edición específico (como puede ser Photoshop) o desde el propio navegador, es decir optimizar imágenes online, para lo que existen extensiones o plugins que pueden colaborar muchísimo con la eficiencia de tu sitio. Encontrarás en este artículo un apartado específico de formas de utilizar programas de edición, extensiones apropiadas para optimizar imágenes.

A continuación te damos tres buenas razones para optimizar tus imágenes.

Mejorar la navegación móvil.

Al día de hoy más del 60% de los usuarios llegan a nuestro sitio a través de conexiones móviles. El ancho de banda de éstas es potencialmente inferior al de una red casera, es decir, a la banda ancha por cable (ADSL, fibra, etc). Cuando navegamos desde casa es posible que nunca experimentemos problemas de velocidad, pero eso sí suele ocurrir en las conexiones inalámbricas, dada su inestabilidad y la cantidad de datos que pueden enviar y recibir por segundo. Debido a estas características de las diferentes conexiones desde las que la gente puede acceder a nuestro contenido, contar con un sitio que tenga las imágenes optimizadas, nos asegurará ofrecer una experiencia más estable o segura independientemente del tipo de red que utilicen nuestros usuarios. Una web bien optimizada no representará problemas de navegación desde una red inalámbrica, así que si quieres que tus clientes lleguen y se queden, es posible que tomar esta decisión te ayude exponencialmente.

Ampliar tu cartera de clientes.

Suena a mucho pero en verdad es sumamente importante la optimización de imágenes en WordPress si queremos mantener nuestra cantidad de lectores y no perder usuarios. No sólo porque los usuarios somos bastante impacientes y aquellas webs que no se cargan enseguida solemos evitarlas, sino porque además, Google se ha vuelto muy exigente y tiende a rebotar aquellos portales que tardan demasiado en cargar. Optimizar el contenido, es decir, aligerar el peso de tu blog, será fundamental para conseguir que tus lectores lleguen y se queden.

Sacarte una buena nota en posicionamiento web.

El posicionamiento SEO del que ya habrás oído hablar muchísimo es nuestro mejor amigo. El tiempo que dedica Google a rastrear tu web es limitado, cuanto menos tiempo le lleve encontrarte y mostrarte, mejor será su idea de lo que ofreces y más páginas podrá rastrear en ese tiempo. Si a esto le sumamos que le da muchísima importancia a la carga de imágenes entre los factores de posicionamiento, entonces cuanto más optimices tu web mejor será la consideración que tenga Google de tu espacio y más posibilidades tendrás de que te recomiende.

Cómo optimizar imágenes para la web y mejorar el rendimiento

Algo que debes tener en cuenta es que en la optimización las dos cosas fundamentales son el formato de archivo y el tipo de compresión que vayas a utilizar. Dar con la combinación apropiada será vital para obtener buenos resultados. Para ello debes saber qué tipo de formato es el adecuado para tu web y la mejor forma de descubrirlo es experimentando a partir de una serie de ideas básicas, que aquí compartiremos contigo.

Elegir el formato de archivo correcto para tu portal es el primer punto a resolver. Entre los tipos de archivos se encuentran tres formatos populares: PNG (son imágenes de gran calidad pero el tamaño de archivo a veces representa una dificultad porque es un formato sin pérdida de color, lo que supone un mayor peso), JPEG (son imágenes que ofrecen un excelente equilibrio entre peso y calidad; además puedes hacer compresiones con y sin pérdida, y en cada una varía el tamaño final) y GIF (son imágenes de sólo 256 colores y cuya compresión no tiene pérdidas, lo que lo vuelve un formato muy interesante en casos de imágenes animadas).

Escoger el tipo de compresión es lo segundo que debes resolver. ¿A qué se refiere todo el mundo cuando usa esta palabra? Igual te lo vienes preguntando hace tiempo y sigues sin comprenderlo. Vamos al grano: la compresión implica crear un nuevo archivo partiendo de uno muy grande, que se caracteriza por contener la mayor cantidad de información posible, es decir, la más cercana al archivo original, pero en un tamaño más reducido.

Elija el formato de archivo correcto

Una vez que has escogido el tipo de compresión tendrás que decidir cuál es el formato de imagen adecuado para tu sitio. El mismo variará según el contenido. No sólo porque dependiendo del tipo de portal que tengas tendrás que ser más riguroso con las imágenes sino porque dentro de tu sitio no vas a utilizar el mismo formato para el logo que para las imágenes de los artículos. Si quieres ser todavía más detallista; dependiendo del tipo de imágenes de cada artículo es posible que te convenga usar diversos formatos. Hablaremos aquí de los más populares; conocer para qué es más recomendable uno u otro te puede servir de mucho para gestionar y planificar el contenido pictórico de tu sitio.

JPEG

Es un tipo de archivo con pérdida, pero cuya eficiencia de compresión es relativamente fiel al original. Se lo recomienda para fotografías amplias donde haya diversidad de tramas y colores. Suele presentar aberraciones cromáticas y defectos en determinadas zonas de la imagen, pero sigue siendo el más recomendable porque ofrece buena calidad en un tamaño reducido. Como información adicional te contamos que existen tres tipos de archivos JPEG que se consideran sin pérdida, son JPEG2000 Lossless JPEG y JPEG-LS; no obstante, raramente los encontramos y desde ya no son recomendables para el contenido digital distribuido en Internet.

PNG

PNG es un tipo de archivo comprimido sin pérdida que ofrece un altísimo detalle. Debemos señalar que en comparación con un JPEG, el PNG puede reducir muchísimo el tamaño sin perder calidad pero nunca alcanzar un peso semejante al primero. No es un formato tan recomendable, a menos que se desee conservar una altísima fidelidad con respecto al original, incluso teniendo que dar a cambio más espacio de almacenamiento.

GIF

Al día de hoy es un formato que sólo se utiliza para imágenes animadas. Su beneficio es que utiliza una paleta de color básica, por lo que permite imágenes muy livianas, aunque con una pérdida de calidad considerable.

VGS

Este formato de imágenes vectoriales es el ideal para diseños como logotipos o iconos. Es un tipo de imagen escalable que se dibuja partiendo de figuras geométricas, por lo que al aumentar o disminuir su tamaño o resolución no se pierde calidad. No obstante, no es útil para imágenes amplias puesto que requeriría de muchas figuras geométricas para componer una imagen compleja y pesaría considerablemente más.

Tipos de formato de imágenes

Calidad de Compresión VS Tamaño

Es muy importante tener claro este aspecto en la optimización de imágenes. Cuanto más pequeña es una imagen mayor será la compresión, sin embargo, si realizamos un recorte intentando guardar la mayor cantidad de información posible, conseguiremos ofrecer buenas imágenes sin que ocupen necesariamente mucho espacio. Muchos editores de imagen poseen una opción que se llama “guardar imagen para web” y que suele ser muy beneficiosa en la optimización de imágenes, porque conserva mucha información aunque reduzcas su tamaño.

Dependiendo del tipo de imagen tendrás que decidir cuáles son los detalles de los que puedes prescindir. Si es una imagen donde el color es lo más importante, deberás buscar un formato de compresión que no presente pérdidas en este aspecto y que haga el “recorte” en otro aspecto, como la resolución o el tamaño; si lo que te importa es la nitidez, entonces igual te conviene un formato de compresión que reste colorido pero no afecte la calidad del contorno de la imagen. Son todas cosas que te recomendamos que experimentes porque todo va en gustos y necesidades específicas.

Optimizar imágenes con o sin pérdida

Como ya te lo hemos adelantado existen dos tipos de compresión: compresión con pérdida (al realizar la compresión se pierde información porque hay un filtro que elimina ciertos datos, relacionados con  el tamaño o la información de color de la imagen) y la compresión sin pérdida (al comprimir el archivo los datos ocupan menos lugar pero no se reduce la calidad de la imagen). Una opción apropiada para el contenido en Internet es utilizar la opción de “imagen para web”, un tipo de compresión muy útil para perder la menor cantidad de calidad posible realizando una compresión óptima para contenido web.

Programas y herramientas para optimizar imágenes

El editor más adecuado para realizar compresión de imágenes es Photoshop, donde podremos tener un control absoluto de lo que subimos a nuestra web. Otras herramientas útiles para la compresión de imágenes son FileOptimizer, ImageOptim o ImageRecycle. Pero no nos adelantemos. Vamos a ir paso a paso para que puedas entender bien de qué se trata y cómo se realiza la optimización de imágenes web.

En primer lugar vamos a referirnos a las herramientas externas, es decir, a los programas de edición que puedes utilizar para optimizar las imágenes de tu sitio.  Entre estos programas podrás encontrar algunos que son de distribución gratuita y otros que son pagos; en algunos casos puedes usar de forma gratuita algunas prestaciones y pagar en caso de que necesites algo específico. A continuación te mostramos algunas de las que pueden serte de gran ayuda.

Adobe Photoshop.

Seguramente es la herramienta de edición por antonomasia. Con ella puedes hacer prácticamente lo que se te ocurra, consiguiendo resultados óptimos. En el caso de imágenes para tu sitio, podrás guardar en varios formatos y realizar una compresión con o sin pérdida, con buenísimos resultados. Optimizar tus imágenes con Photoshop antes de cargarlas en tu Sistema de Gestión de Contenido.

Affinity Photo.

Es una opción similar a Photoshop pero más económica. Suele ser muy utilizada en el terreno de la fotografía porque ofrece interesantes prestaciones y herramientas intuitivas y potentes. Permite crear archivos en varias capas y tiene un buen rendimiento. Si quieres tener un buen editor para la optimización de imágenes de tu sitio a un precio aceptable, seguramente Affinity Photo puede ser una buena opción.

Gimp.

Aunque suele ser menos popular que Photoshop tiene algunas prestaciones sumamente interesante, sobre todo porque es gratuito. Se trata de un programa de fuente abierta, por lo que cada día se suman mejoras desarrolladas por la gran comunidad de apasionados al diseño y la programación de aplicaciones, lo que lo convierte en un programa de edición muy recomendable para optimizar imágenes para Internet. En Gimp podrás conseguir imágenes óptimas para tu web, sólo tienes que animarte a experimentar con él.

Paint Net

Es un intuitivo programa para PCs que te ofrece una gran variedad de opciones y que resulta muy amigable, por lo que no parece complicado de utilizar. Además viene con una lista extensa de tutoriales que te vendrán de maravilla para probarlo y aprender a optimizar imágenes con él.

Redimensionando imágenes para escalarlas

¿Cuál es el tamaño en el que se muestran tus fotos? Esta pregunta es muy importante. Quizá la más relevante que debes hacerte a la hora de pensar en tu sitio. Si trabajas con una plantilla que tiene un tamaño de imagen de 669px de ancho por 400px de alto, ¿por qué subir una imagen de mayor resolución? Lo ideal sería editar la imagen en ese tamaño y subirla con esas dimensiones. Tendremos que trabajar un poquito más pero los resultados mejorarán muchísimo el rendimiento de nuestro sitio, por lo que es un esfuerzo que merece la pena hacer. Redimensionar las imágenes es, entonces, el primer paso a dar en la optimización de imágenes para WordPress.

No te preocupes. Son muchas palabras, pero una vez que lo entiendas no te resultará complicado de gestionar. Vamos a ir haciéndolo paso a paso. Ya verás lo sencillo que es y cómo con un par de ideas y de pasos puedes mejorar muchísimo el rendimiento de tu sitio. Nosotros vamos a darte las indicaciones para hacerlo en Photoshop, que es el editor que más recomendamos, pero para estos sencillos pasos no necesitas un editor profesional, así que te invitamos a probar aquel programa de edición de imágenes que te guste, para optimizar las imágenes de tu web.

Cambiar el tamaño de imagen

En primer lugar vamos a abrir nuestra imagen en nuestro editor. El siguiente paso será comprobar su tamaño. Para ello iremos a  Imagen > Tamaño de imagen. Se abrirá una ventana emergente donde aparecerá el ancho y alto de la foto, y la resolución en píxeles. Cambiaremos la información de uno de los dos parámetros (ancho o alto) dependiendo de lo que necesitemos. Por ejemplo, escribiremos en el ancho, 640. Y veremos cómo el alto se ajusta automáticamente. Debemos comprobar que ambos parámetros se encuentren ligados (la cadenita que conecta ambas opciones debe estar unida). ¡Ojo! Si la cadenita está abierta, al cambiar uno de los parámetros el otro va a mantenerse intacto y al aceptar los cambios la imagen va a recortarse según las nuevas proporciones.

Cambiar el tamaño de lienzo

Una vez que hemos hecho el recorte, vamos a ajustar su tamaño para optimizar la imagen para nuestro sitio. Vamos a Imagen > Tamaño de lienzo, para poder cambiar las medidas de la imagen sin afectar la proporción. Como ya hemos modificado la altura que necesitábamos, lo que haremos será modificar su ancho. Así que en la ventana emergente pondremos el valor en píxeles que acepta nuestro sitio; por ejemplo, 400 píxeles. Aparecerá un diagrama con flechas donde se indica de qué extremo se producirá la reducción. Si queremos que el recorte sea con nuestra imagen centrada, tendremos que conseguir que el punto blanco (que indica el foco que interesa que no se recorte) quede en el centro y todas las flechas apunten a él. Si queremos que el recorte se realice desde uno de los extremos, moveremos el punto según necesitemos. Una vez que lo aceptamos, ya tenemos la imagen del tamaño que necesitamos.

Escoger la compresión adecuada

Pero eso no es todo. Todavía hay más cosas que podemos hacer. Aplicar una compresión adecuada es lo siguiente para optimizar tu imagen. El tipo de compresión adecuada dependerá del formato de la imagen y de la cantidad de información que tenga. Si la imagen muestra una textura lisa, se adaptará muy fácilmente a cualquier tipo de compresión puesto que se trata de una imagen sencilla; pero si es una fotografía con mucho detalle de diseño y color, deberás pensar tranquilamente qué tipo de compresión te conviene para evitar que disminuya en exceso la calidad. Ya te hemos contando acerca de la compresión con y sin pérdida. Debes saber que no se trata de que una sea mejor que la otra estrictamente. La compresión con pérdida no es necesariamente mala. En ocasiones es más conveniente un archivo PNG que uno JPEG, como también te lo hemos explicado más arriba. Así que lo más importante es que confíes en tu inspiración y tu creatividad, porque si sabes tomar las decisiones adecuadas en el proceso, podrás conseguir la mejor optimización para tus imágenes.

Volvamos a Photoshop para ver las diferencias entre la imagen original y la optimizada. Tomemos la misma imagen que hemos trabajado antes para reducir su tamaño. Ahora iremos a Archivo > Exportar > Guardar para web y obtendremos una previsualización de la calidad de nuestra imagen en diversos formatos JPEG, GIF y PNG, con el peso que tendrá y el tiempo aproximado que tardará en cargarse en los servidores (estimado teniendo en cuenta nuestra conexión). Luego escogeremos el formato que más nos convenza y guardaremos la imagen para cargar a nuestro sitio. Generalmente el más recomendable es JPEG para fotografías, porque suele dar resultados equilibrados en la relación tamaño-calidad, pero tus ojos serán mejores jueces que los números, y muchas veces la compresión PNG ofrece resultados más eficientes. Presta atención a tus sentidos y escoge la mejor compresión según cada situación.

Modo progresivo (en JPEG)

Algunas consideraciones importantes a la hora de exportar tus archivos a través de Photoshop es que para cada formato existen ciertos trucos que podrán ayudarte muchísimo en la optimización.  En el caso JPEG, luego de hacer el recorte debes escoger la opción de exportación “progresiva”. De este modo te asegurarás que en la exportación se guarde la imagen en diversas capas, siendo cada una de ellas de una calidad distinta. Así, Google podrá escoger de tu servidor la imagen idónea para mostrar teniendo en cuenta la velocidad de conexión del usuario, y la experiencia de éste será eficiente. Si no guardas con esta opción, siempre se intentará cargar la imagen en la más alta calidad y, en algunos casos, como lo hemos explicado más arriba, se ralentizará la navegación.

Modo entrelazado (en PNG)

Si exportas en PNG debes asegurarte de que sea como PNG-24 y no PNG-8, ¿cuál es la diferencia entre ambos modos? Muy sencillo. La opción PNG-8 comprime hasta 256 colores y la calidad de tu imagen se parecerá más a la de un GIF, perderás muchísimo detalle en la compresión; en el caso de PNG-24 se puede llegar a comprimir conservando hasta 16 millones de colores. Por eso es más recomendable éste último. Además, en el caso de imágenes PNG debes escoger la opción de “entrelazado” al guardar la imagen para subir a tu WordPress. Así, cuando un usuario navegue por tu sitio recibirá la calidad de imagen que más se adapte a su conexión y tendrá una experiencia satisfactoria.

De todas formas, toda esta edición previa no es suficiente. Siempre podemos hacer más para optimizar nuestras imágenes y tener un buen resultado en nuestro sitio.

Optimizació de imágenes

Plugins que puedes usar para optimizar imágenes

En la actualidad casi todos los portales de Internet utilizan diseños con WordPress, el Sistema de Gestión de Contenidos más popular. Si es tu caso, también puede interesarte saber que estas herramientas vienen preparadas con numerosas opciones para mejorar tu experiencia y volver más eficiente tu sitio. Existen numerosas extensiones para la gestión de planificación SEO en nuestro WordPress, y muchas de ellas sirven para optimizar las imágenes. Tú sólo tienes que cargar las imágenes y, habiendo habilitado previamente estas extensiones, podrás conseguir que se optimicen tus fotos de forma automática. También puedes optar por la forma manual y optimizar tú mismo las imágenes usando estas extensiones.

Suele ser muy útil habilitar estas extensiones porque si ya tienes cargada una extensa galería en tu sitio y deseas optimizar todo el contenido pictórico, en pocos pasos puedes conseguir que tu sitio funcione mucho mejor. Te contamos algo: lo ideal es subir imágenes de como mucho 1.5MB porque, incluso utilizando un plugin de compresión, si subes imágenes muy pesadas, te comerán demasiado espacio en el servidor. Por esta razón, siempre lo ideal es reducir el tamaño en un programa externo (como lo explicamos en el punto anterior) y luego subirlo desde WordPress, utilizando una extensión que termine de optimizar la imagen. Así te asegurarás tener buenísimas imágenes sin renunciar a la velocidad de carga de tu sitio.

¿Y cuáles son las extensiones de compresión más recomendables? Prueba con alguna de éstas, que seguramente te volverán el trabajo más fácil.

Imagify Image Optimizer

Es una de las más conocidas dado su increíble potencial. Puedes cargar álbumes por bloque y la optimización se realizará de forma automática en todas las imágenes. Además puedes elegir entre diferentes niveles de compresión, que van desde la normal a la ultra. Te permite cambiar el tamaño de las imágenes y conservar el archivo original o reemplazarlo por el comprimido. Este servicio se encuentra disponible de forma gratuita, aunque tiene una versión paga con más prestaciones.

Imagify

ShortPixel Image Optimizer

Te permite comprimir archivos de varios tipos, incluidos PNG, GIF y PDF; se puede realizar una compresión con o sin pérdida. Convierte los archivos en galerías comprimidas, lo que mejora la rapidez de su sitio. No tiene límite de tamaño.

ShortPixel Image Optimizer

Optimole

Esta otra extensión de WordPress sirve para que al cargar cualquier imagen desde el Sistema de Gestión de Contenidos su tamaño se reduzca automática, tú no tienes que hacer nada. Además funciona de forma dinámica; esto significa que escoge la calidad de la imagen a mostrar en función del tipo de conexión del visitante, para brindarle una experiencia ágil de manera independiente de su velocidad actual.

EWWW Image Optimizer Cloud

Este plugin es otro de los favoritos. Te sirve para reducir el tamaño de las imágenes de dos formas: automatizándolo todo o personalizando cada imagen cuando la cargas en WordPress. Si bien puedes comenzar a usarlo de forma gratuita, tiene un modo pago que te permite incluso comprimir archivos en PDF y gracias al cual podrás hacer copias de seguridad de tus imágenes para no perder nada de lo que hayas hecho el último mes.

EWWW Image Optimizer

Optimus Image Optimizer

Con este plugin podemos hacer un tipo de compresión impresionante. Tanto que no notaremos diferencia entre la imagen original y la que se cargará en la navegación. Utiliza compresión sin pérdida y puedes hacer optimización en bloque, para modificar las imágenes que ya estén cargadas en el servidor. Tiene una versión gratuita, con un límite de imágenes para optimizar, o la paga, que te permite comprimir una cantidad de imágenes ilimitada.

WP Smush

La optimización se hace de forma automática cuando cargas las imágenes en tu sitio. Puedes trabajar a la vez con cincuenta imágenes, optimizando todo el contenido de tu sitio, o haciéndolo de forma manual. Soporta una gran cantidad de formatos. Tiene una versión gratuita y una de pago.

WP Smush

TinyPNG (JPGs Comprimidos también)

Tienes un límite de 100 imágenes por mes que puedes optimizar. Sin límite de tamaño, podrás convertir imágenes CMYK a RGB y reducir tus PNG y tus JPEG hasta más de la mitad de su tamaño.

TinyPNG

ImageRecycle

Una de las ventajas de este plugin es que puedes cargar una gran cantidad de imágenes y que descartará automáticamente aquéllas que tengan un tamaño inferior a 100 KB, de modo que no te hará perder el tiempo con aquellas imágenes que ya están optimizadas y no comprimirá demasiado tu contenido. Si bien se trata de un servicio pago, puedes probarlo gratuitamente durante quince días. Después podrás comprar abonos por cantidad de imágenes que quieres comprimir, es decir, no tiene un pago mensual como la mayoría de estos programas. Lo cual significa que podrás pagar, usar y cuando te quedas sin imágenes, volver a pagar, distribuyendo el uso como mejor te convenza.

Optimizar imágenes para la Web — Estudio de Caso

A la hora de optimizar las imágenes y comprobar si merece la pena debemos tener en cuenta dos cosas. En primer lugar el tiempo que tarda en cargarse la versión optimizada en proporción al que tardaba la foto sin reducción. Y lo segundo que tenemos que analizar es la calidad, es decir, cuánto hemos perdido en el proceso; esto nos llevará a pensar cuánto hemos ganado para establecer si ha merecido o no la pena. Veamos un ejemplo.

JPGs No Comprimidos

Tomamos una serie de imágenes sin optimizar y las cargamos en nuestro sitio. Con un promedio de tamaño de 15MB hemos tardado 2 segundos en cargar siete imágenes sin comprimir.

JPGs Comprimidos

Para comprobar si funcionan las herramientas de optimización escogeremos un plugin y comprimiremos las mismas imágenes. Hemos conseguido disminuir tanto los tiempos de carga (en más de un 50%) como el tamaño de las imágenes (hasta 8 veces menos); esto ha derivado en una fluidez mayor en la navegación de nuestro sitio.

Utilizando SVGs

Aquí haremos un pequeño paréntesis. Otra forma de optimizar imágenes en tu sitio es usando archivos en formato SVGs, que consiste en una imagen vectorial y como se calcula matemáticamente al dibujarse, puedes tener una imagen de altísima resolución sin ocupar tanto lugar. De todas formas, este formato sólo se recomienda con logotipos e imágenes sencillas, si es una imagen demasiado detallada o compleja a nivel diseño y color, no será un formato recomendable. No obstante, en una imagen sencilla podrás reducir el tamaño hasta en un 90%.

Tipos de archivos para imágenes

Optimizar imágenes en WordPress. Algunas prácticas

A la hora de optimizar las imágenes para tu sitio existen una serie de prácticas muy recomendables. Hemos preparado esta lista para que puedas hacer un seguimiento detallado de tus decisiones y la forma en la que pueden repercutir en tu contenido.

  • Utiliza imágenes vectoriales (es decir SVGs) siempre que te sea posible.
  • Cuando necesites un algo nivel de detalles, prueba con PNG.
  • Reserva el formato GIF sólo a las imágenes animadas.
  • Utiliza JPGEs para el resto de las imágenes donde no haya animación ni un alto nivel de detalles y color.
  • Procura siempre trabajar con imágenes que hayan sido optimizadas para web, como te hemos explicado más arriba.
  • Instala una extensión de WordPress que comprima las imágenes desde tus servidores.
  • Utiliza un servicio de CDN (red de entrega de contenidos) para que las imágenes lleguen a tus usuarios con rapidez y eficiencia.
  • Optimiza las imágenes al máximo, eliminando también datos innecesarios.
  • Carga las imágenes en las dimensiones que soporta tu sitio siempre que puedas.
  • Usa una paleta de color pequeña (reduce la profundidad de bits de la imagen).
  • Siempre debes hacer un seguimiento del sitio para saber qué cosas deben mejorarse y qué prácticas no se adaptan a las necesidades de tu sitio.
  • Por último y aunque está más relacionado con el SEO, las imágenes en WordPress siempre tienen que tener asignada una etiqueta ALT.

Etiqueta ALT en imágenes

Conclusión

Si quieres mejorar tu posicionamiento, optimizar las imágenes de tu sitio, es sumamente importante. Si reduces el tamaño de los archivos, podrás conseguir que la navegación sea más fluida y, al mismo tiempo, a Google le caerá bien tu sitio. Ten presente que cuanto mejor optimices tus imágenes más encantados quedarán los motores de búsqueda, porque notarán tu compromiso por colaborar con una navegación rápida y eficiente.

Todo es una imagen. ¿Por qué habríamos de contradecir toda una tradición poética y estética? Evidentemente, una imagen puede expresar más que muchas palabras, por eso es importante planificar adecuadamente cómo mostramos nuestro contenido. A través de las imágenes conseguimos que nuestros usuarios se sientan atraídos a nuestro sitio; y de nada sirve un exquisito material escrito si no lo acompañamos de buenas fotografías y de una adecuada optimización.

Esto significa que cuanto más linda y más óptima sea nuestra web más posibilidades tenemos de que los clientes vengan, se queden y vuelvan. Sin embargo, como te lo hemos contado en este artículo el material pictórico supone un peso importante. Esto significa que la navegación se tornará más lenta, lo que no sólo fastidiará a nuestros usuarios sino que desembocará en que Google tenga menos consideración con nuestro portal a la hora de mostrarlo. ¿No te parecen éstas buenas e imprescindibles razones para optimizar imágenes WordPress? Comienza desde hoy a trabajar en este aspecto y verás cómo en poco tiempo comienzas a notar una repercusión positiva de tu esfuerzo.

¿Te ha resultado útil este artículo? ¿Necesitas ayuda en la optimización de imágenes para tu web? No dudes en dejarnos tus comentarios y trataremos de responderte y ayudarte en lo que podamos.

Fuentes : visme.co, paredro.com

_ Te asesoramos sin compromiso _

Presupuesto diseño web​ Pide presupuesto sin compromiso

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *