Оценка относительной важности изменения размера изображения на стороне клиента в сравнении с пропускной способностью
Мой сайт использует функцию php для изменения размера изображений, поэтому браузер не должен это делать:
function resizeImg($img, $newW, $newH, $rotateTrue) {
//image resize code, then
return base64_encode($image_data);
}
где функция вызывается так:
<img src="data:image/png;base64,<?= resizeImg('myImg', newWidth, newHeight, 1); ?>" alt="pic">
Нет проблем. Однако возвращаемые данные изображения имеют большой размер. Когда я проверяю элемент в Chrome, возвращается> 1 КБ данных кодирования на изображение с измененным размером.
Это хорошо для рассеянного изображения здесь и там, но что, если у вас огромный стол? Например, одна таблица на моем сайте> 1500 строк с одним изображением на строку. КАЖДОЕ изображение в настоящее время изменено браузером, что, я знаю, не идеально. Однако, если бы я изменил размеры каждого из этих 1500 изображений, используя мою функцию изменения размера на стороне сервера, я бы добавил примерно следующее количество закодированных данных:
1500 images x ~1.1 kB encoding data per image = 1650 kB
к этому столу.
Что касается высокопроизводительного сайта, которому я должен уделять больше внимания: экономии полосы пропускания (то есть изменению размера на стороне клиента) или экономии браузеру (то есть изменению размера на стороне сервера)?
Решение
TL; Dr ОБА
Основная проблема вашего подхода заключается в том, что вы открыты для очень простых DDoS-атак, увеличивая вычислительную нагрузку запроса страницы на ваш сервер, поскольку вы генерируете новые изображения на лету. Само собой разумеется, что код вы разместили и термин высокая производительность не ладят вместе из-за этой проблемы.
Другая проблема заключается в том, что клиенты не могут кэшировать отправленные ими изображения (если вы не кэшируете всю предоставленную вами веб-страницу), поскольку они встроены через base64.
Решение простое. Измените размеры изображений до набора предопределенных размеров и сохраните их на своем сервере. Доставьте клиенту разные размеры и дайте клиенту остальную часть работы. Конечно, вы должны правильно настроить сервер для кэширования этих файлов изображений на стороне клиента.
Вы могли бы использовать новый <picture> элемент (picturefill для старых браузеров) на стороне клиента для поддержки нескольких устройств с разными разрешениями. Конечно, произойдет некоторое масштабирование, но вы не можете генерировать изображения для абсолютно любого устройства.
Если ваш вопрос касается только масштабирования, просто не делайте этого вообще. Не на сервере и не на стороне клиента. Картинки с высоким разрешением выглядят просто безобразно.
Другие решения
Я предпочитаю сохранять файлы с измененным размером и использовать только URL-адреса к ним. У вас нет абсолютно никакого кеширования с вашим текущим решением, а затем вы увеличиваете размер изображения с помощью вашей кодировки base64 в HTML.
Только если вы одновременно отображаете исходные изображения и они невелики, можно изменить размер на стороне клиента.