Imágenes del blog

Optimizar las imágenes antes de cargarlas a nuestro sitio es lo que todos deberíamos hacer para tener un sitio limpio y rápido desde el comienzo. Este proceso no requiere de complementos ni programas complicados de diseño y todo se puede hacer online, aunque si ya eres experto en Photoshop u otro programa de diseño eso será de gran ayuda, pero si no, aquí te mostraremos como hacerlo de manera simple

El tamaño de la imagen destacada

La imagen destacada es la imagen principal del post. En el caso del diseño de los blogs de las tiendas diseñadas por Drunel no mostramos la imagen en la cabecera post, pero esta se muestra en la página de archivo (página de todos los post) y también en los feeds de WhatsApp y de las redes sociales al compartir un post.

El tamaño es un aspecto fundamental porque una sola imagen de tamaño muy grande hará que tu sitio sea lento y además ocupa demasiado espacio en el servidor. La mayoría de problemas de los sitios lentos provienen de imágenes grandes y sin optimizar. Una imagen muy pequeña se mostrará pixelada o borrosa, por ende debemos encontrar un equilibrio.

El tamaño de la imagen destacada por defecto de tu blog diseñado por Drunel es de 400×400 PX

Tamaño de imágenes secundarias del blog

Lo más importante para lograr el equilibrio entre tamaño, calidad y rendimiento es entender la lógica. En drunel usamos el tema Astra en la mayoría de diseños (Como saber que tema tiene mi WordPress). Con Astra como tema y el diseño del blog por defecto en un ancho completo en caja o normal (que deja espacios a ambos lados) que incluye una barra lateral al lado derecho, el tamaño del contenedor del blog es de máximo 800 PX.

Lo anterior significa que si una imagen debe cubrir todo el contenedor, debería tener un ancho mínimo de 800 px, pero nunca superior a 900 px de acuerdo a las reglas que veremos más abajo. Esto solo en los casos que la imagen cubra de borde a borde. Sí, se trata de una imagen que no debe llegar a los bordes, entonces suba una imagen con un tamaño inferior a 800 px de ancho y déjela que se ajuste a la pantalla.

El alto de una imagen secundaria no es relevante y depende de la misma. Solo redimensioné su tamaño, sin alterar la proporción original de la imagen para evitar la deformación.

Una recomendación básica de las imágenes es que su tamaño sea siempre igual o ligeramente superior al contenedor que ocupará en la web.

Formato de las imágenes

Conserve siempre estas reglas de formato

  1. El formato ideal según las recomendaciones de Google es WebP. WordPress por defecto ya permite subir imágenes en este formato. WebP se aplica para imágenes que tengan transparencia y para alas que no.
  2. WordPress permite imágenes PNG y JPG, pero procure siempre usar WebP a excepción de que la imagen se altere al pasarla a este formato. De ser así asegúrese que la imagen en este otro formato cumpla los requerimientos de peso y tamaño.

Peso de las imágenes

Esto no es regla infalible, pero procure que nunca una de sus imágenes pese más de 50 KB. Algunas imágenes de otras partes del sitio podrían pesar más, pero siguiendo el proceso de optimización de más abajo, se pueden lograr imágenes de gran calidad sin superar este peso sugerido.

Como optimizar las imágenes del blog antes de cargarlas

  1. Diseñe su imagen en su programa favorito, en Canva o cualquier software que prefiera.
  2. Asegúrese de configurar el tamaño. Para la imagen destacada máximo 500×500 px y para otras imágenes de ancho completo, máximo 900 px de ancho.
  3. Si utiliza Canva u otro editor en línea, sus imágenes serán muy pesadas (No ocurre con un programa) por ende el siguiente paso es que vaya a TinyPNG y comprima su imagen.
  4. Lleve su imagen descargada de TinyPNG a Squosh, conviértala al formato WebP y optimícela un poco más.
  5. Asegúrese nuevamente que el tamaño no sea exagerado o pequeño.
  6. Asegúrese que no pese más de 50 KB.
  7. Su imagen está lista para cargarse

Recomendaciones básicas de las imágenes en general

  1. Procure no subir imágenes genéricas descargadas de Google. Da mal aspecto y las imágenes pueden tener derechos.
  2. Procure poner un estilo único a las imágenes o al menos a la imagen destacada.
  3. Procure que el tamaño sea siempre igual o ligeramente superior al contenedor que ocupará en la web.
  4. Mantenga el peso por debajo de 50 KB
  5. Ningún tamaño de imagen en WordPress debe ser superior a 1920×1080 px.

Funciona con BetterDocs

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio