Cómo optimizar las imágenes antes de subirlas a WordPress

Este es un post invitado de Manuel Vicedo de CPO.

Cuando hablamos de contenidos en la Web, muchas veces nos limitamos a pensar sólo en los textos y el copywriting. Pero si lo piensas bien, en realidad es mucho más que eso: crear contenidos de calidad también implica trabajar con elementos visuales diversos: gráficos, tablas, vídeos… Incluso las infografías que son un elemento visual muy poderoso para alimentar nuestros contenidos. Pero de todos esos elementos visuales, el más importante es sin duda la imagen. Muchas veces, utilizar la imagen correcta para acompañar una página de venta puede marcar la diferencia entre lograr convertir al visitante o no, y asegurarnos de que esté optimizada es tan importante como redactar nuestro marketing copy.

optimizar imágenes WordPress

 

Optimizar las imágenes en WordPress

Uno de los aspectos más descuidados de un sitio en WordPress es el uso que se le da a las imágenes. Esto no es sólo porque se utilice material gráfico de poca calidad, sino más bien porque no se sigue una preparación correcta de cada foto antes de su uso en la página web. En más de una ocasión, he visto cómo se han utilizado imágenes de stock de calidad en una página web sin modificarlas previamente. Y como resultado, la página acaba desaprovechando gran parte de su potencial y ahuyentando a las visitas. Algunos de los problemas que pueden surgir al olvidarse de optimizar las imágenes son:

  • Tiempos de carga más elevados, especialmente al utilizar imágenes de alta resolución que luego se muestran con unas dimensiones muy inferiores.
  • Fotos desenfocadas o descentradas al ser recortadas para crear miniaturas, debido a que WordPress es incapaz de reconocer el punto central de una foto.
  • Páginas carentes de vida que no transmiten energía o un mensaje fuerte si las imágenes están desaturadas o no tienen el contraste suficiente.

Cómo preparar imágenes antes de subirlas

Sin importar qué tipo de imagen vayas a utilizar en tu página web, siempre es recomendable darles un repaso para optimizarlas adecuadamente. Esto ocurre tanto con WordPress como con cualquier otro gestor de contenidos, ya que a fin de cuentas será tu página la que deba mostrar esas imágenes. Optimizar tus imágenes no es difícil. Y aunque al principio puede parecer algo reservado para diseñadores gráficos, en realidad se trata de una serie de ajustes muy simples para realzar los puntos fuertes de una foto. Vamos a echarle un vistazo a los detalles más importantes a tener en cuenta.

Cómo optimizar las imágenes antes de subirlas a WordPress, trucos y consejos fáciles.Haz click para twittear

Determina su uso

Antes de ponerte a optimizar una imagen, lo primero que debes tener claro es para qué las vas a utilizar. Si tienes una tienda online, no es lo mismo tratar una imagen que será utilizada en tu pase de diapositivas a pantalla completa que una fotografía a detalle de tus productos. Lo más importante que debes tener en cuenta es el contexto en el que se utilizarán, y sobre todo el tamaño que deberán tener. Algunas imágenes son más importantes que otras, y las dimensiones que tengan también puede influir en el nivel de detalle que te puedes permitir. Recuerda, cuanto más detallada sea una foto, más pesará y más lenta será tu página.

Ajusta las dimensiones

preparar una imagen

Quizás el error más común que se suele cometer al subir una imagen es olvidarse de comprobar su tamaño original, haciendo que sean excesivamente pesadas y ralenticen la velocidad de carga de la página web. Para cualquier imagen digital, unas dimensiones mayores significa un mayor tamaño de archivo.

Teniendo en cuenta el punto anterior, siempre es recomendable reducir una imagen hasta las dimensiones máximas que vaya a tener en la página. Es decir, si el ancho de tus artículos no supera los 700 píxeles, subir imágenes con un ancho mayor to te aportará ninguna ventaja. Por el contrario, su peso será mayor y tardará más en cargar.

