вопрос относительно <img>и миниатюр

Question

У меня есть фото-сайт, который отображает превью моих фотографий в теге, когда я наведу курсор на несколько точек.(см. http://johanberntsson.se/photo/).

Но кажется немного глупым загружать полное изображение в тег img. Поскольку, насколько я знаю, нет разницы между загрузкой изображения с его оригинальным размером по сравнению сдобавив в него атрибуты высоты и ширины.

Есть предложения по улучшению функции предварительного просмотра?

Спасибо

Answer 1

Вы должны изменить размер изображения, чтобы получить лучшую скорость.Вот пример в php

//Blob if image in database
$blob = mysql_fetch_...();
//else blob point to filename
$blob = "filename.jpg";

   $gd = imagecreatefromstring($blob);
   $resized = imagecreatetruecolor(X, Y); // new image dimensions
   imagecopyresampled(....);


   imagejpeg($resized);
 

Answer 2

Что касается стороны клиента, вы ничего не можете сделать.Если вы беспокоитесь о том, сколько времени занимает загрузка изображения, вы всегда можете предварительно загрузить их с помощью JavaScript.Единственное, что нужно сделать, - это создать несколько размеров вашего изображения на сервере.

Answer 3

Загрузка всех миниатюр в гигантском изображении спрайта, используемого в качестве фонового изображения.Затем поместите фон в правильном месте, чтобы иметь правильное изображение в правильном месте.

Это улучшит скорость загрузки, загрузив только 1 изображение, и позволит браузеру кэшировать запрос изображения, поэтому в следующий разпользователь заходит на ваш сайт, он загружается довольно быстро.