Las imágenes son muy importantes en cualquier web, en los post o artículos porque captan la atención del usuario y permiten al lector descansar la vista, rompiendo la monotonía.
Si estás hablando de un hotel o lugar turístico, por ejemplo, y añades una buena foto de la piscina, las vistas, las habitaciones o el jacuzzi, aquí las fotografías son fundamentales porque una imagen vale más que mil palabras.
Las imágenes, por otra parte, son importantes para el SEO. El título y el alt, como veremos, ayudan a Google a posicionar el post. Y no hay que descartar las búsqueda por imágenes en Google que también pueden ser una buena fuente de tráfico.
La mala utilización de las imágenes, por el contrario, penalizará mucho a nuestro sitio web.
Una imagen mal optimizada hará que la web cargue muy lenta afectando al WPO y, por tanto, al posicionamiento en buscadores. Y un excesivo uso de imágenes de stock, demasiado utilizadas y demasiado vistas, hará el post poco atractivo.
Si estás construyendo la web de tu empresa no dudes en contratar un fotógrafo para que tus fotos tengan buena calidad y sean originales. No hay nada más cutre que un negocio particular con imágenes de stock.
Vamos, pues, a ver todo lo referente a la utilización de las imágenes en WordPress.
Pasos para crear una web corporativa básica en WordPress
Optimizar imágenes para WordPress
#1- Utiliza imágenes originales
Comenzamos con una recomendación. Google valora las imágenes originales, por lo tanto, lo ideal es utilizar imágenes propias.
Aunque es difícil tener tiempo y medios para usar nuestras propias imágenes hay algunos trucos que puedes utilizar para que una imagen de banco de datos, a ojos de Google, sea original.
Para ello, puedes rotar la imagen unos grados, voltearla horizontalmente, recortarla, tintarla, desenfocar una parte, añadir rótulos o hacer una composición o collage.
Esta foto de arriba es del banco de imágenes gratuito Pexels y en la información de la imagen nos dice que se ha descargado 11.300 veces.
Si buscamos la foto de la izquierda en Google (ves a imágenes, pincha el símbolo que representa una cámara de fotos y arrastra la imagen que quieras buscar) nos dice que hay 1088 páginas que utilizan esta fotografía.
Una vez tratada un poco la imagen le damos a buscar y nos dice «posible búsqueda relacionada: iphone», pero no hay ningún resultado que coincida con esa imagen. Para Google será una imagen original.
Otra recomendación es que utilices imágenes o fotografías relacionadas con el tema del que estás hablando. Puedes ver lo que Google sabe de tus imágenes en esta página: https://cloud.google.com/vision
Simplemente arrastras la imagen que quieras en el recuadro punteado (Try the API) y Google te dice muchas cosas de la fotografía.
En la primera pestaña, Objects, Google te dice que objetos aparecen. Para esta imagen el resultado es Smartphone. La segunda pestaña, la que ves en la foto, son las etiquetas que Google añade a esa foto. La tercera pestaña lee el texto que hay en la foto (imágenes para web). Si, Google lee el rótulo que hay incrustado en una imagen. En la pestaña Properties te dice los colores dominantes, ratio de la imagen… y en la última pestaña, Safe Search, si se trata de una imagen violenta, racista, porno, médica… Mejor que no identifique tu fotografía con ninguno de estos temas.
Resumiendo, es importante que las fotos sean originales y que tengan relación con el tema que estás tratando.
#2- Formatos de imágenes para web
Uno de los aspectos más importantes relacionados con las imágenes: Los formatos que podemos utilizar en WordPress y sus características fundamentales.
Si empleas el formato adecuado, según cómo sea la imagen, ya estarás ahorrando muchos kilobytes a tu página web.
Si guardas como PNG, por ejemplo, una imagen de un paisaje con muchas tonalidades de color pesará un montón. Cada formato tiene una utilidad. Los formatos principales que se utilizan en WordPress son:
JPG -JPEG [Joint Photographic Experts Group]
Lo primero, .jpg y .jpeg es lo mismo. Jpg se usaba porque los nombres de archivos en Window solo podían tener 3 letras.
Jpeg es un formato de compresión, que durante muchos años, ha sido el referente y, probablemente, lo sigue siendo en el mundo de la fotografía.
No es el formato de más calidad, pero es el formato que mejor cumple la relación calidad-peso. Un jpeg admite millones de colores y al guardarlo debes aplicar una compresión.
Para una fotografía normal, para web, entre 30 y 60 de calidad, es aceptable para ser vista en un monitor normal o en un smartphone.
Según la cantidad de detalles que tenga la imagen pesará más o menos. Nos es lo mismo una imagen de la arena de la playa y el mar azul que una foto de la ciudad con muchas personas, coches, árboles.. etc. Mira estas fotos.
Esta imagen es un jpeg de 800px X 400px. Esta comprimida al 40% y su peso es de 29 Kb. Pesa poco porque no tienen muchos detalles en el cielo ni en la misma montaña.
Esta otra imagen mide lo mismo 800px X 400px. Es un jpg comprimido, igualmente, al 40% y su peso es de 90Kb. Tres veces más de peso que la fotografía de arriba. La cantidad de objetos y detalles de esta imagen aumentan mucho el peso.
Como Jpeg es un formato con compresión las ilustraciones y rótulos no se suelen ver muy bien porque el detalle de los bordes aparecerá siempre un poco pixelado.
PNG [ Portable Network Graphics]
La principal ventaja del PNG respecto al jpeg es que admite transparencias. Su aparición consiguió mejorar la transparencia de los GIF, que era bastante chunga.
Es un formato sin pérdida de calidad y se utiliza para imágenes con pocas variaciones de color como logos, rótulos, dibujos, ilustraciones…
Para otro tipo de imágenes y fotografías, como no comprime, el resultado es un peso excesivo para imágenes que van a ser utilizadas en una web.
Puedes ver la imagen original, sin fondo, y al cargarla en WordPress como PNG el fondo será el color del fondo, en este caso blanco.
Por eso se utiliza mucho para los logos que van en la cabecera de las webs, para que el fondo sea el de la propia cabecera.
Existen dos variantes. PNG 8 y PNG 24. Los números indican los bits soportados por los archivos. Los PNG 8 procesan 256 colores y los PNG 24 procesan 16 millones de colores. Para la web deberíamos utilizar PNG 8 para gráficos con muy poca variación de color porque si usamos PNG 24 la imagen pesará mucho, aunque tendrá mucho mejor definición.
Para que nos hagamos una idea de lo que puede significar no manejar bien los formatos de imagen. La imagen de arriba de la montaña que pesaba 29Kb si la hubiéramos guardado como un PNG 24 pesaría 160 Kb y, si la guardamos como PNG 8 perdería mucha calidad.
GIF [Graphics Interchange Format]
En un principio, los GIF se utilizaban porque permitían la transparencia de los fondos de la imagen, pero siempre ha tenido el problema de que solo puede contener 256 colores, por lo es un formato sin mucha calidad.
Otra ventaja de los GIF era que permitía movimientos, por lo que al principio, en internet, se usaban mucho en los diseños de banners animados.
Ahora, ha resucitado este formato. Permite animaciones sencillas con poco peso y sin utilizar ningún reproductor. Es una muy buena manera de insertar imágenes animadas que llamen la atención, sin gastar muchos recursos (400kb pesa la imagen de abajo).
WEBP
WebP es un formato de imágenes creado por Google en 2010 pensando en reducir el peso de las imágenes. Además, cuenta con la ventaja de los formatos anteriores, ya que soporta la transparencia y puede animarse.
El principal problema es que no todos lo navegadores lo soportan, principalmente Safari para IOS, muy utilizado en los iphone, algunas versiones de navegadores antiguos y, como no, Explorer.
Se calcula que casi el 80% de usuarios de internet pueden ver imágenes WebP. O sea, que habrá un 20% de usuarios que utilizará navegadores no compatibles con WebP.
Como todo en esta vida hay una solución. Un plugin para WordPress que muestre en los navegadores no compatibles con este formato, una imagen jpg. Imagify.io, de pago, y WebP Converter for Media, gratuito, hacen esta función.
Otro problema es que muchos programas de edición de imágenes tampoco trabajan este formato, por ejemplo Photoshop. Para ello debes instalar un plugin que nos proporcionan en la página web del formato http://telegraphics.com.au/sw/product/WebPFormat
Para visualizar las imágenes WebP puedes hacerlo, directamente, en el navegador Chrome, arrastrando la imagen o descargarte un visualizador para Mac (WebP Viewer) o Windows (infarview).
Y hay muchos conversores online de Jpeg a WebP, que cambias el formato en un momento. Para que te hagas una idea de las fotografías jpeg de arriba han pasado de 30kb a 20kb y la de la bici de 90kb a 80kb sin pérdida de calidad aparente.
La verdad es que es un formato que reduce el peso de la imagen pero que es muy dificultoso trabajar con él. Casi todos los bancos de imágenes ya incorporan imágenes WebP.
SVG [Scalable Vector Graphics]
Y llegamos al último formato que está ganando muchos adeptos del diseño web.
El formato SVG es un formato de imagen vectorial. Al contrario que los formatos anteriores que están formados por un conjunto de pixels (mapa de bits) las imágenes vectoriales están compuestas por colores y formas geométricas, por lo que al ampliarlas no pierden definición.
Esto es una gran ventaja para los sitios web, que se ven en monitores con distintas resoluciónes. Los SVG se adaptan perfectamente sin perder definición. También permite las animaciones.
Para crearlos necesitas programas como Freehand, Corel Draw o Adobe ilustrator. También hay gratuitos como Inkscape y bancos de imágenes Svg como Freepick.
Es un formato basado en XML por lo que es editable. Se puede abrir en cualquier editor de textos y crear las imágenes en código.
Es ideal para hacer gráficos, diagramas, infografias, logotipos, iconos… ya que se obtiene una muy buena resolución con muy poco peso. Es prácticamente compatible con todos los navegadores pero WordPress no admite el formato por defecto. Para ello deberás instalar algún plugin, como SVG Support.
Resumiendo.
- Utiliza jpeg con la máxima compresión posible sin que pierda mucha calidad para imágenes tipo fotografía.
- PNG, cuando necesites trasparencias o para ilustraciones, infografías, gráficos o imágenes con colores planos y muy poco detalle.
- Gif para animaciones.
- WebP si quieres reducir, mas o menos, un 20% el peso de las imágenes de tu web a costa de complicarte un poco el trabajo.
- SVG para logos, iconos, botones, gráficos, ilustraciones o imágenes con formas sencillas.
#3- Qué tamaño deben tener las imágenes
El tamaño de imágenes dependerá de las dimensiones de tu web. Lo normal, es que en la plantilla que utilices tengas la opción de poner el ancho de la web. Esto es fundamental para saber el tamaño máximo que deberán tener tus imágenes.
Si utilizas barra lateral, normalmente, las plantillas de WordPress te piden que tanto por cien del ancho quieres que ocupe el sidebar. Por ejemplo, si tu web tiene un ancho de 1200px y dejas el 30% para la barra lateral, ya sabes que el sidebar será de 400px, por lo que el cuerpo principal medirá 800px. A esto deberías descontar el margen o padding (relleno) por lo que serán algunos pixels menos.
Con esto sabemos que nuestras imágenes, si van a ocupar el ancho completo NUNCA serán de más de 1200px de ancho. Y si van en la barra lateral no deben medir más de 400px de ancho. Hacerlas más grandes es añadirle un peso inútil a la imagen.
¿Cómo saber el ancho de una web?
Una manera de ver el ancho de la web y de los distintos elementos o secciones que la componen es en el propio navegador, con el inspector de elementos.
Sitúas el cursor arriba de la sección que quieras ver las medidas y botón derecho – inspeccionar. En la pestaña Elements puedes ir moviéndote por los distintos divs o secciones y ver el tamaño.
Para ello debes tener la página abierta al máximo tamaño. Aunque hagas más grande la ventana ya no se hace más grande la web. Mira el ejemplo del periódico El Pais.
Como ves el ancho máximo de la web son 975 px.
En la portada solo tienen una imagen a ancho completo, que es un gif. Un anuncio de suscripción que mide de ancho 980px. Es un GIF por la animación que tiene y porque utiliza muy pocos colores. El peso es de 102kb.
Si ese Gif lo hubieran hecho de 1200px pesaría más y nunca se verá más grande de 800px, ni aunque tuvieras un monitor de 50 pulgadas.
Si nos vamos a las páginas interiores vemos que las páginas de los artículos tienen un sidebar a la derecha. Vamos al inspector de elementos y vemos las dimensiones.
El cuerpo central son 640 px y la barra lateral mide 300 px de ancho. La separación de las dos columnas son los 35px que faltan para los 975px que mide la web. En este caso las imágenes que queramos que vayan en la columna principal o en la barra lateral no deben sobrepasar las medidas del contenedor. El inspector de elementos también nos dice la clase, en este caso, «.artículo_contenido» y su ancho 40rem que equivale a 640px.
Resumiendo. Nunca utilices las imágenes con un ancho mayor del apartado donde van a ir en la web. Estarás añadiendo peso extra a la página o post inutilmente.
#4- Programas para reducir el tamaño y comprimir las imágenes para la web
Nunca deberías subir, nunca, una imagen tal y como la has descargado. Aunque tengas un plugin de compresión de imágenes en tu WordPress. Tienes que recortar las fotos a las dimensiones que le correspondan y comprimir las imágenes para que perdiendo algo de calidad pesen menos. Fundamental para que la web funcione correctamente. Si no, tardará mucho en cargarse.
Para recortar, comprimir y, también, retocar las imágenes vamos a ver tres programas: Uno de pago, Photoshop, otros gratis, Gimp y dos online como Pixlr y Befunky (https://www.befunky.com/) y https://pixlr.com/es/e/.
Adobe Photoshop
Photoshop es el mejor programa para retocar imágenes. El único problema que tiene es que es de pago.
Con Photoshop puedes hacer cualquier cosa que se te ocurra. Reducir imágenes, recortarlas y exportarlas es muy sencillo.
Lo primero que tienes que hacer, normalmente, será reducir el tamaño de las imágenes. Si te descargas una foto de algún banco de datos es probable que tengan unas medidas superiores a los pixeles que necesitas para tu web. Para hacer esto en el menú de arriba Imagen – Tamaño de imagen y, en pixeles, pones el tamaño que quieras guardando la proporción.
Ahora seleccionas la herramienta recortar, como ves en la imagen de abajo, añades arriba las dimensiones exactas que quieras que tenga la imagen (para web 72px de resolución) y sitúas en las marcas la parte de la imagen que quieras recortar. Ya está. Ya tienes tu imagen con las medidas exactas para subir a WordPress.
Puedes hacerlo al revés. Recortas la foto como a ti te guste, sin poner arriba ningún tamaño, y luego en tamaño de imagen eliges el ancho que corresponde a tu web.
Ahora tendrás que elegir el formato en el que quieras exportarlo. Esta imagen la guardaremos en jpg, por lo que hay que aplicarle una compresión. En el menú de arriba Archivo – Exportar – Guardar para web.
Eliges en la pestaña de arriba 2 copias y en la derecha seleccionas el formato que quieras y ajustas la calidad. Verás la foto original con su peso y la optimizada. En este caso de 938kb pesa la imagen original, reduciendo la calidad a 40 nos hemos ahorrado un buen puñado bytes, perdiendo muy poca definición.
GIMP
Gimp es un programa que trabaja muy parecido a Photoshop pero con muchas limitaciones. Es muy sencillo de utilizar, está en español y es gratis. Tienes que descargártelo desde la página del programa http://www.gimp.org.es/descargar-gimp.html e instalarlo en tu ordenador. No tardas nada.
Reducir el tamaño de la fotografía, recortar y exportar es muy sencillo y es parecido a Photoshop.
En la barra de herramientas seleccionas recortar 
( la misma que en todos los programas de edición) y recortas la parte de la imagen que quieras. Una vez recortada, pinchas sobre la foto y en el menú de arriba imagen – recortar al contenido. Para darle el ancho correcto menú imagen – escalar imagen y con el candadito pulsado escribes los pixels.
Para gardar es menos visual que Photoshop pero se hace igual. Archivo – Exportar como y abre una ventana para guardar el archivo. Le pones el nombre y eliges donde guardarlo y debajo de la ventana principal eliges el tipo de archivo. Gimp te permite exportar en WebP. Nosotros seleccionamos imagen jpeg y le damos a exportar. Nos sale la ventana de compresión del jpeg. Aquí simplemente tienes que ajustar la calidad y tener pinchada la casilla mostrar vista previa en la ventana de la imagen para poder ver el tamaño del archivo. Exportar y listo.
Con Gimp también puedes retocar las imágenes de color, tintar, desenfocar, rotar… Es el sustituto ideal de Photoshop.
Programas gratuitos online para optimizar imágenes
Hemos visto dos programas o software que debes instalarte en tu ordenador. Pero hay programas online con los que puedes reducir y optimizar las imágenes. El funcionamiento es muy similar. Aunque tienen muchas carencias para el tratamiento de las imágenes para optimizar las fotos para cualquier blog van sobrados. Vemos algunos.
Pixlr
Misma interface que Photoshop y mismo funcionamiento. Totalmente online y gratuito. Reducir una imagen, recortar y exportar se hace exactamente igual que Photoshop. Tiene algunas funcionalidades más muy simples como añadir rótulos, rotar la imagen, añadir filtros, dibujar formas…
Befunky
Programa online y gratuito que tampoco está mal para tratar un poco las fotografías o imágenes. Recortar y cambiar tamaño, en la barra lateral, son los comandos que debemos utilizar para preparar nuestras imágenes para WordPress.
BeFunky te permite retocar fotos y aplicar filtros, añadir rótulos, rotar, tintar, clonar… Tiene plantillas y puedes crear un collage o crear diseños.
Como ves es muy fácil y rápido preparar tus imágenes para subirlas a WordPress con un peso mínimo.
#5- Subir las imágenes a WordPress
Ya tienes tus fotos preparadas y optimizadas para subir a tu web o blog. Solo te queda un paso. Nombrarlas bien.
Lo que lee Google de tu imagen, sobretodo, es el nombre del archivo y el alt, que sería como una pequeña descripción o subtítulo.
Por lo tanto, nunca nombres tus fotos como 01.png o DSC00034.jpg ni nada por el estilo. Nombra tus fotos con la palabra clave o términos que quieras posicionar y, obviamente, que esa foto tenga relación. Como en cualquier archivo no utilices mayúsculas ni caracteres especiales.
El nombre del archivo coincidirá con el título, que puedes modificarlo al subir la imagen a WordPress. El título aparecerá cuando pases el ratón por encima de la imagen.
El alt, que es lo primero que aparece en el html de la imagen, es muy importante. Hay que rellenarlo con una mini descripción o subtítulo de la imagen, ya que Google lo utilizará para clasificar esa imagen. El alt es el texto alternativo y, en los principios de internet, se mostraba este texto cuando las imágenes no cargaban, por la lentitud de la conexión.
Los siguientes campos son la leyenda, que si lo rellenas es un texto que aparecerá debajo de la fotografía y la descripción.
La leyenda puede ser interesante rellenarla porque si estás escaneando un artículo, el texto de debajo de las fotos suele leerse.
La descripción es importante si quieres posicionar tus fotografías en la búsqueda por imágenes y llevarte unas cuentas visitas desde ahí. Muchos usuarios, sobre todo los más jóvenes, buscan por imágenes, si, por ejemplo, quieren comprarse unas zapatillas. Igual podríamos decir para lugares turísticos u hoteles. Las imágenes pueden traerte usuarios a tu web muy interesados en tu producto.