Вы сказали, что хотите сделать это в браузере, поэтому, когда вы говорите:
... или, что еще лучше, автоматически загружайте только уменьшенную часть для скорости.
Вы не получите выигрыша в скорости от выполнения этой клиентской стороны, потому что сначала нужно загрузить все изображение, прежде чем вы сможете сделать для него миниатюру.
Вы можете создавать миниатюры для извлеченных изображений, просто создав элемент img и установив его width и height на что-то меньшее;по умолчанию браузеры уменьшают изображение (не обязательно красивым способом).
Пример:
var img = document.createElement('img');
img.src = "your image url here";
img.style.width = "32px"; // Change as appropriate
img.style.height = "32px"; // Change as appropriate
document.body.appendChild(img); // Or append to some other container element
Живая копия
Там я предположил, что это соответствует принудительному изображению определенной ширины и высоты (часто с миниатюрами, это полезно, если они все одинакового размера, хотя приведенное выше будет мешать с соотношением сторон).
Если вы хотите изменить размер на процент (скажем, 25%), вы можете сделать это, но это сложнее: вам нужно создать изображение, загрузить его за пределы экрана (есть различные способы сделатьэто), дождитесь завершения загрузки, а затем выполните расчет.
Если вы работаете с сервером, вам, вероятно, лучше найти что-то, что может предварительно обработать изображения и создатьминиатюры для вас. ImageMagick , например, может помочь с этой серверной стороной.