HTML - Estructura website

Hola!
Quiero crear una web simple similar a la siguiente:
https://quickdraw.withgoogle.com/data/apple

Un listado largo de iconos (siempre el mismo) cada uno con un texto diferente (al pasar por encima o al hacer click). La cosa es que si todos los elementos están en una sola página ésta pesará demasiado. Cómo haríais la estructura de una web así?

Agradezco cualquier aportación!

Saludos!
Pablo

Pablo,

Bueno partamos que esta alojado en un servidor Google :P
1º - Usa un formato grafico ligero: Puedes escribir y guardar en svg o webp.
Puede ser una imagen grande (usa canvas) con cada dibujo o una pequeña e independiente para cada uno.

2º - Usa una carga diferida.
Para los navegadores basados en Chornium bastara usar el atributo loading así:

Otra opción con mas soporte para diferentes navegadores será usar alguna librería como lazyload.
https://appelsiini.net/projects/lazyload/

El acercamiento de este método es que carga imágenes en este caso, a medida que el usuario se desplaza y necesita.
Cool, no?

Quedamos atentos,
Saludos!

Gracias por tu respuesta!

La imagen, será siempre la misma. Me apunto lo del formato, para intentar que sea lo más ligera posible.
Siendo siempre la misma, se va acumulando el peso de todas formas?

Quisiera saber cómo llamo al texto que va con cada imagen.

Hola de vuelta Pablo,

Claro, si escribes siempre en la misma, los nuevos datos harán pese un poco mas,
La idea es plantearse: Guardo una imagen grandes, que contenga los dibujos y cuando llegue a por ejemplo 2 megas,
vuelvo a crear otra imagen grande con los próximos dibujos y así sucesivamente.
o ir creando una imagen por cada dibujo, precargas el contenido via ajax y seguro queda bonito y funcional.

Esta es un actualización según lo que Pablo detallo y clarifico vía el chat HTML

La solución mas simple que se me vino en mente:
https://codepen.io/lowpez/pen/ExKPjpN

Digamos tu svg es de 100 x 100px.

El div que contendra las columnas con textos:


Dentro de .wrapper creamos otro div con clase .row
Vía CSS grid se hace muy simple:

Y por ultimo le damos la clase .column los elementos que irán dentro del div .row


Eso seria,
Imagino puedes refinar detalles.
Espero sirva,
Saludos!