Optimización velocidad de carga

[manguiti]

Hola a todos, estoy tratando de optimizar al máximo posible una web hecha con responsive design. Al pasarle la herramienta Gtmetrix, me indica que varias imágenes servidas a 171x109 se muestran en resoluciones bajas a 146x93, por lo que en esas resoluciones, si muestro la imagen en ese tamaño se consigue un 28% de reducción.

El tema está en que para hacer esto, tendría que incluir la ruta de la imagen mediante css y añadirla como fondo de un div, lo que le quitaría semántica a la estructura del sitio.

Llegados a este punto, veo dos posibilidades:

1. servir siempre la imagen pequeña aumentando los margenes entre ellas en resoluciones mayores pero mantiendo la etiqueta image como contenido de la web.
2. servir diferentes tamaños dependiendo de la resolución añadiéndolas mediante css background.

¿Qué creéis que es prioritario en ese sentido y que haríais vosotros?

Espero que se haya entendido.

Gracias anticipadas ;)

[Rafael]

Si pones el ejemplo mejor.

No entiendo por qué una imagen per sé te la cambie de resolución. Lo que supongo es por que tú le estás cambiando los atributos de width y height.

Pero la decisión de ponerlo como img o como background no tiene que ver con un simple tamaño. Así que no entiendo por qué estás orillado a esas 2 alternativas.

Decidir si es background o img es por flujo de información, por necesidades de un script, por modelo de caja, por responsive design, por sprites, en fin, otras cosas diferentes, no por un tamaño y ya.


Adicionalmente no sabemos si es png, o jpg, que nivel de compresión tenga o que contenga la imagen. Entonces hay que analizar más a fondo que quieres hacer.

[manguiti]

Ok, abajo pongo parte del código, básicamente es un submenú de la web (responsive design), a todo lo ancho de la página, los elementos li tienen un % del ancho del sitio y la imagen ocupa el 100% del ancho del li. Entonces, a medida que se aumenta la resolución va aumentando el ancho del li y por consiguiente el de la imagen. Por tanto, al comienzo la imagen no tiene el tamaño máximo de esta si no en el momento en que el diseño ya no se puede ensanchar más... no se si me explico...

Código HTML:

<ul class="lista-rutas">
	<li class="ruta">
	<a href="rutas/ruta1.html">
	<div class="img-ruta"><img src="img/img-ruta1-min.jpg" alt="img ruta 1"/></div>
	<div class="txt-ruta">ruta 1</div>
	</a>
	</li>
						
	<li class="ruta">
	<a href="rutas/ruta2.html">
	<div class="img-ruta"><img src="img/img-ruta2-min.jpg" alt="img ruta 2"/></div>
	<div class="txt-ruta">Ruta 2</div>
	</a>
	</li>
						
	<li class="ruta">
	<a href="rutas/ruta3.html">
	<div class="img-ruta"><img src="img/img-ruta3-min.jpg" alt="img ruta 3"/></div>
	<div class="txt-ruta">Ruta 3</div>
	</a>
	</li>				
						
	<li class="ruta">
	<a href="rutas/ruta4.html">
	<div class="img-ruta"><img src="img/img-ruta4-min.jpg" alt="imagen ruta 4"/></div>
	<div class="txt-ruta">Ruta 4</div>
	</a>
	</li>
					
	<li class="ruta">
	<a href="rutas/ruta-5.html">
	<div class="img-ruta"><img src="img/img-ruta5-min.jpg" alt="imagen 5"/></div>
	<div class="txt-ruta">Ruta 5</div>
	</a>
	</li>				
</ul> 

[Rafael]

Entonces ¿la razón es por el responsive design? Si tu código css el html no dice mucho. Pero eso del 28% no te obsesione. Según esto si alguien usa una resolución mayor va a usarla toda, no 146 segun esto. Lo que entiendo es que si usaras una imagen de 10px, al final la va a reestirar al tamaño, ya que según esto estás resampleándola con el css que no se ve.

Digo, al final on la imagen que creas correcta y se vea bien.

Para optimizae tamaños prueba diferentes compresiones jpg o png para cierto tipo de archivos o usar sprites.

[manguiti]

Tampoco hay mucho más que mostrar en el css que no te haya indicado:

Código:

.lista-rutas li{
		float: left;
		width:18%;
		margin:0 1%;
		border: 0;
		padding: 0;
		text-align: center;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}

Incluyo también una imagen para que quede más claro: