Cómo subir imágenes a la web para usar tu WordPress como un experto

¡Ay mi madre! Cada vez que empiezo a trabajar en una web para un cliente y entro a su carpeta de imágenes multimedia me pongo a temblar... Normalmente, cuando los clientes no saben subir imágenes a la web pasan estas cosas, llenan la carpeta con mil millones de fotos de grandísima resolución que luego ni se usan...

Claro, lo primero que me toca decirles es que hay que hacer limpieza de esas imágenes y lo segundo que cuanto más pesen las imágenes que suban, antes llenarán el espacio de su servidor.

Esta advertencia no suele hacer efecto inmediato porque no piensan en las consecuencias pero, una vez les digo que cuando el servidor se llene tendrán contratar más espacio y pagar más dinero por su Hosting ya es otra cosa... Entonces es cuando empiezan a hacer caso.

Si es que cuando nos tocan el bolsillo si que nos ponemos las pilas, ¿eh?

Viendo que hay muchísimos bloggers que aún no saben subir imágenes a la web de manera correcta, hoy vamos a ver cómo hacerlo paso a paso y en qué nos debemos fijar para que afecten lo menos posible al rendimiento de nuestro blog.

¿Por qué subir imágenes a la web correctamente?

Cargar imágenes muy pesadas en tu web, va a perjudicarte notablemente y de varias maneras diferentes. Te voy a contar un par:

1- Espacio en disco

Como te decía antes, algo que te tiene que importar mucho es no llenar el espacio en disco de tu plan de Hosting. Si llenas todo ese espacio, vas a tener que contratar un plan superior y eso implica pagar más dinero...

Las dos formas más rápidas de llenar el disco duro de tu plan de Hosting sin que te des ni cuenta son: los emails y las imágenes.

Los dos casos tienen fácil solución:

  1. Configura tu email de dominio para ser gestionado desde Gmail y haz que se borren automáticamente tus correos del servidor. Solo con eso ya no llenarás de emails la bandeja de entrada de tu servidor y lo tienes solucionado.
  2. Sube imágenes optimizadas tanto en tamaño como en peso (comprimidas).

Cuanto más pequeñas y menos pesen tus imágenes, menos llenarás tu servidor. Ya ves qué fácil, solo con estas dos cosas te aseguras de que el disco duro de tu plan de Hosting tarde mucho en llenarse (y cuando digo mucho, es mucho).

2- Velocidad de carga

Uno de los factores más importantes que hay que tener en cuenta en una web, es el rendimiento. Ese rendimiento, en parte, mide la velocidad de carga de la página.

Como podrás imaginar, cuanto más rápido cargue una web, mejor.

¿Qué pasa si en uno de tus artículos has cargado 4 fotos que pesan muchísimo y son enormes?

Cuando alguien entre a ese artículo tendrá que esperarse un buen rato a ver la página entera porque tardará en cargar esas 4 fotos. Eso va a hacer que la velocidad de carga de la página aumente y eso es un factor muy negativo de cara a Google y al SEO.

Como ves, si no te esfuerzas un poco en arreglar bien las imágenes que subas a tu web, puedes salir bastante perjudicado.

Imágenes para web

Al empezar en el mundo de las webs, todos tendemos a pensar que las fotos tienen que ser de mucha calidad y resolución para que se vean bien y eso es mentira.

Las fotos para web son las fotos más comprimidas y optimizadas de todas. No son fotos en HD recién salidas de una súper cámara de 30 Mega Píxels, son fotos reducidas, a tamaños ajustados para cada plantilla y que además han sido retocadas haciéndoles perder calidad hasta que se han comprimido suficiente para poderlas subir.

Eso si, sin que tu ojo note la diferencia.

Que se vean bien y sean bonitas, no tiene nada que ver con que sean las fotos de mayor calidad que hayas visto.

Las imágenes para web están optimizadas y eso tiene que entrarte pronto en la cabeza.

¿Qué significa optimizar imágenes?

Esta es una muy buena pregunta. Optimizar una imagen para web significa reducir su tamaño en pixels, su resolución y su peso sin hacer que tú ojo aprecie la pérdida de calidad.

Créeme, se puede hacer y es muy sencillo.

Hay dos maneras de hacerlo:

  1. Antes de subir la imagen a la web.
  2. Optimizar la imagen desde WordPress con un plugin.

