Ya van varias veces las que me han preguntado qué tamaño de imagen destacada es el ideal para WordPress.
Y mi respuesta siempre es la misma: no hay tamaño de imagen destacada ideal, ya que depende de qué tamaño tenga el área de la web donde se va a mostrar.
Al igual que no todas las webs son iguales, no todas las imágenes destacadas tienen que tener el mismo tamaño.
Puede que las entradas de tu blog se vean con un gran ancho, o puede que, al contrario, el ancho del contenido sea pequeño porque tienes una barra lateral que ocupa bastante espacio.
Así que, en esta entrada, quiero hablar un poco sobre este tema para arrojarte un poco de luz sobre el tema, por lo que si tú también tienes esta duda, presta atención 🙂
¿Cuál es el tamaño de la imagen destacada en WordPress ideal para ti?
Imaginemos que quieres que, al abrir cada una de las entradas de tu blog, se muestre la imagen destacada ocupando todo el ancho del contenido.
Lo primero que tendrás que hacer es averiguar cuántos píxeles hace ese contenido de ancho. Para ello, sitúate con el ratón encima de cualquier elemento de la entrada. Puede ser un párrafo, un título, etc.
Haz clic con el botón derecho del ratón, y haz clic en “Inspeccionar elemento”, si estás en Firefox, o “Inspeccionar”, si estás en Chrome. Si utilizas otro navegador, aparecerá una opción similar.
En la zona de abajo o de la derecha, aparecerá una consola con todos los elementos de la página en la que estás, y con el elemento sobre el que has clicado seleccionado.
Si te fijas en la captura, hay seleccionado un párrafo (etiqueta <p> en HTML), y en la página se muestra el área que limita ese párrafo.
Aquí podemos ver que el ancho del contenido de la entrada es de 893px (y pico). En este caso, la imagen destacada podría tener un ancho de 893px para que ocupara el mismo ancho que el contenido.
Si fuera más grande, no se mostraría más grande, ya que el espacio está limitado a esos 893px, por lo que estaríamos subiendo una imagen más grande innecesariamente, con el aumento de peso que eso supone.
Haz la prueba con la web sobre la que tienes dudas, y así sabrás qué ancho máximo de imagen destacada tendrás que usar.
En cuanto al alto de la imagen, es un poco a tu elección. Si quieres que la imagen destacada sea más alta, le pones más píxeles. Si quieres que no sea muy alta, menos.
¿Y el tamaño de las imágenes de WooCommerce?
También me suelen preguntar cuál es el tamaño ideal para las imágenes de tiendas online con WooCommerce, y la respuesta también es un “depende”, aunque no se sigue la misma regla que con las imágenes destacadas que acabamos de ver.
Las imágenes de WooCommerce, una vez se entra en la página del producto, en primer lugar, se suelen ver en un tamaño que no es el original de la imagen, y luego se tiene la opción de ampliar el tamaño haciendo clic sobre la imagen o sobre una lupa.
Pues bien, tienes que subir las imágenes teniendo en cuenta el tamaño en el que se verán una vez se haga clic en la lupa para ampliarlas.
La proporción de los píxeles (si es más ancha que alta o al revés) dependerá del tipo de producto que sea. No es lo mismo una imagen de una camiseta que la de una escoba, por poner un ejemplo.
Teniendo eso en cuenta, el ancho o el alto (la medida que sea más larga), tiene que ser lo suficientemente grande como para que el usuario vea bien el producto, pero con un tamaño máximo que no exceda las proporciones de la web.
Por ejemplo, yo creo que una medida de 1000px de ancho es una buena medida para las imágenes horizontales. Pero también puede estar bien 1200px o 1500px, por ejemplo.
En cuanto a las imágenes verticales, puede estar bien una medida de entre 500px y 700px, más o menos.
Piensa que cuanto mayor tamaño tengan las imágenes, más peso le estarás añadiendo a la web, por lo que es conveniente no pasarse. Si con 1000px ya se ve bien la imagen, no es necesario subirla con 1500px.
Y eso sí, procura subir todas las imágenes con el mismo tamaño, para que se vean de manera regular y uniforme y conseguir un diseño agradable a la vista.
Cómo preparar la imagen destacada y para WooCommerce antes de subirla
Como he comentado, antes de subir las imágenes a la web, es conveniente adaptar su tamaño según el ancho del contenido o el ancho que le quieras dar.
También es ideal comprimirlas antes de subirlas a la web, para que tengan el menor peso posible y afecte lo mínimo posible a la velocidad de carga.
Para ello, te recomiendo que leas este post en el que explico cómo reducir y comprimir imágenes para web, en el que te enseño varias maneras para cada una de estas tareas.
También te recomendaría que, tanto para las imágenes destacadas, como para las imágenes de WooCommerce, crees una plantilla en un programa como Photoshop, Gimp o similar.
Esta plantilla debe tener las dimensiones adecuadas para las imágenes que quieres subir, y la idea es que cada imagen destacada o de WooCommerce que tengas que subir, la pases por esta plantilla, la adaptes a sus dimensiones, y luego la guardes.
De esta manera, todas tendrán exactamente el mismo tamaño 😉
