Cambios en alto y ancho para mejorar CLS

Hola Pedro,

La imagen que nos compartes no se muestra, puedes indicarnos, donde en tu página está esta imagen para ver lo que nos indicas?

Un saludo 

@argenis Hola Argenis,

Veo que ha fallado, lo vuelvo a adjuntar: Contenido solo visible a usuarios registrados

Gracias y saludos

Hola Pedro,

Veo que es el logo de tu sitio? puedes compartirnos exactamente el mensaje que comentas te indico estos pasos? donde has visto esta observación?

Un saludo 🖐️ 

@argenis Hola, Argenis

En PageSpeed Insights me indica con un triángulo rojo el error de este modo: 

Los elementos de imagen no tienen width y height explícitos
En los elementos de imagen, especifica un ancho y una altura explícitos para reducir los cambios de diseño y mejorar el CLS. 

Saludos

Hola Pedro Jose.

Tienes definido en ancho y alto desde CSS:

.logo img {
width: auto;
max-height: 51px;
}

logo img {
width: 100PX;
max-height: 51px;
}

Aunque yo no lo modificaría ya que de la manera como lo tienes es responsive y se adaptara a todas las resoluciones

Un saludo 

@pepesoler Hola, Pepe

Necesito saber en qué fichero se encuentran estos datos que comentas.

Gracias y saludos

Hola Pedro Jose.

Puedes añadirlo directamente en apariencia -> personalizar -> CSS Adicional

.logo img {
width: 100PX;
max-height: 51px;
}

De todas formas Google lo marcara igual ya que el HTML que se genera solo muestra la clase CSS de la imagen, no las dimensiones de la imagen

<a class="logo pull-left " href="https://psicologia-forense-madrid.es/" target="_self"> <img src="https://psicologia-forense-madrid.es/wp-content/uploads/2022/10/cropped-1-Logotipo-PFM-OriginalLetras220110-iiid-1.png" alt="Logo" class="site_logo"> </a>

Un Saludo

@pepesoler Hola, Pepe

¿Hay alguna posible solución para que Google no lo indique como un problema?

Gracias y saludos

Hola Pedro Jose.

Prueba asignar un tamaño al logo:

.logo img {
min-width: 100px;
max-height: 51px;
}

Puedes añadirlo en Apariencia -> Personalizar -> CSS Adicional.

Un Saludo

@pepesoler Hola, Pepe

He tratado de asignar el tamaño como me comentas y el error sigue apareciendo en los resultados de Google.

Gracias y saludos

Hola Pedro.

Complicado porque no se le puede poner un tamaño explicito, lo unico que podríamos probar es a subir la imagen en formato svg.

.- Adjunto tienes la imagen en formato SVG

Un Saludo

@pepesoler Hola, Pepe

Lo pruebo y voy comentando.

Gracias y saludos

Hola Pedro.

Ok dejo el hilo abierto

Un saludo

@pepesoler Hola, Pepe

De acuerdo, gracias. Continúo...

Saludos