Buen día a todos.
Tengo un problemita con unas imágenes y desconozco la manera de resolverlo. El problema se dá tanto en IExlorer como en Firefox, últimas versiones.
Tengo 6 imágenes en una carpeta llamada galeria. Cada imagen pesa entre 220kb y 320kby sus dimensiones son de 2048x1536. Todas jpeg.
Tengo una página PHP en la cual ejecuto un Javascript+PHP que lee las imágenes de la carpeta y las copia al documento HTML que se generará producto de este proceso. Las imágenes quedan generadas así:
<img alt='' title='Haga click para ampliar la foto' class='galeria' src='la_foto_elegida' onclick='funcion_que_amplia_la_foto'>";
Donde la clase galería contiene lo siguiente
img.galeria {
width: 190px;
height:160px;
padding: 3px;
border: 1px solid red;
margin: 12px;
float: left;
background: #FFF;
cursor:pointer;
}
Y la funcion javascript lo único que hace es copiar el src de la imagen pequeña (190x160) a otro div de mayor tamaño.
El problema es que cuando se genera la página, aparecen las seis imágenes, pero el navegador se queda lento, muy lento. Y cuando hago click para ampliar la imagen, se queda todavía más lento.
¿Por qué se pone tan lento al colocar la imagen reducida?
Asumo ésto porque tengo otra página donde casualmente uso una de esas imágenes (reducida mediante css) y en la parte donde está la imagen transita lento (cuando muevo la barra vertical) y cuando la imagen queda fuera de la vista (es decir, cuando sólo se muestra texto) la página funciona correctamente.
¿Hay algún problema con las imágenes cuando están son de tamaño muy grande y se reducen mediante css? ¿o qué es lo que está pasando?
Si pudieran ayudarme, les agradecería.