Yo sin duda te recomiendo que hagas la optimización antes de cargar la imagen en tu WordPress. Comprímelas al máximo para incrementar el rendimiento de tu web.

¿Cómo optimizar imágenes antes de subirlas?

Ya has visto que hay que reducir los pixels, la resolución y el peso. Vamos a ver punto por punto qué significa esto.

Pixels: Una foto o imagen tiene un largo y ancho que viene dado en pixels. Normalmente cuando descargas una imagen de un banco de imágenes o de tu propia cámara, estas imágenes son muy grandes y están a mucha resolución.

Una de las cosas más importantes es reducir este largo y ancho hasta un tamaño adecuado al que usa tu plantilla. No vale la pena subir imágenes a la web más grandes de las que tu plantilla va a mostrar. Eso es malgastar recursos.

Resolución: La resolución se mide en pixels por pulgada (ppp o ppi) y muestra la calidad que tiene una imagen. Para web, será suficiente con una imagen de 72 ppp mientras que para imprimir igual es necesario que sea de 300 ppp.

Peso: El peso de un archivo se mide por KB Y MB. Cuanto más optimizada esté la imagen, menos pesará y será mejor para nuestra web.

¿En qué formato se tienen que subir las fotos a la web?

Parte del proceso de optimización también consiste en elegir el formato adecuado de compresión para la imagen.

Hay 3 formatos que son los que deberías usar: .png, .jpg y .gif.

JPG: Prácticamente todas las imágenes de tu web las deberías subir en .jpg ya que es el formato que mayor compresión ofrece conservando calidad.

PNG: Deberías usar este formato para imágenes con fondos transparentes y formas geométricas y con colores planos. Es el formato usado para logos e imágenes de diseño gráfico. Comprime menos que el .jpg y por eso no es adecuado usarlo para las imágenes y fotos normales de la web.

GIF: Solo deberías usar .gif si vas a utilizar formatos animados. Te recomiendo no hacerlo ya que suelen ocupar mucho y son muy pesados. Por contra, muchos gifs los puedes encontrar en webs y embeberlos en la tuya sin tenerlos que subir a tu servidor. Por ejemplo Giphy, que es la que yo utilizo.

Programas y Webs para hacerlo

Bueno, ahora ya sabes toda la teoría sobre cómo optimizar imágenes y fotos pero llega la gran pregunta: ¿como coño se hace?

Tienes 2 maneras de hacerlo: de manera local con un programa de edición de imágenes o de manera remota a través de una web que lo haga por ti.

Si tienes Photoshop o Gimp, por ejemplo, puedes usarlos para escalar las imágenes y cambiarlas de tamaño, para exportar y guardar los archivos en el formato que más te interese y para rebajar su resolución. Con estas tres cosas ya tendrás tus imágenes listas para subir a tu WordPress.

Yo utilizo Gimp pero incluso creo que Photoshop tiene una opción que es guardar imagen para web o algo así.

Si prefieres no instalarte nada en tu ordenador y quieres hacerlo vía web, te voy a nombrar algunas opciones: Tinypng o Compressor.io

Hay más webs que sirven para optimizar imágenes antes de subirlas a la web. Utiliza la que más te guste, la que sea más cómoda y te dé un buen resultado.

Una vez hecho esto ya estarás en disposición de subir imágenes a la web para completar las páginas o artículos de tu blog.

Plugins para optimizar imágenes en WordPress

Si lo que quieres es optimizar imágenes que ya tengas subidas a tu WordPress y prefieres hacerlo directamente desde allí, hay algunos plugins que te pueden ayudar.

El primero que me viene a la cabeza es WP Smush it que te va a permitir comprimir las imágenes que tengas subidas (eso si, solo en peso, seguirán al tamaño al que las hayas subido).

También he visto googleeando un poco que hay varios plugins para hacer un resize de las imágenes que tienes subidas a tu librería de WordPress pero, al no haberlos probado, no te voy a recomendar ninguno. Si te decides a probar alguno, haz primero una copia de seguridad de tu web.

Otra opción súper efectiva y que yo uso a menudo, es el Optimizador de Imágenes de Webempresa. Si tienes tu web alojada en sus servidores, tienes disponible su herramienta de optimización de imágenes y realmente es brutal.

