#thumbnails
#эскизы
Вопрос:
У меня есть фотосайт, который отображает предварительные просмотры моих фотографий в теге при наведении курсора мыши на несколько точек. (see http://johanberntsson.se/photo/).
Но кажется довольно глупым загружать полное изображение в img-тег. Потому что, насколько я знаю, нет разницы между загрузкой изображения с его исходным размером и добавлением к нему атрибутов height и width.
Есть какие-либо предложения, как улучшить мою функцию предварительного просмотра?
Спасибо
Ответ №1:
Что касается клиентской части, вы ничего не можете сделать. Если вы беспокоитесь о том, сколько времени требуется для загрузки изображения, вы всегда можете предварительно загрузить их с помощью javascript. Единственное, что еще можно было бы сделать, это создать несколько размеров вашего изображения на сервере.
Комментарии:
1. Изображения имеют размер около 1 мб каждое. Просто подумал, что мой хостинг-провайдер может ныть, когда отправляется / принимается много данных, когда много людей просматривают изображения. Но, может быть, это не так уж и важно?
2. Не похоже, что это имеет значение. Если вы беспокоитесь о нытье вашего хостинг-провайдера, то то, как вы это делаете сейчас, работает нормально. Было бы неплохо сделать два размера на сервере: полный размер и миниатюру.
Ответ №2:
Вы должны изменить размер изображения, чтобы получить лучшую скорость. Вот пример в 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);
Ответ №3:
Загружаем все эскизы в гигантское изображение спрайта, используемое в качестве фонового изображения. Затем расположите фон в нужном месте, чтобы иметь правильное изображение в нужном месте.
Это улучшит скорость загрузки, загрузив только 1 изображение, и позволит браузеру кэшировать запрос изображения, чтобы в следующий раз, когда пользователь зайдет на ваш сайт, он загрузился довольно быстро.
Комментарии:
1. звучит неплохо, за исключением того, что это немного непрактично, поскольку Бернтссон использует сайт для своих личных фотографий, и было бы непросто каждый раз загружать изображения в большой спрайт.
2. Ваше право, поэтому лучше всего изменить размер всех изображений, чтобы получить что-то более эффективное, или предварительно загрузить их, как вы упомянули. Это самый быстрый способ «чисто» использовать html.