1.- INTRODUCCION
Las imágenes ocupan espacio por eso es importante hacer un tratamiento de las mismas para que estén optimizadas de forma que no ocupen ni más ni menos de lo necesario.
En la web del mcep las imágenes están predefinidas para los siguientes tamaños:
Miniaturas: 200 x 200
Imágenes de tamaño medio, las que utilizamos en los artículos: tienen de ancho 640 x alto proporcional
Imágenes grandes que son las que utilizamos en las galerías tienen un ancho 1024 x alto proporcional. Habitualmente no las utilizamos.
Las imágenes destacadas, que obligatoriamente vamos a utilizar en la nueva web que estamos rediseñando, tienen unas dimensiones de 800×425. Si no se utiliza esta opción el programa pondrá una imagen genérica por defecto.
Las imágenes que utilizamos en la columna de la derecha tienen las siguientes dimensiones ancho 800 x alto proporcional
Todas ellas deben estar con una resolución de 75 píxeles por pulgada.
Esto último es importante y lo explico con un ejemplo. Pensad en una esponja de tamaño normal, puesta en una balanza no pesa lo mismo si está empapada en algún líquido que si está seca, pero en ambos casos la esponja es igual de grande y se ve igual. Con las imágenes pasa lo mismo, se ven igual en las pantallas si están a 75 ppp o a 300 ppp. (Una imagen a 300 ppp se utiliza para imprimirla con más calidad que una de 75 pero en una pantalla de ordenador o en una televisión ambas se ven igual, con la misma calidad)
Para el tratamiento de imágenes para la web hay que tener en cuenta estos dos aspectos; tamaño y resolución.
2.- WEB DONDE CONSEGUIR IMÁGENES CON LICENCIA GNU DE LIBRE USO
No siempre tenemos imágenes adecuadas o de calidad para poner en nuestros artículos por eso os voy a recomendar unas direcciones web donde se pueden adquirir imágenes sin licencia o con licencia GNU, de libre uso:
En primer lugar, en Google imágenes, marcando la opción de Herramientas y dentro de estas Derechos de uso y luego seleccionar Licencias Creative Commons. Nos pueden pedir hacer una referencia a la autoría. Luego os indicaré dónde ponerla.
En segundo lugar, hay algunas webs de imágenes de uso libre con licencia Creative Commons:
Os cito dos interesantes:
Para bajarte una imagen puedes hacerlo pulsando un botón que hay para descargar.
Si intentas hacerlo con el botón izquierdo del ratón sobre la imagen podrías bajártela en un formato no muy conocido, formato avif[1], que no podrás abrirlo con los programas habituales de tratamiento de imagen.
Como en internet todo tiene remedio, si os bajáis una imagen en formato avif podéis pasarla a jpg en esta página de conversión de formatos:
https://www.freeconvert.com/es/avif-to-jpg o en esta otra: https://converter.app/es/avif-a-jpg/
Otra página con imágenes de código GNU es
Y para finalizar también hay webs de imágenes creadas por Inteligencia Artificial que habría que pagar pero que nos permiten crear un número pequeño de ellas a modo de prueba. Si queréis enredar un poco tenéis estas de ejemplo:
https://www.educaciontrespuntocero.com/tecnologia/generar-imagenes-con-ia/
[1] Formato avif es un nuevo formato que comprime la imagen sin perder calidad. Lo utilizan algunas plataformas como Netflix y seguro que se va a hacer muy popular.
3.- TEXTO ALTERNATIVO Y LEYENDA EN LAS IMÁGENES DE LA WEB
Una vez tengamos las imágenes preparadas para la web tenemos que recordar que al utilizarlas debemos ponerles un texto alternativo, cosa que no hacemos habitualmente y que es muy importante para los lectores de pantalla (que suelen utilizar las personas con discapacidad visual) que hacen que la web sea accesible. Si la imagen es meramente decorativa no se pone texto alternativo, en los demás casos debe ponerse.
Otra cosa es la leyenda que deberíamos utilizar para cumplir la exigencia de las imágenes obtenidas con licencia Creative Commons
Aunque esto sea objeto de otro videotutorial voy a poner unas capturas de pantalla donde se puede escribir este texto alternativo, así como las exigencias de las licencias Creative Commons:
Al insertar una imagen en un artículo en la web aparece este cuadro:
Esta imagen no es decorativa, corresponde a la presentación de un libro, es informativa, por lo que el texto alternativo debería ser “Libro Entre la escuela y mi casa de Lupe Pérez del Movimiento Freinet”.
En leyenda deberíamos poner la autoría de la foto si es una exigencia de la licencia Creative Commons, en los demás casos podemos ignorarlo. En este caso “Portada de María Jesús Feria”.
Lo veremos mejor en un videotutorial específico acerca de cómo insertar imágenes en cualquier artículo de la web.
4.- IMÁGENES DESTACADAS. MUY IMPORTANTE PARA CONSEGUIR POSICIONAMIENTO SEO (básicamente, optimizar la web para tener un mejor posicionamiento en los buscadores o, dicho de forma más simple, conseguir más visitas a través de consultas en google).
En la nueva web tienen una importancia capital las imágenes destacadas y ello por varias razones:
- La función de una imagen destacada es llamar la atención del visitante y dar una idea visual de los contenidos o la temática de la búsqueda o consulta realizada. Estas imágenes suelen ser más atractivas que el resto de las imágenes que utilizamos en los artículos.
- Google las utiliza para servir resultados en las búsquedas. En un futuro inmediato oogle las priorizará sobre el texto escrito. Podéis hacer una prueba, en un navegador de un móvil borráis el historial y luego buscáis información escribiendo “Educación” en el buscador y veréis que ya hay muchos resultados con imágenes. Estas imágenes son imágenes destacadas en esas webs con una configuración determinada que suele estar muy estudiada.
- Nuestra web ha pasado a ser una web más visual y, por tanto, más atractiva. La gente que busca información se siente más atraída hacia las webs que presentan su portada de forma gráfica, con poco texto, pero relevante. Por eso hemos decidido que se utilicen imágenes destacadas bien construidas
Hago un inciso, hemos decidido que se utilicen también extractos en los artículos, extractos que aparecerán en la portada y que no tienen nada que ver con lo que hacíamos hasta ahora, que cortábamos unas frases del artículo, a veces poco relevantes.
Volviendo a las imágenes destacadas, sin ser expertos podemos realizar una pequeña configuración de nuestras imágenes destacadas para obtener mejor posicionamiento web. Veamos unos simples consejos:
En el artículo titulado: “Presentación del libro Educar es amar de Paco Olvera” el tratamiento de la imagen destacada (la imagen es una foto de la presentación del libro o una imagen del libro mismo) podría ser este:
- Debe llevar un título descriptivo, no muy largo, por ejemplo, valdría: “Presentación libro Educar es amar del autor Paco Olvera” puede coincidir con el título del artículo. Cuanto más largo sea el título, peor, podría ser calificado de spam.
- La imagen destacada debe llevar un texto alternativo. Ese texto puede ser el mismo que el del título con alguna palabra clave añadida, en nuestro caso podría ser: “Presentación del libro Educar es Amar del autor Paco Olvera del Movimiento Freinet”. ¡Google penalizará los textos que parecen testamentos, por largos!. El texto alternativo se dejará en blanco si la imagen es meramente decorativa. En nuestro ejemplo es una imagen informativa.
- Lo último es la descripción de la imagen. Si la misma describe visualmente el contenido de la entrada, entonces en la descripción se hace textualmente, por ejemplo: “Esta imagen representa el momento en el que el autor del libro Educar es amar, Paco Olvera, del Movimiento Cooperativo de Escuela Popular, presenta su libro en un acto organizado por la librería de Escuela Popular ante un público integrado por docentes”
Las imágenes hay que tratarlas desde dos puntos de vista, el posicionamiento SEO y la accesibilidad.
El posicionamiento SEO tiene que ver con el tratamiento del texto alternativo y la accesibilidad tiene que ver con los estándares de buenas prácticas en la web que se definen en el protocolo W3. Podéis ver más información en este enlace: https://www.w3.org/WAI/tutorials/images/decision-tree/
El protocolo no solo hace referencia al tratamiento de las imágenes sino que también se ocupa de otras cuestiones. Este enlace también está en wordpress en el apartado de edición de la imagen destacada.
En definitiva, en el texto alternativo hay que utilizar palabras clave de manera apropiada y la frase que pongamos debe coincidir con parte del título y con el contenido de la entrada. Serían palabras clave a utilizar: Educación, mcep, Freinet, movimiento Freinet, escuela moderna, técnicas Freinet, pedagogía Freinet, metodología activa, educación de las emociones, educación en valores… eligiendo en cada caso solo una o dos palabras que se utilizarán por google para el posicionamiento SEO.
Una última cosa, las palabras clave que pongamos en el texto alternativo no influyen solo en la presencia en google del artículo en cuestión, influyen también en el posicionamiento SEO del conjunto de la web, de ahí la importancia de seguir el protocolo de publicación que hemos distribuido.
En resumen, el titulo de la imagen es una especie de cortesía para orientar al lector (en las imágenes destacadas no aparecerá aunque lo escribamos). El texto alternativo es para presentar el artículo a los bots de los buscadores, especialmente a Google y a los lectores de pantalla y es lo realmente importante para el posicionamiento SEO y la descripción sirve para presentar la imagen a las personas invidentes que cuentan en su ordenador con un lector de pantalla.
4.- Por último
En el documento adjunto, Tratamiento de imagenes para la web del MCEP, además de lo anteriormente expuesto veréis un pequeño manual sobre la utilización de los programas GIMP y Photoshop para conseguir reducir imágenes en tamaño y resolución y optimizarlas para la web.
En el siguiente videotutorial veréis como hacerlo de forma práctica.
Rogamos que se tengan en cuenta estas orientaciones. Gracias.