Entradas

Cómo subir imágenes a WordPress y optimizarlas

Una de las primeras cosas que tenemos que saber hacer y tener en cuenta antes de publicar una entrada o una página es cómo subir las imágenes a WordPress. Dicho así, parece la cosa más sencilla del mundo (no es para nada complicado), pero hay algunos puntos que no se nos puede escapar a la hora de seleccionar las imágenes, de subirlas y de agregarlas a la entrada o a la sección correspondiente.

Las medidas, el formato, el alt, la descripción, el título, dónde se alojan, etc., son factores determinantes que influirán en el posicionamiento SEO del blog o página web, en su velocidad de carga y en el funcionamiento de esta o este.

Así pues, como las imágenes aportan valor añadido a los textos, contribuyen muy positivamente a la legibilidad, facilitan la compresión y contribuyen en el diseño web en WordPress, en este post te contamos cómo subir imágenes a WordPress, qué tienes que tener en cuenta y cómo optimizarlas para que la experiencia usuario sea de 10.

Antes de subir las imágenes a WordPress

Antes de subir las imágenes a WordPress, hay que guardarlas en una carpeta de la que no se deberían mover una vez estén publicadas. Para optimizarlas, hay que reducir el tamaño y el peso de estas para que el tiempo de carga web no sea lento y, por ende, Google nos favorezca en el posicionamiento.

Cómo debes guardarlas en tu ordenador

Así, todas las imágenes de una misma entrada o página deben estar guardadas en una misma carpeta con nombres diferentes, ya que WordPress le asignará una url. Además, el título que le pongamos a la imagen en la carpeta es muy importante para el SEO por eso, no utilices mayúsculas, tildes ni caracteres que no sean letras o números. Procura que no sean nombres excesivamente largos, con 4 palabras estará bien y deben ir separadas por guiones. Por ejemplo: como-subir-imagenes-a-wordpress.jpg.

Pantallazo de ejemplo de carpeta en la que guardar las imágenes antes de subirlas a WordPress

Cómo optimizar las imágenes antes de subirlas

Antes de subir las imágenes a WordPress, debemos tener en cuenta, como decíamos, su tamaño y peso. Para optimizarlas, hay que reducirlas al menor peso posible: entre 30 kb y 100 kb. Lo ideal es que la extensión de dichos contenidos sea .jpg, pues al pasar de otro formato a este, estaremos reduciendo en más del 80 % el peso de la imagen.

Existe una herramienta muy fácil de usar con la que optimizar las imágenes. Es Light Image Resizer y en este post te contamos cómo funciona, esta y otras aplicaciones y herramientas. Bastará con cambiar el ancho a 800 y desmarcar la altura, cambiar la calidad al 60 % y la resolución a 72 DPI, pues el ojo humano no es capaz de ver resoluciones mayores.

Pantallazo de la herramienta Ligth Image Resizer para optimizar imágenes antes de subirlas a WordPress

Cómo subir imágenes a WordPress

Para agregar imágenes o vídeos a entradas o páginas, tenemos que hacerlo pinchando en el botón ‘Añadir Medios’ de la esquina superior izquierda, justo encima del cajón de texto. Se abrirá una ventana con las pestañas ‘Subir archivos’ y ‘Biblioteca de Medios’. Si la imagen o vídeo ya la habíamos subido previamente, tendremos que dirigirnos a la biblioteca y seleccionar la imagen. Ahí, debemos escribir el alt, la descripción y el título si no está.

Botón añadir medios para subir imágenes a WordPRess

Si el archivo tan solo está en nuestro ordenador, clicamos en la pestaña ‘Subir archivos’, para o bien arrastrarlos, o bien seleccionarlos desde su carpeta. Igual que antes, debemos rellenar los campos.

Cómo guarda WordPress los archivos

Cada vez que arrastras archivos o los seleccionas desde la ventana, estos se guardan en la biblioteca de archivos (carpeta ‘Medios’).

‘Medios’ es la carpeta donde se alojan todas las imágenes y vídeos del sitio web con WordPress, e indica en qué entrada o página están insertadas, el nombre de cada vídeo o foto, su url, la fecha en que se subió a WordPress y su autor (quién la subió).

Al subir los archivos, por defecto WordPress los almacena en el directorio wp-content/uploads de tu servidor, con fechas y en subcarpetas, lo cual es mejor no modificar. También creará automáticamente un mínimo de tres versiones, que son miniatura (150x150px), tamaño medio (300x300px) y tamaño grande (1024x1024px). Así, en ‘Medios’, en la barra lateral de WordPress, es donde puedes ver y modificar dichas medidas.

Barra lateral de WordPress donde se encuentra la sección Medios para subir imágenes

Cómo optimizar las imágenes en WordPress

