Recursos mencionados en el video:
Una imagen vale más que mil palabras, antigua frase que se aplica mejor que nunca a la era de internet.
Sin embargo para aprovechar todo el poder de las imágenes necesitas ser consciente de cómo hacer un correcto uso de las mismas, caso contrario podrías terminar causándote más de un dolor de cabeza.
En esta guía voy a explicarte cómo insertar imágenes en una entrada o página de WordPress, vamos a ver en detalle el editor de imágenes avanzado de WordPress.org y te voy a contar qué cosas deberías tener en cuenta para sacar el máximo beneficio de éstas.
Sea que tengas un blog o estés creando una página de tipo institucional es muy recomendable que acompañes siempre tus textos con imágenes.
WordPress es el gestor de contenidos ideal para personas que no tienen conocimientos técnicos ni de diseño web, no me voy a cansar de decirlo, está creado y desarrollado pensando en gente «normal». Por eso incluye funcionalidades que se encargan de optimizar las imágenes automáticamente en el momento de subirlas y que te hacen las cosas más fáciles.
Si embargo no es Dios. Si por ejemplo subes una imagen en un formato inadecuado para internet, como podría ser el BMP, WordPress no la convierte a otro formato mejor. Sí existen plugins que se ocupan de optimizar y comprimir las imágenes para que no ocupen tanto espacio y carguen más rápido.
Sin embargo yo te voy a recomendar hacer algunas cosas antes de subir tu imagen para que obtengas mejores resultados con herramientas externas a WordPress y no sobrecargues tu blog con plugins innecesarios.
Por favor, nada de BMP, este formato de imagen no sirve para internet. Son archivos muy pesados que va a hacer muy lenta la carga de tus páginas y ésto está mal visto a los ojos de Google y de los usuarios, que no tenemos paciencia para esperar.
El criterio general es el siguiente:
No tiene sentido subir una imagen de 1500 píxeles de ancho para que se vea de 800 píxeles, y si bien WordPress ésto lo suele ajustar automáticamente no siempre es así. Y además, la imagen original queda guardada en el servidor.
Yo te recomiendo que la recortes antes de subir con cualquier editor de imágenes como Photoshop o Gimp.
El ancho en que se muestran tus imágenes depende de cómo esté configurado tu tema y en general no supera los 850 píxeles de ancho. Para saber la medida exacta en tu caso puedes hacer lo siguiente: si utilizas el navegador Firefox, lo cual te recomiendo siempre para desarrollo web:
Si las imágenes están siendo escaladas por el navegador es porque no hiciste bien la tarea.
La anterior es una captura real de una imagen de mi blog. Nos dice que la imagen mide 850 píxeles de ancho y que el navegador la está escalando a 848, que es la medida de la columna central según el diseño actual.
En este caso 2 píxeles es una diferencia insignificante pero si te muestra diferencias muy grandes deberías preocuparte.
Escalar la imagen al tamaño adecuado no es suficiente.
Las imágenes JPG y PNG en general están grabadas con una calidad que suele ser muy superior a lo necesario para verse bien en internet. Por lo tanto necesitamos eliminar toda esa información adicional, innecesaria en nuestro caso, para que el archivo ocupe menos, alterando lo menos posible la calidad final de la imagen.
Para hacer ésto yo utilizo una herramienta online y gratuita que me resulta muy práctica: TinyPNG. Lo único que tienes que hacer es seleccionar la imagen y la aplicación se encarga de reducir su tamaño automáticamente al máximo posible.
En la siguiente captura puedes ver la increíble diferencia de tamaño entre los archivos originales y los optimizados, hasta el 70% de reducción. Y ésto sin afectar en lo más mínimo a la calidad de las imágenes.
Luego descargas la imagen optimizada y la subes a tu blog normalmente, pero antes te recomiendo una cosita más.
Para que la imagen sume al posicionamiento del artículo es importante que el nombre del archivo contenga las palabras principales del mismo o bien del subtítulo al que pertenece.
Ya que WordPress no te va a permitir modificar el nombre del archivo una vez subida la imagen es importante que no te olvides de hacerlo antes.
Por ejemplo, si tu artículo se llama Cómo cuidar un bonsái, la imagen principal del mismo debería llamarse cuidar-bonsai.jpg, y no image025.jpg.
Cumpliendo estas cosas puedes estar tranquilo de estar utilizando correctamente las imágenes y de sacar el máximo provecho de ellas.
Para insertar una imagen en WordPress, cuando estás en el editor de la entrada tienes que situar el cursor en el lugar donde deseas colocarla.
Después haces clic en el botón Añadir objeto, lo puedes encontrar encima de la barra de herramientas.
Entonces se abre una ventana como la siguiente. Vas a ver dos solapas en la parte superior: Subir archivos y Biblioteca multimedia.
Si hubieras subido ya algunas fotos, las mismas aparecerán en la solapa Biblioteca multimedia. Si en cambio necesitas subir una nueva haces clic en Subir archivos.
En la solapa subir archivos vas a Selecciona archivos para buscar la imagen en tu equipo navegando por las carpetas.
Una vez seleccionada la imagen el sistema comienza a cargarla y te lleva automáticamente a la Biblioteca multimedia donde aparece la imagen recién subida ya marcada.
Haces clic en el botón Insertar en la entrada y la imagen es colocada directamente en el lugar de la entrada donde habías puesto el cursor.
Una vez insertada la imagen, si haces clic sobre la misma vas a ver que aparece una pequeña barra con botones.
El último botón, con forma de lápiz, abre una ventana para editar los detalles de la imagen, algunos de estos detalles es importante que los conozcas.
Antes te decía que la imagen debería tener en su nombre de archivo las palabras principales del artículo o del subtítulo al que pertenece para ayudar al posicionamiento en buscadores.
Tanto el Texto Alternativo como el Atributo «title» de la imagen también son muy importantes en este sentido y deberían ser ambos el mismo título del artículo, en nuestro caso Cómo cuidar un bonsái, si es que se trata de la imagen principal, o el subtítulo al cual pertenece, si es una imagen secundaria.
Es muy importante que estos valores no se repitan en otras imágenes por lo que debes que pensar bien qué frase utilizar en cada una, si tienes varias. Lo ideal es seguir la lógica del artículo y que cada imagen utilice el nombre del subtítulo al que pertenece.
Esta opción te permite elegir en qué tamaño mostrar la imagen: tamaño completo, medio o miniatura. Si tu imagen está correctamente escalada se supone que vas a utilizar Tamaño completo, es lo ideal por lo explicado más arriba sobre la optimización de las imágenes.
Puedes elegir a dónde enlaza la imagen cuando alguien hace clic sobre ella. Lo normal es seleccionar Ninguna.
Esta es la más poderosa de todas las herramientas que puedes encontrar en los Detalles de la imagen. Te permite escalar, recortar, rotar y reflejar la imagen.
Si bien, como te recomendaba más arriba, es mejor hacer estas tareas antes de subir la imagen, WordPress te brinda la posibilidad de retocar desde este panel.
Para acceder hay que hacer clic en el botón Editar original, a la derecha.
Una vez dentro vas a encontrar una serie de herramientas que te permiten hacer los diferentes cambios en la imagen.
Para recortar la imagen de forma manual hay que hacer clic en un punto de la misma y arrastrar formando una ventana, como se ve en la captura anterior.
Una vez definida la ventana a recortar haces clic sobre el icono Recortar de la barra de herramientas para completar la operación.
A la derecha vas a encontrar también una forma más precisa de recortar la imagen indicando los valores de la selección, pero con el recorte manual en general es más que suficiente.
El resto de las herramientas son bastante intuitivas y no requieren explicación. Una vez efectuados todos los cambios le das a Guardar y listo.
Lo que acabamos de ver es prácticamente todo lo que necesitás tener en cuenta sobre el tratamiento de las imágenes y las herramientas que ofrece WordPress para tal fin. Para que tus imágenes no sean solo decorativas sino que aporten al posicionamiento del artículo.
Como habrás podido observar, no se trata simplemente de elegir cualquier foto y subirla así como viene. La imágenes necesitan ser cuidadas de la misma forma que cuidamos el texto, en su redacción y ortografía.
Si te resultó útil compártelo con amigos, así los ayudas a ellos y también a mí. Utiliza los botones de más abajo. Gracias.
Al momento de activar el constructor Divi se crea una nueva opción en el menú…
Divi es un constructor para WordPress que se instala como un si fuera un tema…
En esta guía te muestro paso a paso cómo crear una caja con información del…
En esta guía te muestro cómo cambiar el encabezado de la página home para que…
En esta guía vamos a ver cómo asignar con Divi un diseño diferente a entradas…
En esta guía te muestro paso a paso cómo crear un CV digital con WordPress…