Te la recomiendo porque yo, aún subiendo las imágenes a mi blog ya optimizadas, aún reduzco bastante su peso al pasarles el Optimizador. 100% recomendado, como todos sus servicios de Hosting.

Si te interesa contratar tu Hosting con Webempresa y lo haces desde este enlace, con el cupón surfeatuvida tendrás un 20% de descuento.

Cómo subir fotos a WordPress

Bueno, una vez hemos visto como deben prepararse las imágenes para subirlas a la web, veremos cómo se hace paso por paso en tu WordPress.

subir imágenes a la web

Lo único que debes hacer es ir a la opción Multimedia que está en el menú principal de la administración de WordPress (antes se llamaba  Medios) e ir a la biblioteca.

Ahí verás todas las imágenes que has subido a tu WordPress y tienes 2 opciones:

  1. Vas a Añadir nuevo y seleccionas de tu ordenador la imagen que vas a subir a la web.
  2. Vas a la carpeta donde tengas la imágenes y la arrastras a la biblioteca de medios.

Con esto ya lo tienes todo listo.

Una vez subas tu imagen al blog, WordPress te creará automáticamente todos los thumbnails (diferentes tamaños de imágenes) que estén programados en tu plantilla.

Te aconsejo que le pongas a cada imagen alguna palabra clave del artículo o página donde irá en el campo ALT para potenciar el SEO on Page.

Como ves está tirado, no tiene ninguna complicación.

Error al subir imágenes a WordPress

Es posible que si no me has hecho ni puto caso y has subido una imagen de 10 MB, WordPress no la suba correctamente y no la encuentres cuando vayas a verla a la biblioteca de medios.

Esto no es porque te hayas vuelto ciego de golpe sino porque la imagen que has cargado es demasiado grande así que, ¡sube imágenes que pesen poco a tu web!

Ya no te voy a avisar más...

¿Cómo usar una imagen que he subido en mi artículo?

¿Ahora has subido la imagen a tu web y lo que quieres es usarla en tu post verdad? Pues esto es muy sencillo.

Ves al post en si y tienes 2 tipos de imágenes, la destacada y las imágenes que irán entre medio del artículo.

Para añadir la destacada deberás bajar hasta la sección de la sidebar Imagen destacada y deberás añadir la que quieras que presida el post.

Cuando le des a añadir, se te va a abrir la librería de medios y una de dos, o eliges una de ahí o bien subes la imagen que hayas preparado para este post.

Para las otras imágenes solo debes seleccionar el punto donde la quieres incluir y darle a Añadir objeto, justo encima del editor de texto de WordPress y hacer lo mismo que antes con la destacada.

Así que ya ves, tratar bien las imágenes de tu web es súper importante para el correcto mantenimiento de tu blog.

Espero que con este artículo te haya quedado bien claro como hacerlo pero por si no, te dejo un video en el que te lo explico muy gráficamente. Ahora si que no tienes excusa.

Con todo esto ya tienes resueltas todas las dudas acerca de cómo subir imágenes a la web y de cómo usarlas en tu WordPress pero, si te ha quedado alguna, no dudes en preguntar en la zona de comentarios.

Soy Victor Lloret, diseñador web y emprendedor digital especializado en negocios online. Gracias a ellos he podido vivir 1 año de viaje y conseguir que todos mis ingresos vengan de Internet. Contáctame y te ayudaré a crear la web del proyecto que cambie tu vida.

¿Quieres tener tu propio negocio online?

Te enseño los pasos para que aprendas a validarlo con éxito

Deja un comentario

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

Acepto la política de privacidad *

Surfea tu Vida te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Victor Lloret Cerezo (Surfea tu Vida) como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicito es para gestionar los comentarios que realizas en este blog. No se comunicarán estos datos a terceros. Legitimación: Consentimiento del interesado. Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Surfea tu Vida) fuera de la UE en EEUU y acogido al acuerdo EU-US Privacy Shield, aprobado por el Comité Europeo de Protección de Datos. Ver política de privacidad de Webempresa.

El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios tiene como consecuencia no poder atender tu solicitud. Podrás ejercer tu derecho de acceso, rectificación, cancelación y oposición al tratamiento de tus datos personales, en los términos y en las condiciones previstos en la LOPD dirigiéndote a la dirección de correo electrónico victor@surfeatuvida.com así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://www.surfeatuvida.com/, así como consultar mi política de privacidad. Al enviar tu comentario, algunos datos como tu nombre, correo electrónico y web quedan almacenados en una cookie para volver a utilizarlos en futuras visitas. Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

