Hola, en la plantilla que actualmente estoy usando el desarrollador del tema indica que el tamaño ideal de la imagen para los 6 botones es de 220*140 pixeles que se encuentra en la parte inferior de la pagina casi al final pero al hacerle el test con gtmetrix me dice que tengo que escalar la imagen a 141x90, ahora si yo modifico la imagen de 220*140 a 141*90 la imagen comienza a verse de mal calidad como esta en el screenshot_50 esa esta a 141*90 y la imagen con el nombre 20806890_10154875567523733_1168350475_o el tamaño es de 220*140 como puedeo solucionar el problema
URL del sitio: Contenido solo visible a usuarios registrados
Hola,
No puedes colocar el tamaño de la imagen que te recomienda GTmetrix porque realmente tú defines la imagen correcta. La herramienta solo te hace una recomendación, no puedes seguirla al 100%. En todo caso no veo pérdida de calidad, es lógico que al disminuir el tamaño también va a disminuir la calidad. Lo recomendable será mantener un tamaño de imagen adecuada.
Entiendo, el tema es que si no corrijo eso el tiempo de carga aumenta en la pagina busco una u otra manera de como corregirlo y no doy con una solución, me tiene de los pelos esto ho no se o meterle un codigo o que se yo
Hola,
Más que el tamaño tienes que revisar el peso del fichero. Es posible que la imagen 220*140 pese 1Mb cuando lo correcto es que pese por ejemplo 10kb. Que pese 1Mb si afectará la carga de tu web el otro no afectará el tiempo de carga de hecho no lo está haciendo. Con código no se soluciona, solo con herramientas de optimización de imágenes.
anteriormente ya he intentado ponerle al tamaño de imagenes que indica el desarrollador del tema a pesar de de cambiarle de tamaño luego comprimirlo bajarle la calidad hasta un 60% y a pesar de todo eso cuando hago el testeo se me dispara y me sale que todas las imagenes debo optimizarla para una mejor carga ya sea tanto en el page speed como en el gtmetrix como en pigdom tool la unica manera que he logrado eso es reduciendo mas el tamaño de la imagen con las configuraciones que te acabo de indicar hace un rato y mejora la puntuacion
Hola
Lo que sucede, es que por ejemplo esta imagen:
Contenido solo visible a usuarios registrados
Físicamente tiene un tamaño mayor al como el que se muestra en anchos de pantalla > 780px (aprox)
Esto es porque tus imágenes se estan mostrando de manera responsive, pero si las ves en móviles, es decir < 780px entonces la imagen se muestra incluso un poco más grande de su tamaño real.
En resumen lo que te indican las herramienta de análisis no tiene en cuenta este tema técnico y sólo ven el tamaño actual y el tamaño físico.
Si quieres seguir estrictamente el tema de optimizaicón entonces tendrías que tener varias versioens de tu imagen y usar srcset para poner por HTML varias versiones de tu misma imagen.
https://www.w3schools.com/tags/att_source_srcset.asp
Pero ya te digo, lo más práctico es hacerlo como lo tienes actualmente y evitar complicaciones.
Lo que si que podrías mejorar, puesto que el fondo en donde se muestra es negro, podrías evaluar quitar la transaprencia y poner un fondo negro y exportarlo con fondo, esto reduciría en algo el tamaño.
Saludos.