Una vez que hayas subido las imágenes a WordPress y les hayas dado su lugar en la entrada o página, tienes que optimizarlas, pues es contenido de la web y los motores de búsqueda leen por igual un texto que un archivo. Así, optimizar las imágenes en WordPress no solo repercutirá de manera positiva en el posicionamiento de tu sitio web, sino que hará que la velocidad de carga sea más rápida y la experiencia usuario mejor.

Para optimizar los archivos, ten en cuenta:

Título de la imagen

Como hemos explicado antes, el título de la imagen debe corresponder con el nombre que tenía esta en la carpeta de origen de tu ordenador y debe estar separado por guiones, sin caracteres que no sean palabras o números y no más de 4 palabras.

Para modificarlo una vez hayas colocado la imagen, te diriges a ella en la entada o página el archivo y clicas en el icono del lápiz, que mostrará la pestaña de ‘Editar’. En la ventana que aparecerá encontrarás la casilla de ‘Atributo «title» de la imagen‘, donde debes pegar el título que tiene la imagen en la carpeta.

Icono lápiz para editar imágenes

Puesto que el nombre de la imagen puede ayudarte a posicionar tu web, intenta que este refleje la palabra clave asignada a esa entrada o página.

Pantallazo en el que se muestra el título de las imágenes de WordPress

Etiqueta ALT o Texto Alternativo

Esta etiqueta es una descripción del archivo que debes asignarle por si, por algún motivo, al usuario no se le muestra la imagen. También será la descripción que oiga una persona con discapacidad visual, por lo que debe poder imaginarse cómo es la imagen con esa breve descripción.

Esto es muy importante y Google le presta especial atención, por lo que agregar en esa casilla la palabra clave será muy positivo para el SEO. De hecho, es uno de los requisitos que el plugin Yoast SEO tiene en cuenta. Pero no hace falta que el alt refleje con exactitud la frase clave, puede ser una variación de ella.

Pantallazo en el que se muestra el texto alternativo de las imágenes de WordPress

De igual modo que hemos cambiado el título se cambia el texto alternativo. Vamos a la opción de ‘Editar’ que nos muestra el lápiz y escribimos en el cuadro llamado ‘Texto alternativo‘.

Tamaño imágenes

Por último, aunque ya hayas cambiado el tamaño previamente, debes ajustarlo según consideres que queda mejor en el post. Esto es porque el tamaño que elijas será el que se le muestre al usuario, por lo que no tiene sentido que el tamaño de la imagen sea mayor que el ancho de la pantalla del ordenador.

Para editar el tamaño, si utilizas el editor Clásico de WordPress, ve una vez más al icono del lápiz. Ahí te aparecerán los Ajustes de Visualización, donde puedes elegir la alineación del archivo y el tamaño. Re comendamos ajustar el tamaño seleccionando ‘Tamaño personalizado‘ en la lista despegable de Tamaño y escribir en el cuadro 680×480 si es una imagen ligeramente rectangular.

Pantallazo en el que aperece las opciones de tamaño de las imágenes de WordPress

Eliminar imágenes que no necesitas

Y un último consejo: si has subido imágenes por error a Medios o vas a cambiar unas imágenes de una entrada por otras, no olvidas borrar permanentemente las que no sirven; es decir, las que no se van a ver. Una vez más, seleccionando el icono del lápiz, encontrarás la opción ‘Reemplazar‘, y dentro de ella unas letras rojas debajo de la imagen en las que se lee ‘Borrar permanentemente‘. Así, no habrá peso de más en WordPress por archivos que no necesitas.

Por qué optimizar las imágenes en WordPress

Como hemos mencionado ya a lo largo del post, optimizar las imágenes es bueno para tu sitio web con WordPress por varias razones:

Velocidad de carga más rápida

Una velocidad de carga web lenta se traduce en una experiencia usuario negativa y en tasas de rebote más altas. Los usuarios no pueden estar esperando más de 4 segundos a que carguen tus imágenes, porque se irán a otra web, por eso y porque Google está muy preocupado por la experiencia usuario, debes optimizar tus archivos.

En este post puedes ver cómo afecta un tiempo de carga lento a tu página web.

Mejora el posicionamiento SEO

El tiempo de carga lento no solo «enfada» a los usuarios, sino también a Google. Al tener imágenes optimizadas en tu sitio web WordPress, el motor de búsqueda posicionará tus imágenes mucho más rápido, lo que supone mayor tráfico.

Cohete despegando que simula el posicionamiento SEO

Tu sitio ocupará menos sitio en el servidor

Para que tu sitio web ocupe menos espacio en el servidor, tienes que intentar quitarle todo el peso que puedas, y una forma de hacerlo es reduciendo las imágenes lo máximo posible. Esto, además, está de nuevo íntimamente ligado al tiempo de carga y al SEO de tu web.

