En esta entrada te hablo de:
Subir imágenes a la Biblioteca Medios de WordPress con el tamaño, peso y resolución adecuada es clave para ahorrar espacio en la memoria de tu hosting . ¿Pero cuáles son las medidas mágicas y cómo conseguir reducir el peso de los archivos?
Los tamaños de las imágenes en WordPress
Lo primero que debemos saber es que cuando subimos una imagen a WordPress no se crea un único archivo, sino varios, con diferentes tamaños. Por un lado, WordPress puede crear hasta 7 tamaños más:
- Tamaño de la miniatura: 150 x 150
- Tamaño medio: 300 x 300
- Tamaño medio grande: 768 x 768
- Tamaño grande: 1024 x 1024
- Tamaño grande x1,5: 1536 x 1536
- Tamaño grande x2: 2048 x 2048
- Tamaño escalado: 2560 x 2560
Además de estos tamaños, es posible que el tema o algunos plugins creen otros tamaños más. Woocommerce, por ejemplo crea 3 tamaños más:
- Miniatura WooCommerce: 300 x 300
- Imagen principal WooCommerce: 600 x 600
- Miniatura de la galería WooCommerce: 100 x 100
Por otro lado, es importante saber que solamente se crearán nuevos archivos siempre y cuando la imagen original sea mayor a estos tamaños. Es decir, si subimos una fotografía de 3.000px de ancho, además de la original, se crearán 7 archivos más con todas las medidas de WordPress comentadas. Si por el contrario subimos una imagen de 750px de ancho, solo se crearán 2 archivos más: uno de 300px de ancho y otro de 150px.
Dónde se almacenan las imágenes en WordPress
A parte de ver todos los elementos subidos en la Biblioteca Medios de WordPress (en el panel izquierdo del editor) también podemos buscarlos en su carpeta correspondiente dentro de los archivos de WordPress. Si como yo, trabajas con cPanel, solo tendrás que ir a:
> Archivos
> Administrador de archivos
> public_html (o si tienes varias webs, quizás esté en la carpeta que tiene como nombre su dominio)
> wp-content
> uploads
Los archivos se organizan por años y meses. En estas carpetas podrás ver a parte del medio original, las copias que se han hecho a distintos tamaños.
Cómo evitar crear múltiples archivos de imágenes en WordPress
Hay algunos trucos para evitar que se creen tantos archivos si crees que nunca los vas a utilizar. En mi caso, como intento subir la imagen a la medida que voy a necesitar, incluso preparando la misma foto para escritorio, tablet y móvil con diferentes tamaños; prefiero que no se dupliquen los medios para poder ahorrar espacio en mi hosting.
Aquí te dejo los temas más populares para usar con Elementor:
ℹ️Truco: cómo evitar que nuestros medios se multipliquen en los tamaños miniatura, medio y grande de WordPress
¡Muy fácil! Solo tendrás que ir al panel izquierdo de WordPress, a “Ajustes > Medios” y en la anchura y altura de los tres tamaños poner 0.
ℹ️Truco: cómo evitar que nuestros medios se multipliquen en los tamaños medio grande, 1536, 2048 y 2560
Aunque WordPress también crea archivos de estas medidas si no le indicamos lo contrario, no las encontramos en el panel Ajustes. Para evitarlo, hay dos formas:
- En primer lugar, añadiendo código en el archivo functions.php. Yo nunca lo he probado, pero Fernando Tellado lo explica muy bien en este artículo de ayudawp.com.
- A través del plugin Disable Media Sizes. Es tan fácil como instalarlo y activarlo en tu WordPress y seleccionar todas las casillas.
Voilà! De esta forma ya no tendremos 7 archivos adicionales de un mismo medio.
Pero, ¡OJO⚠️! Estos trucos no eliminan los archivos de más que ya tienes subidos. El plugin empezará a funcionar a partir de que lo instales, la próxima vez que subas una imagen. Para eliminar las imágenes de más existentes hay dos formas:
- Ir a los archivos de WordPress y eliminarlas manualmente.
- Usar el plugin Regenerate Thumbnails.
Las mejores medidas de imágenes para Elementor
Ahora que hemos visto todos los tamaños que crea WordPress, supongo que te preguntarás cuáles son las mejores medidas a la hora de subir una imagen a la Biblioteca de Medios, o eso me pregunté yo hace un tiempo hasta llegar a la conclusión que resumo en esta entrada.
En primer lugar, me gustaría recalcar que es una conclusión a la que he llegado después de leer, investigar y probar, pero que no se trata de una ciencia exacta, depende también de cada web, cada imagen y su propósito.
Al grano:
Resolución
Empezamos por lo más fácil. Como las imágenes son para ver en pantalla con 72 ppp será suficiente.
Formato
- JPG: en imágenes suelo usar JPG. Pierde un poco de calidad al subir el archivo a WordPress, pero en general pesa menos.
- PNG: siempre que necesite transparencias o mejorar la calidad uso PNG, teniendo en cuenta que estos archivos suelen ser más pesados.
- GIF: únicamente en el caso que necesite un GIF (una animación) en un widget que no sea Lottie.
- SVG: en iconos. Hay muchos expertos que comentan que no son archivos muy seguros, pero para el tipo de webs que yo suelo maquetar funcionan a la perfección. No se pixelan y si los subes en negro (#000000), se puede modificar su color directamente en Elementor. Normalmente me los descargo de Flaticon.
- JSON: para el widget Lottie. Normalmente me los descargo en LottieFiles.
- MP4: intento no subir vídeos a la Biblioteca Medios porque pesan mucho. Los añado a YouTube o Vimeo y utilizo los widgets de vídeo para incrustarlos en mi web.
Tamaño
El tamaño de la imagen es para mí el kit de la cuestión y la variable más importante. Cuando selecciono o creo y optimizo una imagen (ya sea fotografía, ilustración o icono) para Elementor, intento pensar en qué lugares o widgets la voy a colocar: en una sección, columna, en el widget imagen, etc; qué espacio de la pantalla ocupará y en qué dispositivo se mostrará.
Hasta hace unos años, la medida más usada por la mayoría de desarrolladores o maquetadores en WordPress era 1024px de ancho en las imágenes más grandes. No obstante, cada vez hay pantallas con más resolución, con lo que últimamente los expertos recomiendan doblar el número de px de ancho a 2048 para las imágenes a pantalla completa, es decir, las que colocaremos de fondo en las secciones para escritorio.
Recuerda que es importante adaptar las imágenes a los distintos dispositivos (escritorio, tablet y móvil), especialmente las imágenes de cabecera. ¿Por qué? Por un lado para asegurar que la imagen no se corta y que muestras lo que quieres enseñar, y por otro para ganar rapidez. Cuanto menos tarde en cargarse una página en cada dispositivo, mejor. Yo las reduzco a 1.536px en escritorio y 720px en móvil, que es el doble del ancho al que Elementor cambia el diseño de escritorio a tablet y de tablet a móvil.
El resto de imágenes deberán ser más pequeñas. En el caso de poner fotos de fondos en columnas, normalmente las pongo a la mitad (1024 en escritorio, 768 en tablet y 360 en móvil). Por último, en el caso de los widgets, intento redimensionarlas a 768, 300 o 150, dependiendo de cada caso.
Además, ten en cuenta que en todo momento hablo del ancho. El alto será proporcional dependiendo de la relación de aspecto que queremos: 1:1 (cuadradas), 3:2, 4:3, 5:4, 16:9, etc.
Por último, comentar que estoy duplicando en todo momento la medida estándar (te acuerdas que habíamos dicho que es 1024 para pantalla completa en escritorio¿?) y que gracias a Elementor acabaremos de ajustar las imágenes para que tengan el tamaño que nos interese. Pero si prefieres priorizar la velocidad a la calidad de la imagen, puedes optar por usar los tamaños estándar, es decir, la mitad de px de todas las medidas comentadas.
Os resumo todo lo que acabo de explicar en una tabla:
Tamaño x2 (ancho) ¡RECOMENDADO! | Tamaño estándar (ancho) | Qué espacio de la pantalla ocupa | En qué elemento de Elementor | Dispositivo |
2048 | 1024 | Pantalla completa | Fondo en secciones, sliders o carrusel | Escritorio |
1536 | 768 | Pantalla completa | Fondo en secciones, sliders o carrusel | Tablet |
720 | 360 | Pantalla completa | Fondo en secciones, sliders o carrusel | Móvil |
1536 | 768 | Más de media pantalla | Fondo en columnas de +50%, sliders, carrusel o imágenes | Escritorio y tablet |
720 | 360 | Más de media pantalla | Fondo en columnas de +50%, sliders, carrusel o imágenes | Móvil |
1024 | 512 | Media pantalla y 33% de la pantalla | Fondo en columnas del 50% o widgets con imágenes o iconos | Escritorio |
768 | 384 | Media pantalla y 33% de la pantalla | Fondo en columnas del 50% o widgets con imágenes o iconos | Tablet |
360 | 180 | Media pantalla o menos | Fondo en columnas del 50% o widgets con imágenes o iconos | Móvil |
768 | 768 | 25% de la pantalla | Widgets con imágenes o iconos | Escritorio y tablet |
600 | 300 | 20% de la pantalla | Widgets con imágenes o iconos | Escritorio y tablet |
300 | 150 | 16% de la pantalla | Widgets con imágenes o iconos | Escritorio y tablet |
No obstante, a veces cuando tengo las imágenes optimizadas para escritorio o tablet a 768px o menos y pesan poco no las reduzco a 360px para móvil.
¡TRUCO 🙌! Si usas una plantilla de Elementor o quieres maquetar algo parecido a alguna sección concreta de alguna plantilla, cárgala en tu lienzo y fíjate en las dimensiones de las imágenes. Prepara las tuyas a ese mismo tamaño.
¡Otro TRUCO más 💃🏻! Si usas algún widget en el que tienes que indicar el ancho y/o alto en píxeles como, por ejemplo, el carrusel de imágenes; redimensiona tus imágenes a esas mismas dimensiones o al doble.
Peso
Y aquí lo más importante: el peso. Al reducir tamaño, resolución y escoger el formato adecuado a la hora de optimizar un medio, ya se consigue reducir el peso considerablemente respecto al archivo original. ¿Pero cuál debería ser el peso máximo de una imagen en WordPress?
Según este artículo de Nahuai Badiola, cada página de nuestra web no debería superar 1MB para que se cargue en menos de 3 segundos. Si tu página tiene muchos elementos gráficos (iconos, fotos, animaciones…) tendrás que asegurar que todos ellos no sumen más de 1MB. Yo intento que cada uno de ellos esté entre los 50-150KB (¡si pesan menos mejor!), lo que significa tener entre 6 y 18 elementos gráficos para estar algo por debajo de 1MB, dependiendo del peso de cada uno.
Resumiendo, mi recomendación es:
- Cada imagen: entre 50-150KB
- Cada página: hasta 1MB
- Número total de elementos gráficos por página: 6-18 dependiendo de su peso.
Herramientas y plugins para optimizar las imágenes para Elementor
Herramientas
Hay muchas herramientas que sirven para reducir el tamaño, peso, formato y resolución de las imágenes. Estas son las que yo utilizo y recomiendo.
- Photoshop: Para optimizar las imágenes yo utilizo Photoshop. Si exporto en JPG, indico una calidad de 6-8 para intentar no perder mucha calidad.
- Gimp: Una alternativa gratuita a Photoshop.
- Iloveimg: Permite comprimir, redimensionar, cortar y convertir a/desde JPG, entre otras cosas. En muchas ocasiones, después de pasar el archivo por Photoshop, si todavía quiero reducir más el peso lo comprimo con Iloveimg.
- Tinypng/Tinyjpg: Parecida a Iloveimg, se centra en comprimir las imágenes. Su particularidad es que se puede conectar a Photoshop (yo todavía no lo he probado).
¿Cuáles son las tuyas? ¿Me recomiendas alguna?
Plugins
Aunque no soy muy partidaria de plugins porque ocupan espacio en el servidor, bien es cierto que si ya tienes muchos medios en tu biblioteca, será difícil optimizarlos manualmente. En esta ocasión no quiero entrar muy en detalle, pero voy a listar algunos de los que he usado (algunos ya los he comentado más arriba):
- Disable Media Sizes: ideal para evitar que se creen múltiples archivos de tus imágenes sin introducir código.
- Regenerate Thumbnails: perfecto para redimensionar (o eliminar) todos esos archivos que se han creado de más al subir tus medios.
- Image optimization & Lazy Load by Optimole: optimiza todavía más tus medios asegurando calidad y carga las imágenes de las páginas de la web solo si el usuario llega a ellas.
¿Y tú? ¿Qué plugins sueles usar?
Entradas y artículos de expertos sobre el tema
Por último, te voy a dejar unos cuantos artículos que me han ayudado a escribir esta entrada y a entender el mundo de las imágenes en WordPress y Elementor. Si te interesa este tema y quieres ampliar información, te recomiendo que los leas:
> Tamaño de imágenes en WordPress de Boluda
> WordPress crea montones de copias de las imágenes que subo ¿cómo lo evito? de Ayuda WordPress
> ¿Cuál es el peso ideal de una fotografía para la web? de Nahuai Badiola
> How to Optimize Images for Web and Performance de Brian Jackson en Kinsta
Conclusión y resumen
¿Qué medidas tienen que tener las imágenes en Elementor? Para concluir, voy a resumir los diferentes pasos que doy a la hora de optimizar y preparar las imágenes para Elemento y WordPress.
- Poner a 0 la anchura y altura de los tamaños miniatura, medio y grande.
- A través de código o el plugin Disable Media Sizes evitar que se creen el resto de tamaños por defecto de WordPress cuando subamos nuevos medios.
- Si ya teníamos medios en nuestra biblioteca, usar el plugin Regenerate Thumbnails para eliminar los archivos que ha creado WordPress de más.
- Preparar las imágenes para mi web, teniendo en cuenta la resolución, formato, tamaño y peso. Recuerda: 2.048px de ancho como máximo y no más de 150KB por imagen y 1MB de peso para toda la página. Herramientas que puedes usar para ello: Photoshop, Gimp, Iloveimg y/o Tinypng/Tinyjpg:
- Instala el plugin Image optimization & Lazy Load by Optimole para que las páginas carguen todavía más rápido 🎉
¿Has puesto en práctica alguno de estos pasos? ¡Me encantaría leerte y saber de tu experiencia!