Sin duda la optimización de las imágenes es una de las tareas más importantes para el cuidado de un proyecto en Internet. Muchos desarrolladores y editores consideran la optimización de las fotos como una de las acciones más importantes de mantenimiento para mejorar el SEO, el rendimiento y los resultados de un proyecto.
[spacer height=»15px»]
[spacer height=»15px»]
Por qué tenemos que cuidar el tema de las fotos
Superar a la competencia es uno de los objetivos que se persiguen cuando realizamos tareas de mantenimiento y optimización en un blog o web. Con un tamaño adecuado y una compresión correcta podemos mejorar la experiencia que ofrecemos a los usuarios, que podrán navegar por nuestro sitio con una carga rápida y se marcharán con un recuerdo de sensación agradable, importante para que vuelvan a visitarnos y conseguir la interacción. Estas mejoras nos sitúan por encima de otros muchos proyectos que no cuidan estos detalles y aumentan nuestras posibilidades de mejorar posiciones en los buscadores como Google.
Hace un tiempo queríamos hacer proyectos muy bonitos, con gráficos espectaculares, sin dar mucha importancia al tiempo de carga, que aunque había que sacrificar una cierta espera, podíamos ofrecer una página espectacular. Actualmente las cosas han cambiado y mucho.
La entrada en escena de los dispositivos móviles han cambiado radicalmente los planteamientos sobre la importancia de optimizar el contenido.
Si nos fijamos en los grandes como amazon.es podemos ver a simple vista que no pierden mucho tiempo en diseños complejos. Van al grano. Las imágenes son muy ligeras y de poca calidad. En muchos productos tienen un tamaño que no excede de 320px, porque es un tamaño adecuado para una carga rápida en dispositivos móviles. No quieren ofrecer algo bonito. Buscan más bien una experiencia práctica, útil y rápida. Este formato rápido se puede crear para la información inicial y ofrecer si fuera necesario, más información detallada y con más calidad en otra página, donde al usuario no le molestará tanto esperar un poco para cargar una buena información adicional.
Lo cierto es que saturar los recursos de un proyecto con imágenes de gran tamaño provoca, aunque pocos lo saben, muchos problemas de todo tipo. No solo representa un problema de espacio. También aumentamos el tiempo de carga, hacemos lento el funcionamiento general del sitio, incluso para trabajar dentro, lo que representa una menor productividad. Los robots que repasan y califican nuestra web para un posterior posicionamiento, basado en cálculos algorítmicos, registran todo lo que hay en el interior profundo del código del proyecto visitado. Si obtienen una conclusión de descuido y dejadez (fácil de descubrir para un robot) calificarán el proyecto como mediocre e irrelevante, enterrándolo en las últimas posiciones, que nadie alcanza, si es que llegan a indexarlo.
Si subes fotos de cualquier formato o tamaño a tu blog o web, sin preocuparte de cuidar los detalles, estás arruinando las posibilidades de futuro de tu proyecto.
Una subida descuidada de archivos, también puede migrar a tu servidor, problemas de malware o software malicioso.
Si tienes pocos conocimientos sobre desarrollo web con WordPress y quieres obtener buenos resultados en un ambiente digital muy competitivo, es bueno ser humilde, buscar información, escuchar a los expertos y hacer con delicadeza aquello que recomiendan. Si por el contrario te crees más listo que Google y piensas que una pequeña diferencia en el tamaño de las fotos no importa y además nadie se dará cuenta porque al fin y al cabo la foto parece verse bien… estás muerto a medio y largo plazo. Sin duda.
Poniendo un ejemplo en la vida real, imagínate que tienes que tapar unas pequeñas grietas en la pared de tu casa. Para cubrir esa necesidad haces una demanda para conocer a diferentes proveedores pueden ofrecerte un producto que cubra su petición. Ese producto será yeso para tapar grietas. En una habitación tienes que tapar 5 grietas. Un primer proveedor te ofrece 5 bolsitas (fotos) de 15 gramos, la medida justa para realizar la reparación mientras que un segundo proveedor te ofrece, para hacer lo mismo, 5 sacos de 50 kilos. Evidentemente el primer proveedor nos dará un mejor servicio.
En la web con las fotos pasa algo similar y si no tenemos muchos conocimientos, podemos estar ofreciendo sin darnos cuenta, las fotos a modo de sacos de 50 kilos. Para ofrecer las cantidades correctas lo primero es averiguar las fotos adecuadas para el tema que estamos utilizando en el proyecto web o blog. Mucha gente intentan optimizar instalando plugins que, sin saberlo, al final pueden complicar aún más los problemas que irán en aumento de forma directamente proporcional al tamaño del proyecto, haciendo cada vez más complicado el crecimiento del proyecto.
Si respetamos las buenas costumbres de manera estricta desde el principio evitaremos los problemas en el futuro. Una trampa que se encuentran muchos sitios web es que los problemas con los gráficos se detectan cuando el proyecto está muy avanzado y en estos casos las soluciones son más difíciles si se tienen que modificar con detalles muchos gráficos acumulados a lo largo del tiempo. En algunos casos es incluso mejor iniciar un nuevo proyecto que solucionar estos errores y sus muchas consecuencias, como por ejemplo errores de maquetación o diseño entre otros.
Hay muchos plugins que tienen sus preferencias de tamaño y los crean nuevos, como por ejemplo WooCommerce y la cosa se puede ir complicando porque podemos acumular 8, 10, 12 o más copias de diferentes tamaños de una misma foto, alguno de ellos inútiles porque nunca se usarán. Es bueno detectar y solucionar estos errores porque evitaremos clonar el error cada vez que subimos una foto. Si a todo esto además se complicará si desde otros sitios más populares que el nuestro nos hacen hotlinking porque se comerán nuestros recursos.
Tamaños por defecto de las fotos
Cuando subes una imagen a tu WordPress, este se triplica, creando 3 versiones más de diferentes tamaños, establecidos por defecto en 150×150, de 300×300 y de 1024×1024. Estos tamaños los podemos modificar fácilmente en Ajustes > Medios.
[spacer height=»15px»]
[spacer height=»15px»]
Una buena costumbre sería no subir ningún gráfico que supere los 1024 que se establecen por defecto. Si el tema que utilizamos no es muy exigente y sus medidas son inferiores, respetaremos los tamaños sugeridos por el tema. Si además podemos utilizar gráficos más pequeños sin problemas, iremos ajustando hasta el mínimo con el que puedan verse bien en dispositivos móviles, que generalmente no son superiores a 320 px.
Existe una tendencia natural a querer ver las fotos en su máxima calidad, como ejemplo de trabajo bien hecho. Lo cierto es que los datos en la web dicen que es mejor lo contrario y es bueno cierto sacrificio de calidad, sin perder usabilidad, en beneficio de la velocidad de carga y baja transferencia, especialmente en los dispositivos móviles cuyo uso no para de crecer.
Dicen que es mejor prevenir que curar y en WordPress es mejor trabajar bien el presente respetando unas buenas costumbres que tener que solucionar los complejos problemas futuros.
Una acción buena y sencilla en los trabajos de mantenimiento es hacer un repaso periódico de los archivos acumulados para detectar y eliminar todo aquello que no se utiliza y que está ocupando recursos. Si nunca realizamos este mantenimiento, puede ser sorprendente la cantidad de basura antigua que no se utiliza y que podríamos eliminar (asegura una copia de proyecto antes de ponerte a eliminar). Banners que no se usarán más, gifs frikis, fotos extrañas que nadie sabe de donde salieron, gráficos lelos que cambiaste por otros más chulos pero sin eliminar el viejo, pruebas que no salieron y ahí quedaron… y muchos más.
Herramientas para ajustar las imágenes
Para obtener un buen resultado hay que seleccionar el formato y la configuración según el contenido del gráfico y otros parámetros visuales y técnicos. Existen herramientas sencillas que pueden venir muy bien para estas acciones.
Plugins de WP para optimizar fotos
No es necesario ni recomendable el uso de plugins para la optimización y aunque en algunas ocasiones pueden venir muy bien en general pueden traer más problemas que soluciones, aclarando que se hace referencia exclusivamente a plugins para ajustar gráficos y no a los propios y necesarios en relación a SEO u otros.
EWWW Image Optimizer
Un plugin que por sus características puede ser interesante es EWWW Image Optimizer, que puedes encontrar en el siguiente enlace:
EWWW Image Optimizer es un plugin compatible para JPEG, JPG, PNG y GIF que incluye las librerías y no depende de servicios externos que no siempre son seguros. Permite amplias posibilidades de configuración e incluso podrás optimizar las imágenes del theme y los plugins. La parte negativa es que necesita un alto consumo de recursos.
Smush Image Optimization, Compression, and Lazy Load
Plugin Gratuito. Compresión sin pérdida en la calidad de la imagen. Cambia el tamaño de la imagen. Detecta tamaños incorrectos. Optimice las imágenes incluso fuera de la biblioteca de medios. Optimización automatizada. Actualizado: Integración con bloques de Gutenberg. Compatible con multisitios. Procesa archivos PNG, JPEG y GIF.
Crop and Resize Images
Un plugin práctico para los que no saben cómo recortar una imagen. Sirve para recortar y re-dimensionar las fotos y utiliza las funciones nativas de WordPress. Puedes descargar Crop and Resize Images o leer más en la siguiente dirección:
Sugerencias para la Optimizar Imágenes
Formatos vectoriales
Las fotos con un formato vectorial no se ven afectados por la resolución o escala. Este detalle las presenta inicialmente como la mejor opción los diferentes dispositivos y alta resolución.
Compresión GZIP
Reduce y comprime todos los recursos SVG. Muchas aplicaciones de dibujo contienen meta-datos innecesarios que se pueden borrar. En un proyecto basado en WordPress es necesario que el servidor donde se aloja el proyecto permita sin problemas la compresión GZIP.
Busca la calidad adecuada
Realiza pruebas para ofrecer decidir una configuración de calidad óptima. Esta acción se tiene que hacer al inciar el proyecto para dejar normas de proceso para todas las imágenes que se suben para cada propósito, situación y aplicación. No dudes en reducir la configuración de calidad al máximo posible, sin llegar a la mediocridad en el resultado ofrecido. Conocer estos datos y aplicarlos en el desarrollo y mantenimiento de un proyecto da muy buenos resultados y la reducción en bytes y en tiempos de carga es muy considerable.
Busca la automatización en tus procesos: utiliza las herramientas adecuadas para automatizar el trabajo y mantener así una optimización permanente.
Elimina los metadatos irrelevantes
muchas imágenes contienen meta-datos innecesarios o incluso erróneos, como información geográfica, información sobre la cámara usada, etc. Si no sabes como llegar a estos datos busca info y utiliza una herramienta adecuada para eliminar estos datos.
Ofrece las fotos ajustadas a la escala adecuada
Para esta acción puedes modificar el tamaño de los gráficos en el servidor y procura que el tamaño de “visualización” sea lo más aproximado posible al tamaño natural de la imagen, con una atención especial en aquellas imágenes más grandes que generan sobrecarga.