Ahora ya sabes cómo subir imágenes a WordPress, cómo optimizarlas y por qué debes hacerlo, pero, ¿sabes optimizar el resto de contenidos, hacer una web con diseño web WordPress y aumentar la velocidad de carga? ¡Nosotros sí! Pregúntanos sin compromiso.

¿Como reducir el tamaño de las imágenes?

Seguro que muchas veces te habrás preguntado cómo bajar el tamaño de una imagen. Aquí te mostramos una alternativa muy buena. Si tienes problemas con el tamaño de tus imágenes y necesitas reducirlo, con Light Image Resizer 4 lo puedes hacer de forma sencilla y rápida, ya que es un programa para reducir fotos. Lo primero que tenemos que hacer para reducir el tamaño de las imágenes es ir a la web oficial del software  y descargarlo en tu ordenador, e instalarlo siguiendo los pasos que nos indica. Light Image Resizer es totalmente funcional en su versión gratuita, la única diferencia con la versión premium es evitar que nos aparezca la siguiente ventana al iniciar el programa:

reducir el tamaño de las imágenes mediante Light Imagen Resizer

Licencia OEM Light Image Resizer

Una vez descargado, ya puedes empezar a modificar tus imágenes.

Cómo optimizar tus fotos paso a paso

Aquí te dejamos la explicación en vídeo paso a paso para que te resulte sencillo seguirnos:

En la primera ventana añade las imágenes que quieres reducir, arrastrándolas a la zona asignada o clicando en archivos, puedes trabajar sobre una sola fotografía o en lote, para modificar todas en un solo paso y así ganar tiempo. Una vez has elegido las fotos, pincha en Siguiente.

Seleccion imágen mediante Light Imagen Resizer

El próximo paso a seguir es ajustar los parámetros de la imagen reducida según tus necesidades. Tienes tres bloques de información que puedes modificar, el primero situado en la parte superior de la ventana contiene los siguientes apartados:

Perfil. Tiene que ver con la resolución de la imagen, contiene las opciones de resolución original de la imagen, resolución de escritorio y resoluciones desde 320×200 hasta 1280×768.

Ancho y altura. Ajusta los pixeles de ancho y alto de la imagen, si desactivas uno de los dos parámetros, la imagen se ajusta al tamaño indicado en el parámetro que sí está activo, siempre que tengas activada la función Mantener relación de aspecto que hay más abajo.

Modo. También está relacionado con las dimensiones de la imagen, y puedes ajustar, estirar, centrar y recortar.

reducir el tamaño de las imágenes mediante Light Imagen Resizer

En el bloque central tienes seis opciones estructuradas en forma de menú, vamos a detallar las tres más significativas:

General. Entre las opciones de este apartado, cabe destacar la elección del formato que queremos para la imagen reducida, jpeg es el más recomendado si se trata de una fotografía o imagen, por su menor tamaño una vez aplicas la reducción. En caso de logos, iconos o imágenes vectoriales es mejor utilizar png. Otro factor para reducir el tamaño de las imágenes es la calidad de la misma, puedes reducirla en torno a un 60%, ya que esta no se ve muy mermada en el resultado final. En cuanto a la resolución, si tu imagen va a ser utilizada para, por ejemplo, una página web, escoge un valor de 72 DPI, que es el estándar para imágenes digitales.

Efectos. Si quieres aplicar efectos como escala de grises, sepia, relieve, etc. a nuestra fotografía, lo seleccionas dentro de este apartado.

Rotate. Aquí tienes la opción de rotar la imagen vertical u horizontalmente o aplicándole un ángulo de rotación.

Finalmente elige la carpeta de destino, preferiblemente una distinta a la de las imágenes originales, y selecciona la acción que quieres aplicar a tus fotos: crear copia, redimensionar, mover, comprimir, crear PDF o compartir. Por defecto, deja seleccionada la opción Crear copia. Clica en Proceso y la imagen se guardará en la carpeta especificada anteriormente. En la siguiente ventana verás el tamaño de imagen que se ha reducido en KB y en %.

procesado

Por último, hemos utilizado una imagen con un tamaño de 631 KB a la que hemos aplicado la reducción utilizando Light Image Resizer como se ha explicado en los pasos previos. El peso final de la imagen reducida es de 55 KB, obteniendo por tanto un decremento de tamaño de 576 KB. Reducir el tamaño de las imágenes desde 631kb a 55kb no parece muy complicado, ¿verdad?

comparativa

Truco: Si tienes varias imágenes con diferentes tamaños, lo que puedes hacer para optimizar todas todas las imágenes a la vez es definir un ancho común a todas, y el alto dejarlo vacío. Ten en cuenta, tal como se ve en la imágen de abajo, que debes mantener la proporción.

Ejemplo para Reducir el tamaño de una imagen

Ejemplo para Reducir el tamaño de una imagen

 

Deja tus comentarios al pie sobre la experiencia de este programa o dinos qué software utilizas para reducir el tamaño de las fotos.