CSS de Imágenes para diferentes tamaños de pantalla (WPO)

Club para webmasters Foros Creación de páginas web CSS de Imágenes para diferentes tamaños de pantalla (WPO)

Viendo 11 entradas - de la 1 a la 11 (de un total de 11)
  • Autor
    Entradas
  • #6892 Karma: 0
    Ricardo
    Participante
    28
    ChorriPuntos 876
    Curso SEO
    ChorriSEO

    Hola chorris!

    Ya van dos veces que escucho que para que la patata conectada a PageSpeed Insights de Google suba un poco su estimación de velocidad de tu web (entre otras cosas), debes tener en css tamaños de imágenes diferentes para cada dispositivo. De este manera carga carga sólo el tamaño más optimizado. O eso entendí jejeje.

    Se lo escuché ayer en el directo a David, y otro día en un vídeo de Alvaro Fontela. Por lo que he captado debe ser crear una clase para cada dispositivo, pero no sé muy bien si lo he entendido bien… en plan uno para el iphone 8 otro para el galaxy S8?? O una para ordenador, móvil, tablet? No sé si hay algún plugin para hacerlo, y si hay que hacerlo a mano, ¿Alguien podría poner un ejemplo de CSS de este tipo para una imagen?

    De paso, te hago una petición David, para ver si te animas a hacer un curso de CSS, no tanto en cuanto a saber usar CSS como un pro. Más bien una iniciación y luego explicando trucos que sueles usar más veces en WP (algo más práctico, como tus cursos😀)

    Muchas gracias!
    Un saludo!

    #6893 Karma: 0
    David Cuesta
    Superadministrador
    176
    ChorriPuntos 6.302
    Curso SEO
    ChorriCuesta

    Haré un curso de CSS nivel iniciación muy pronto, no puedo darlo avanzado porque realmente no sé tanto como puede parecer.
    Vamos con el ejemplo explicación.

    Para hacer un CSS condicional respecto al tamaño de pantalla usamos las media queries, que son como elementos CSS que tienen a otros elementos dentro.
    Por ejemplo:
    @media only all and (min-width: 850px) {
    .div-1:hover {
    transform: scale(1.02);
    box-shadow: 0px 0px 25px 0px #e0e0e0;
    }
    .div-2:hover {
    color:red;
    }
    }

    En este ejemplo, cuando la pantalla tiene como mínimo 850 px de ancho (es decir para pantallas de más de 850px), el div 1 tendrá esos efectos de escala y sombra cuando le haces hover, y el div 2 se pondrá de color rojo al hacer hover, que es pasar el ratón por encima.

    Vamos con un ejemplo para la imagen en CSS (esto solo sirve para imágenes en background, no para imágenes tal cual)

    .div-3 {
    background-image: /imagen-pequeña.jpg;
    }
    @media only all and (min-width: 850px) {
    .div-3 {
    background-image: /imagen-grande.jpg;
    }
    }

    En este ejemplo la imagen es pequeña de base, y el CSS que esté dentro de esa media querie no se carga hasta que la pantalla sea 850px o más.
    Eso significa que el movil cargará solo la pequeña, y el pc cargará la pequeña y la grande, pero mostrará la grande.

    Esto es lo que se denomina un diseño responsive mobile first 😀

    Un saludo!

    #7889 Karma: 0
    Ricardo
    Participante
    28
    ChorriPuntos 876
    Curso SEO
    ChorriSEO

    Muchas gracias David!!

    He vuelto de vacaciones, y estoy retomando todo… 😅

    Con la frase “Esto es lo que se denomina un diseño responsive mobile first”, me has dejado una duda más general. Puede ser que un poco básica o tonta, pero me da la sensación que me falta alguna pieza del puzzle para entenderlo. A ver si tú o alguien puede ayudarme para acabar de comprenderlo.

    1. Yo pensaba que esto de cargar las imágenes adecuadas a cada navegador-dispositivo, es algo que ya hacían las web responsive por el hecho de ser responsive… ¿Estaba equivocado?

    2. Este tipo de diseños responsive mobile first ¿ya vienen implementados en Generatepress, en Gutemberg, Elementor, theme modernos…? ¿O debes añadir CSS “especiales” tú en cada web que tengas?

    PD. Por cierto, un aporte por si alguien llega hasta aquí intentado mejorar la velocidad de su web. Ha salido hace unos días el vídeo “Page Speed: SEO Mythbusting” de Google Webmasters (https://youtu.be/XUOD6pcvnso?t=369). Muy interesante en general, además dicen esto de este tema: “So I think almost everybody recognizes that images are a potential issue. And certainly, pre-sizing the image rather than making the browser do it, for example…”

    Un saludo a todos!

    #7890 Karma: 0
    David Cuesta
    Superadministrador
    176
    ChorriPuntos 6.302
    Curso SEO
    ChorriCuesta

    Muy buena la serie esta de mythbusting del seo, para mi gusto se enfocan demasiado en programadores, tendrían que llevar a gente del seo y no tanto programador web pero bueno.

    vamos con las preguntas:
    1 – No, las webs responsive solo significan que se adaptan al dispositivo visualmente. Si quieres que se adapten al móvil y luego ya si eso al pc, se llaman responsive mobile first.
    En cuanto a las imágenes yo también albergo dudas, habría que hacer pruebas. El caso es que si tu haces una nueva entrada y con wordpress gutenberg y generatepress (por ejemplo) metes una imagen de 1024×1024 px, uno de los tamaños estándar de wordpress, esta imagen se cargará en este tamaño independientemente de dónde la muestres, si en un móvil de 600 píxeles de ancho o en una tele de 8000 pixeles de ancho.
    Aquí se puede hacer una cosa, que aunque funcionaría muy bien en cuanto a velocidad, no así en cuanto al SEO si la imagen aporta valor…
    Sería poner las imágenes usando CSS con el atributo Background, cargando siempre la imagen pequeña de 300x300px y luego a través de media queries según tamaños de pantalla más grande ir cargando las otras imágenes más grandes
    En cuanto a velocidad esto sería lo idóneo. Mobile first cargaría una imagen de 300×300, y sólo si la pantalla es más grande cargarían los tamaños más grandes.
    Ahora bien… resulta que para el SEO necesitamos que la imagen pertenezca al html de la web… y para eso no sé…
    imagino que en el futuro harán algo para solucionar esto, pero de momento lo que se les ha ocurrido es usar los nuevos formatos webp y tiff, que fallan en algunos navegadores cms y circunstancias.

    2 – temas como generatepress y las funciones básicas de gutenberg por lo que he ido viendo ya traen algunos elementos de responsive mobile first, y muchos de responsive general.
    Hoy en día casi todos los temas son responsive, es algo exigible, y lo único que puede pasarte es que haya un error en algún elemento que no sea responsive y genere un scroll horizontal en móvil o algo así, pero por un elemento erróneo, no por el tema en general.
    Pero es raro que hagan un responsive mobile first, suelen hacer (como elementor por ejemplo) todo lo contrario.
    Primero cargan todo en grande para pc, y luego si la pantalla es más pequeña lo cargan todo para tablet, y si la pantalla es más pequeña lo cargan todo para móvil.
    Resultado: cargas 3 partes de CSS y animaciones de todo tipo para abrir una versión móvil.
    Lo correcto es lo contrario, la web primero carga en móvil sencillo y sin animaciones, luego se le van añadiendo cosas con los tamaños.
    Esto si no lo haces a mano… actualmente es casi imposible encontrar temas que lo hagan.

    Toma tochaco sobre responsive design jejeje

    Un saludo!

    #7893 Karma: 0
    Ricardo
    Participante
    28
    ChorriPuntos 876
    Curso SEO
    ChorriSEO

    Muchas gracias David!!

    Me encanta los tochacos sobre mobile first 🤣

    Alucinate que no se haga de serie en el entorno WP (elementor, gp, gutenberg…) lo del mobile first. No creo que sea tam difícil para los programadores.

    A mi más que sea para programadores, es la dinámica la que me pone nervioso. El que da las respuestas muchas veces es el tipo que no es de Google…

    Lo dicho muchas gracias!!
    Un saludo!

    #8188 Karma: 0
    Rafa – Molycata.com
    Participante
    1
    ChorriPuntos 339
    Nuevo

    Buenas !! Esto para mí es el santo grial. Me estoy peleando desde hace semanas con el mismo tema, y es que para mí sería básico que la carga de imágenes fuera mobile first responsive. No tenía en cuenta la vertiente SEO de hacer eso como dice David, pero creo que prefiero ganar velocidad y mejorar seo por WPO que hacer que mi imagen posicione bien.

    Mi problema va más allá de la carga por el tamaño de la foto en versión móvil, y es que en muchas ocasiones en la carga de la foto de producto de woocommerce se reescala la foto en un tamaño superior a la del tamaño de la pantalla y sólo se ve una parte de la imagen. El search console me lo interpreta de otra forma, como si reescalara el objeto más grande al tamaño del dispositivo móvil, y como la foto tiene un tamaño mayor a la pantalla, lo que hace es hacer minúsculos los textos, apareciendo error en la prueba de usabilidad móvil (“Los elementos en los que se puede hacer clic están demasiado cerca unos de otros”, y otro error “El texto es demasiado pequeño para leerlo”), cuando el problema es que ha cargado un tamaño grande y no ha reescalado bien el tamaño de la foto.

    La web está hecha con Astra Pro y Beaver Builder, y le tengo metido un plugin para meterle fotos adicionales a las variaciones de producto (yo trabajo mucho con variaciones de producto). Este último plugin (WooCommerce Additional Variation Images) es una jodida mierda, porque de un tiempo a esta parte ralentiza la carta de las páginas de producto en 1s y estoy viendo opciones para cambiarlo, pero no hay muchas alternativas viables.

    Bueno, paro con mi tocho-llanto, pero es algo que me tiene bastante cansado.

    Administrador y dueño de https://molycata.com

    #8193 Karma: 0
    David Cuesta
    Superadministrador
    176
    ChorriPuntos 6.302
    Curso SEO
    ChorriCuesta

    Me sumo al llanto… es horrible ese problema y pasa con woocommerce pero también con otros plugins y con el mismo wordpress… y el puñetero Search Console cada x días me tira el error ese en alguna web, y tengo que validar el problema, y lo valida como corregido, pero hay que estar pendiente… horrible

    Si logras solucionarlo cuéntanos, de momento ya has localizado el error mucho mejor de lo que había hecho yo.

    Un saludo!

    #9505 Karma: 0
    Rafa – Molycata.com
    Participante
    1
    ChorriPuntos 339
    Nuevo

    Buenas !! He seguido investigando un poco y he encontrado una pequeña perla que creo que nos dice cómo hacer la carga de mobile first responsive: https://www.fotografiaecommerce.com/blog/imagenes-responsive-srcset/
    Según esta web, podemos controlar qué imagen debe cargarse en función del dispositivo gracias a los atributos srcset y sizes. Con esto bien aplicado ya no nos sacará los colores el pagespeed en la parte de móvil (al menos por el tamaño de las fotos cargadas)

    Administrador y dueño de https://molycata.com

    #9509 Karma: 0
    David Cuesta
    Superadministrador
    176
    ChorriPuntos 6.302
    Curso SEO
    ChorriCuesta

    Eso lo hace por defecto el wordpress cuando metes imágenes pero tienen que ir en el contexto, el problema es cuando metemos las fotos con código o así, que parece que la guía que pones lo explica muy bien 😀

    Gran aporte!

    Un saludo!

    #9514 Karma: 0
    Rafa – Molycata.com
    Participante
    1
    ChorriPuntos 339
    Nuevo

    He encontrado este plugin que según parece ayuda a tocar estos valores: https://wordpress.org/plugins/just-responsive-images/

    No obstante, hay que crear un hook y una función además de instalar el plugin, y ahí me he perdido

    Administrador y dueño de https://molycata.com

    #9520 Karma: 0
    David Cuesta
    Superadministrador
    176
    ChorriPuntos 6.302
    Curso SEO
    ChorriCuesta

    los hooks y eso, ayúdate del plugin code snippets, haz copia de seguridad o prepárate para desactivar el plugin por ftp cambiando el nombre de la carpeta 😀

Viendo 11 entradas - de la 1 a la 11 (de un total de 11)
  • Debes estar registrado para responder a este debate.