前端预览图片，用Base64和objectURL哪个更好

Question

我现在有10张图片，平均1.5mb 大小，我现在用input file一次性选中它们，并且使用img标签显示出来。

我是把它们弄成base64好呢？还是用ObjectURL好？（运行环境仅限于Chrome最新版，不考虑其他因素）

后续我还需要把这10张图片打包成zip下载下来(使用jszip插件)，整个过程完全前端操作不与后台交互。

这是我的测试代码

input.onchange = function(e) {
    [...this.files].map(file => {        const img = new Image();        // 方案1 ObjectURL
        img.src = window.URL.createObjectURL(new Blob([file], {type: file.type}));        document.body.appendChild(img);       
         // 方案2 Base64
        const reader = new FileReader();
        reader.onload = function(e) {
            img.src = e.target.result;            document.body.appendChild(img);
        }
        reader.readAsDataURL(file);
    });
}

这是我简单测试几次后，取了一个感觉像平均值的结果（左边方案1，右边方案2），看样子应该是ObjectURL的方案更好些？但如果考虑上我后边所说的需求呢？或者说我把图片的数量加到100张？另外渲染和绘制工作base64要好于ObjectURL这个又要怎么理解？

Answer 1

建议用dataURL