Cómo corregir imágenes con relación de aspecto incorrecta (Ayuda)

  • Autor Autor henrym
  • Fecha de inicio Fecha de inicio
H

henrym

Dseda
Verificación en dos pasos activada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola, estoy queriendo optimizar mi sitio lo maximo posible y Google PageSpeed dice lo siguiente con la primer imagen del post:

Displays images with incorrect aspect ratio



¿Como puedo solucionarlo? Tengo Ezoic con Leap (su sistema de optimizacion) y tiene una opcion para eso pero la desactive porque daba mas errores que soluciones.

¿Alguna solucion?

Gracias
 
Sin ver el sitio web es complicado resolverte esa pregunta 100%.

Pero es normal el mensaje, está mostrando la imagen en 352 de ancho y 410 de altura, supongo que por el style que tiene la img y que tu theme hace el ancho dinámico 100% y la altura queda estática a 410px que es lo que tiene el style.

Deberías arreglar el CSS, o editar la imagen y quitarle el ancho y el alto que tenga, mostrando la foto tal cual, al tamaño que sea para que se adapte.
 
Exactamente lo que dice el compañero de arriba.

Si subes una imagen de 2000x2000 pero tu theme y su css la renderizan a 1000x1000, el pagespeed lo que te dice es que estas usando una imagen muy grande para lo que realmente necesitas, entonces es mas optimo subir una imagen de 1000x1000 que pesa menos y que tu tema ya mostrará en 1000x1000
 
samuelsuteras dijo:
Exactamente lo que dice el compañero de arriba.

Si subes una imagen de 2000x2000 pero tu theme y su css la renderizan a 1000x1000, el pagespeed lo que te dice es que estas usando una imagen muy grande para lo que realmente necesitas, entonces es mas optimo subir una imagen de 1000x1000 que pesa menos y que tu tema ya mostrará en 1000x1000
Hacer clic para expandir...

El problema seguramente es que haya puesto un ancho y alto a la foto al insertarla en el post, y ahora wordpress con su ultima actualización le pone el ancho y el alto en un style="" a la imagen si defines un ancho y alto, los themes normalmente tienen su css para hacer responsive la imagen poniendo 100% de ancho y el alto no lo tocan ya que se adapta según lo que pongan. Pero al tener el height en un style directamente en el <img> se queda con la altura fija del style y no va a cuadrar...

Ya he visto a más de uno quejarse de eso en los foros de wordpress porque es ridículo.
 
jonay dijo:
El problema seguramente es que haya puesto un ancho y alto a la foto al insertarla en el post, y ahora wordpress con su ultima actualización le pone el ancho y el alto en un style="" a la imagen si defines un ancho y alto, los themes normalmente tienen su css para hacer responsive la imagen poniendo 100% de ancho y el alto no lo tocan ya que se adapta según lo que pongan. Pero al tener el height en un style directamente en el <img> se queda con la altura fija del style y no va a cuadrar...

Ya he visto a más de uno quejarse de eso en los foros de wordpress porque es ridículo.
Hacer clic para expandir...

Si, ultimamente wordpress hace cosas locas con el gutenberg
 
Mis fotos son 640x480 y ese error solo me los marca con la imagen principal del post y no con las de dentro del post.
 
henrym dijo:
Mis fotos son 640x480 y ese error solo me los marca con la imagen principal del post y no con las de dentro del post.
Hacer clic para expandir...
Es tema de css, sin ver la web dificil ecirte exactamente donde está el problema pero es css
 
Ok revisare por mi parte. Si se les ocurre por donde empezar digan jaja.
 
No sé si instalando un plugin de escalado de imágenes podrías solucionarlo...
 
¿Alguno gratis que recomienden?
 
No hace falta plugin, añade esto al functions.php de tu theme o bien en un child theme:

Insertar CODE, HTML o PHP: 
function update_img_attributes($content) {

    $content = preg_replace_callback('/<img(.*?)style=".*?width:\s*(\d+).*?height:\s*(\d+).*?"(.*?)>/i', function($matches) {
        $before = $matches[1];
        $width = $matches[2];
        $height = $matches[3];
        $after = $matches[4];
     
        $before = preg_replace("/width=[\"']\d+[\"']/", "width=\"$width\"", $before);
        $before = preg_replace("/height=[\"']\d+[\"']/", "height=\"$height\"", $before);
     
        if (!preg_match("/width=/i", $before)) {
            $before .= " width=\"$width\"";
        }
        if (!preg_match("/height=/i", $before)) {
            $before .= " height=\"$height\"";
        }
     
        return '<img' . $before . $after . '>';
    }, $content);
 
    return $content;
}

add_filter('the_content', 'update_img_attributes');

Eso debería eliminar el style a las imagenes y añadir el width y height del style="" en los atributos width y height del <img>.

Debería funcionar, pero como no puedo ver tu web, no te lo aseguro al 100%.

Como te dije el problema es el style="" que tiene tu <img>. Esto se soluciona eliminando el style que es lo que hace el código de arriba.
 
Gracias, en estos días pruebo en un tema.
 
Consulta ¿Cual es el tamaño correcto para las imagenes en WordPress? Actualmente utilizo 640x480 y creo que ese es un problema.
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba