如何在Web应用程序中加载大量图像？

Question

我正在制作一个使用大量图片的网络应用程序。它不像照片库。网络应用程序是厨房规划师。用户可以将物品放在房间里。每个项目都有一些图像。有些项目有多个图层。因此，例如每个层是单独的图像。 但我还需要加载一些其他数据，如图像的z-index，项目名称，尺寸等。 图像和项目数据将由ajax调用加载。

我想到了以下几种可能性：

1. 将每个项目作为json对象加载，在该json对象中包含itemdata，在json对象中将image / gif数据作为base64加载。 例如：
＆＃13;
＆＃13;
// GET Request: /item.php?id=123

{"id": "123", "name": "Granite table", "size": "...", "layers": 
    [
    {"img": "data:image/gif;base64,........", "depth": "0"},
    {"img": "data:image/gif;base64,........", "depth": "1"}
    ]
}
＆＃13;
＆＃13;
＆＃13;
1. 单独加载项目数据（名称，大小等），并且该项目数据也是包含的图像文件名称。该图像文件名可用于在新请求中加载每个gif图像。
＆＃13;
＆＃13;
// GET Request: /item.php?id=123

    {"id": "123", "name": "Granite table", "size": "...", "layers": 
        [
        {"img": "table-bottom.gif", "depth": "0"},
        {"img": "table-top.gif", "depth": "1"}
        ]
    }

// GET Request /images/table-bottom.gif
// GET Request /images/table-top.gif
＆＃13;
＆＃13;
＆＃13;

这种疑问的原因是我希望尽可能少地使用数据流量，但我也希望使用更少的请求。