Para ajustar las dimensiones de una imagen puedes utilizar un programa de edición fotográfica como Adobe Photoshop. Si este software se encuentra fuera de tu alcance, puedes probrar a utilizar GIMP en su lugar. Para la gran mayoría de páginas, recuerda que el ancho máximo que suelen tener es de 1100 píxeles como mucho. Los temas WordPress y sitios web siempre se diseñan en torno a una anchura de unos 960 píxeles (para soportar pantallas de 1024; sin embargo, con la llegada de los diseños responsivos este ancho puede variar un poco para acomodar pantallas más grandes (de 1280). Si por ejemplo echas un vistazo al diseño de este blog, y ajustas el ancho de la ventana del navegador, verás que el contenido puede adaptarse.

Realza los colores y detalles

Si acostumbras a tomar tus propias fotografías o acostumbras a utilizar imágenes salidas directamente de la cámara, es probable que les falte color o definición. Aunque esto es un factor puramente estético, darle más vida y color a tus fotos es una buena forma de hacer más atractivo tu sitio web. Con ello seguramente lograrás mayores conversiones, ya que reforzarás el aspecto visual de tus páginas y darás más credibilidad a tu marca. Retocar las imágenes para lograr que tengan más color es simplemente cuestión de jugar con la saturación, el brillo, y el contraste. En Photoshop, esto es bastante sencillo de hacer, y vamos a verlo con un ejemplo práctico– una foto tomada con un móvil:

Saturación

Para modificar la saturación de una imagen, presiona Ctrl + U o abre el menú Imagen, y busca Tono/Saturación bajo el submenú Ajustes. En la ventana emergente, te bastará con ajustar el control de Saturación. Para la mayoría de imágenes, en especial fotografías que no sean de stock, un ajuste de +10 o +15 debería ser suficiente. Ante todo, ¡procura no sobresaturar la imagen! foto-saturada

Brillo y contraste

Para cambiar el contraste y el brillo, tendrás que abrir el menú Imagen, y en el submenú de Ajustes ir a Brillo/Contraste. Si la imagen que estás retocando es un poco apagada, conviene subir tanto el brillo (unos 25 puntos) como el contraste (de 30 a 50 puntos dependiendo de la foto). Con esto verás cómo tu foto cobra vida de forma instantánea. foto-brillo-contraste

Un extra: nitidez

Por último, si estás usando Adobe Photoshop, puedes probar a aumentar la Nitidez de la imagen. Esto lo puedes conseguir abriendo el menú de Filtros, y buscando la opción Afilar. Esto hará que tus imágenes cobren más detalle, pero ten cuidado: si la foto ya tiene mucha nitidez se verá muy sobrecargada, y puede que sea mejor dejarla tal cual. foto-afilada Como puedes ver, el cambio habla por sí mismo. Retocar una foto para sacar los tonos vivos es una forma excelente para reforzar el branding de tu página, en especial si estás vendiendo algún producto a tus visitantes. ¿Cuál de los dos lugares te apetecería más visitar? ¿El de la izquierda o el de la derecha?

Comprímelas para la Web

Un último paso que puedes dar para optimizar tus imágenes es utilizar un compresor que las haga más ligeras. Por un lado, al guardar tus imágenes en Photoshop es importante que lo hagas mediante la opción Guardar para Web (utilizando Ctrl + Alt + Shift + S). Esta opción está pensada para crear imágenes más ligeras y optimizadas, de forma que carguen más rápido en el navegador. Al guardar, debes elegir sabiamente el formato de compresión correcto, ya que cada uno tiene sus ventajas y desventajas:

  • Utiliza el formato JPG para fotografías con detalle e imágenes grandes. Normalmente, será el formato más común que utilices.
  • Haz uso del formato GIF o PNG-8 para imágenes con poca variedad de colores y fondo transparente, como un botón o un gráfico de colores planos.
  • Haz uso de PNG-24 para fotos que tengan transparencias graduales. Este es un formato muy pesado que deberías evitar en la mayoría de los casos.

También puedes probar a utilizar el formato PNG y después pasar tus imágenes por el servicio TinyPNG. Se trata de un compresor bastante potente, que reducirá de forma considerable el peso de tus fotos sin perder mucha calidad. Para utilizar esta herramienta, simplemente arrastra tus imágenes desde la ventana de tu explorador hacia el recuadro que hay en la foto. El servicio las procesará y una vez hayan terminado estarán listas para ser descargadas de nuevo. tinypng El tamaño resultante de tus fotos dependerá de muchos factores: el número de colores diferentes, la cantidad de detalle, las dimensiones de la imagen… mi recomendación es probar a ver cuál de los formatos te ofrece el menor tamaño y así estar seguro de que tienes una imagen tan optimizada como sea posible.

Las imágenes optimizadas dan resultado

Con esto, ya tendrás imágenes listas para subirlas a WordPress sin temor a perder velocidad o a que salgan con poca calidad. Una cosa que debes recordar es que tu tema WordPress muchas veces te dictará cómo optimizar tus fotografías, ya que todo depende de cómo las utilice y a qué tamaños para crear el diseño de tu sitio web. Ante todo, recuerda: las imágenes son parte del contenido visual de tu página, y debes cuidarlas al igual que tus artículos para lograr contenidos de calidad.

¿Qué otro consejo nos darías para preparar una imagen antes de subirla a WordPress? Cuéntanos en los comentarios.

firma susana

SUSANA MORIN

creadora de Love Visual Marketing

9 comentarios

  1. Yo estoy en la fase de probar el plugin Smush it y de comprimir previamente también con una herramienta bastante interesante como compressor.io 100% online que comprime bastante sin perder calidad, al menos a simple vista.

  2. Un post muy útil Manuel,

    Porque hay gente que solo utilizan un único formato, en su mayoría jpg, y no dan cuenta que las imágenes vectoriales tienen un peso bajísimo como png, o utilizan un tamaño inadecuado.

    El plugin de wordpress Smush it que comenta RaMGON, por mi experiencia la verdad es que no va muy fino, si comprimes archivos de forma manual va bien pero si le das a comprimir a un grupo de imágenes «no chuta».

    Yo utilizo siempre Photoshop para diseñar las imagenes e infografías, y para comprimir un poco más utilizo la herramienta Image Optimizer de Dynamic Drive, es muy visual y fácil de utilizar.

    Un saludo compañero

  3. Hola manuel,
    Como fotógrafo de bodas optimizar nuestras imágenes es una parte muy importante de nuestro trabajo, a diferencia de casi todo el publico al que está dirigida publicación, Los reportajes de bodas que se publican en los blogs para fotógrafos se hacen casi siempre por entradas y cada entrada fácilmente contiene entre 20 y 50 fotografías en formato JPG, y resolucion entre 72/96 dpi, Tamaño depende del THEME en mi caso 1200pix lado largo y ahora si lo que se cuida es que el tamaño no sea más de 600k.

    Optimizar digamos esta parte «Mecánica» por no llamarla «Física» nos encontramos con la que ya nos «Raya» o nos consume mucho tiempo y es la preparacion de los metadatos en wordpress, por que claro rellenar Texto alternativo, descripcion, titulo, Alt—- de una imagen es facil pero de 20, 50 o 60 fotografías es un faenon y mas por que se hace una a una.

    En cuanto a ésto último, ¿Qué opinión puedes darnos?

    Saludos y un años exitoso para ti!

  4. Hola Manuel,

    Tengo que decirte que este es uno de los post más completos que he encontrado sobre la optimización de imágenes y fotos para subirlas a un WordPress. Gracias por este pedazo de artículo!

    Es cierto que es vital optimizar las imágenes antes de subirlas a wordpress. De hecho, por eso he dado con este artículo, llevo todo el día haciendo pruebas.

    Por una parte, es importantisimo optimizar las fotos antes de subirlas. Aquí no puedo agregar nada más a ester artículo porqué es completisimo.

    Aunque por otra parte, y ya que hablamos de WordPress. Me gustaría mencionar que hay plugins, que una vez subida la fotografía a WordPress, te ayudan a optimizarla.

    Un ejemplo es el plugin Wp Smush.it. Lo he instalado hoy y la verdad que parece funcionar bien. De esta forma, conseguimos optimizar aún más las imágenes de nuestra web.

    Muchas gracias de nuevo!

    Un saludo y te sigo leyendo!

    1. Hola,
      El plugin que mencionas es espectacular, yo lo uso en este blog y me ayuda a reducir el peso de las imágenes automáticamente. Gracias por el comentario. ¡Saludos!

  5. Hola, fantásticas las recomendaciones.
    Tengo una duda o más bien una pregunta.
    Con respecto a gifs de imágenes animados. Conocéis técnicas específicas para optimizarlas sin perder calidad? Estoy intentando mostrar portfolio de trabajos y la verdad que salen de muy poca calidad cuando los monto en gifs. Tener portfolio como tal me ocupa demasiado espacio. Alguna recomendación? Muchas gracias!

    1. Hola Ana,
      ¿Has probado hacerlos en Photoshop? Tal vez guardando para web antes de convertirlo en Gif el resultado sea óptimo.
      Sinceramente no tengo una técnica definida, pero he escuchado de esta herramienta que te permite reducir archivos de hasta 20 MB —> EZGIF
      Yo no la he probado todavía pero estoy a punto de empezar a crear mis propios gifs.
      También tienes esta otra GFYCAT, he leído que tiene una función que puede reducir GIF muy grandes sin perder calidad.
      Mucha suerte.

Deja un comentario

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

Love visual marketing te informa que la información que nos facilitas será tratada por Susana Morín Vargas como responsable de la web, con el fin de gestionar y publicar los comentarios en el sitio web. Los datos proporcionados se conservarán mientras no solicites su cancelación. Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. La legitimación se obtiene mediante tu consentimiento. Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. Podrás ejercer tus derechos en info@lovevisualmarketing.com. Puedes conocer la información adicional en relación a los datos personales en nuestra política de privacidad.

¿Analizamos juntos tu marca?

Haz ahora mi test gratuito de branding y descubre de inmediato cómo puedes mejorar tu marca.

Recibe el resultado personalizado en tu mail con consejos y recursos gratis.

460 Compartir
Compartir128
Twittear233
Pin9
Compartir85