7 comments on “Cómo subir imágenes a la web para usar tu WordPress como un experto”

  1. Hola Víctor:

    ¡Excelente artículo! El tema del espacio que ocupa el correo es una cosa que ni se me había pasado por la cabeza, la verdad es que tiene su lógica, pero claro, si uno no cae en la cuenta ni se entera. Afortunadamente seguí el post que publicaste sobre como gestionar los correos con Gmail (Se lo recomiendo a todo el mundo).

    Hay otro método para robarle algunos Kilobytes a las imágenes y que nadie tiene en cuenta. Y es el uso de los gráficos SVG, compatibles en el 98% de los navegadores (menos Internet explorer 8). La ventaja de utilizar SVG son:

    - Su peso es muy bajo, puesto que es código XML
    - Iconos/gráficos siempre perfecto, como son vectores nunca se pixelaran.
    - Al estar formado por código XML, se pueden incluir directamente en la página, eliminando la petición de carga de recursos.

    Yo mismo utilizo SVG en mi página web, van de lujo.

    Muchas gracias por tu artículo Tocayo,

    Saludos!

    1. Hola Victor, muchísimas gracias por aportar tanto valor en el comentario.

      Me alegro que hayas aprendido algo nuevo, aunque ya lo resolvieras previamente con el post del correo 😛

      Un abrazo!!

  2. Hola Victor,

    Te agradezco todos los contenidos que ofreces para que los más novatos podamos ir avanzando poco a poco.

    Creo que es la primera vez que escribo en un blog a pesar de llevar leyéndolos desde hace varios años. Poco a poco uno se va soltando.

    Yo tengo una página nicho y a parte ando trasteando un poco para aprender. La cosa es que no tengo mucho espacio disponible en el hosting y lo que estoy haciendo ahora es subir las imágenes a Pinterest y embeberlas(o como se diga) en la web, (lleva un curro del 15) de esta manera estoy ahorrando espacio en el hosting para poder empezar un segundo proyecto.

    Qué te parece esta idea?? crees que es buena? no se si en un futuro Pinterest puede armarla borrando alguna de mis imágenes, espero que no.

    Saludos.

    1. Hola Carlos, encantado de que te estrenes comentando en Surfea tu Vida.

      Es una buena idea, lo único malo es que dependes de Pinterest. Si no cambia su política puede ser una estrategia perfectamente válida. Es un poco lo mismo que embeber los videos de Youtube.

      Saludos!!

  3. Muy interesante el post Víctor, enhorabuena por él! Y muchas gracias por la información. Yo optimizo las fotos con Web Resizer, hasta ahora estoy contenta con los resultados, tomo nota de tus recomendaciones para seguir mejorando 😉
    Me gustaría preguntarte por qué cuando pongo el link de uno de mis post directamente en la web no sale la imagen, que sí sale cuando se comparte por Facebook etc. Me sale el logo de WordPress y el nombre del Blog, tengo puestos links de otros blogs y en estos sí que sale la imagen que corresponde al post, ¿tengo que activar alguna función, o…? ¡Muchas gracias!
    Feliz semana, y si estas de vacaciones que las disfrutes mucho 🙂
    Un Saludo!

    1. Muchas gracias Mariví.

      Web Resizer es otra opción que no conocía, gracias por el aporte.

      En cuanto a lo que me dices de los posts, si usas Yoast Seo, verás que hay una opción en la parte social donde puedes añadir la imagen que se publicará en Facebook cuando compartas allí.

      Espero que con esto se te solucione el problema 😉

      Un saludo!!

Surfea tu vida con tu Negocio online

Vamos a darle vida a tu web

Soy tu diseñador web freelance de confianza, estoy especializado en WordPress y en Negocios online así que puedo ayudarte a crear la web de tus sueños para tu proyecto. 
¡Contáctame y hablamos!
QUIERO TRABAJAR CONTIGO

Sígueme la pista

Copyright © 2018 · Surfea tu Vida
Contenido a cargo de Victor Lloret. Todos los derechos reservados.

¿Necesitas una web?
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram