Si tiene un blog o un sitio web de comercio electrónico, necesariamente muestra una cierta cantidad de imágenes. Esto es fundamental por varias razones. Por un lado, necesitas ilustrar tu tema o tus productos. Entonces, no lo ocultemos, su sitio solo se vuelve más bonito. Por otro lado, la imagen permite captar la atención de tus visitantes en tu plataforma o redes sociales. Por último, las fotos y las ilustraciones también se han convertido en importantes vectores de referencias naturales.
Sin embargo, la acumulación de imágenes puede convertirse rápidamente en un freno para el rendimiento de su sitio web … Realice la prueba en una plataforma como Herramientas de pingdom para darse cuenta! No solo pueden constituir hasta el 80% del espacio de su sitio, sino que también representan el 50% de los scripts generados. El tiempo de carga de tus páginas aumenta… Si no se hace nada, no es bueno para tu SEO en Google ni para la experiencia del usuario.
Veamos cómo reducir el impacto negativo de tus fotos e ilustraciones ¡y haga que su sitio web sea más eficiente!
Para las imágenes, lo que importa es el tamaño
Este problema, WPformation ya lo ha procesado, me diras. Sí, en particular para presentar una muy buena herramienta a la que sin duda volveremos. Sin embargo, optimizar las imágenes implica inevitablemente gestionar su tamaño. Estamos hablando aquí de dimensión y no de peso. Porque este aspecto afecta tanto al rendimiento como a la estética. Si bien influye directamente en esta cuestión de peso, precisamente. Además, a menos que tenga un espacio de almacenamiento limitado en su servidor, rápidamente se dará cuenta de que el peso es un factor secundario (pero que no debe ignorarse). Si bien el tamaño puede obstaculizar rápidamente el rendimiento de su sitio con las consecuencias mencionadas anteriormente … ¡Pero tenga cuidado con las buenas prácticas en esta área!
El error más común es reducir el tamaño de sus imágenes mediante CSS. Sepa esto, al hacer esto, se está infligiendo el doble. Por un lado, esto no impide la carga de la imagen original que es demasiado grande. Pero además, se debe cambiar el tamaño al formato ordenado por CSS. Por tanto, se lleva a cabo una operación que se puede optimizar y otra que se puede evitar. Mala elección … Idealmente, el tamaño exacto de la imagen que se muestra corresponde al que subiste. ¡Para ello, podemos cambiar el tamaño de una imagen directamente en WordPress!
Cambiar el tamaño de las imágenes directamente en WordPress: una herramienta para usar con moderación
Sí, pero el efecto es el mismo en la medida en que la manipulación aún se basa en el contenido original. Además, deberías hacer esto para cada imagen cargada. Una tarea que rápidamente resultará abrumadora …
¡Genere sus propios tamaños de imagen!
Cuando subes una imagen a tu WordPress, a través de tu administración o directamente en FTP, el famoso CMS generará varios. La imagen original, por supuesto. Pero también tres propios y luego otros dependiendo del tema que hayas elegido y tu posible creador de páginas.
Sin embargo, es posible que estos tamaños generados aún no coincidan con los que se muestran en su sitio web. Esto se debe a que, por diversas razones, necesita mostrar tamaños personalizados. ¿Cómo se puede solucionar este problema en un momento en que estas dimensiones se multiplican con la proliferación de plataformas receptivas y prácticas multipantalla?
Método 1: usar tamaños predeterminados de WorPress
Primer método (pero limitado): modificar los tres tamaños generados por WordPress. Para hacer esto, vaya a la administración de WordPress en la pestaña Configuración → Medios. Luego solo tiene que ingresar las nuevas dimensiones deseadas. Esta forma de hacer las cosas al menos tiene el mérito de no tener en tus manos el código. Pero lo limita a tres tamaños y puede entrar en conflicto con los ajustes preestablecidos de su tema.
Miniaturas de WordPress: una de las configuraciones básicas de administración para imágenes
Método 2: agregue tamaños de imagen en su tema
¡Pero puedes tener más control! Solo, para eso, tendrás que modificar el código. Es por eso que se recomienda encarecidamente tener un tema hijo. Si no es el caso, encontrará cómo hacer el suyo fácilmente aquí. Vaya a la raíz de su tema hijo, abra el archivo functions.php y agregue esta línea al final:
add_image_size( 'nom-de-taille-photo', 1080, 720, false) ;
Dentro del paréntesis, el texto entre las comillas simples es el nombre que le da a su nuevo tamaño generado. En cuanto a los números, el primero corresponde al ancho mientras que el segundo constituye la altura. Todo en píxeles, por supuesto. Por último, el atributo «falso» indica que esta nueva imagen no debe recortarse del original. Para habilitar esto, deberá ingresar «verdadero» en su lugar. Agregue una línea por cada nuevo tamaño que desee generar.
Podemos generar tamaños de imagen personalizados en WordPress con una sola línea de código en PHP
Esta manipulación realizada, estos nuevos formatos se generarán para cada nueva imagen cargada en su WordPress. Si toca un poco el código PHP, incluso puede ingresar el nombre de sus nuevos tamaños en lugar de los antiguos directamente en el código de las plantillas de su página, como categorías o archivos. ¡Tenga cuidado de hacerlo bien en el tema hijo!
Sin embargo, los archivos que ya están presentes en su servidor no reciben un nuevo tamaño… ¡CATASTROPHE! Afortunadamente, hay una solución: Regenerar miniaturas !
Método 3: un complemento mágico para tus imágenes
¿Qué permite Regenerate Thumbnails? Bueno, este complemento cambia el tamaño de todas las imágenes existentes en su WordPress para regenerarlas a nuevas definidas. Créame, si tiene miles de fotos e ilustraciones que se han acumulado a lo largo de los años, este complemento será útil.
Su uso es muy sencillo. Solo descárgalo desde el directorio oficial. Una vez que la extensión está activada, dos soluciones están disponibles para usted. Puede regenerar cada imagen una por una seleccionándolas en la pestaña «Medios» de su administración de WordPress. O vaya a Herramientas → Regenerar miniaturas. A continuación, tendrá la posibilidad de regenerar todas sus imágenes ya presentes. Por último, también puede eliminar tamaños que ya no figuran en su sitio.
Regenerate Thumbnails te permite cambiar el tamaño de todas sus imágenes a los nuevos formatos creados en el código de tu WordPress
Por tanto, generar nuevos tamaños es interesante en más de un sentido. De hecho, este método permite adaptar el archivo llamado al que se muestra en su sitio. Esto evita el trabajo de cambio de tamaño y, por lo tanto, promueve una visualización más rápida para sus visitantes. Esta es una ventaja significativa para su SEO y la experiencia del usuario de su sitio web.
Este es un buen primer paso para aligerar las imágenes cargadas en su WordPress, incluso si existen otras soluciones por otros medios. De cualquier manera, este es un buen punto de partida para salir de la pesadilla de la acumulación de imágenes en blogs y sitios web de comercio electrónico.