How to Optimise and Embed a 3D Model on Your Website

A 3D viewer can make a product page or portfolio far more engaging, or it can add 30 MB to your page weight and wreck your load times. The difference is in about five minutes of optimisation. This is the process we used to prepare the 52 models in our free library.

Step 1: Shrink the textures

Textures are usually the heaviest part of a GLB. Many downloaded models ship with 4K (4096 px) textures, far more than a viewer a few hundred pixels wide can show. Resizing them to 1024 px and re-encoding them as WebP shrinks the file dramatically, often with no visible difference at normal viewing sizes.

The free gltf-transform command-line tool does it in one line:

npx @gltf-transform/cli optimize input.glb output.glb --texture-compress webp --texture-size 1024

For our library, this step alone brought many models from 4–6 MB down to under 1.5 MB, with geometry untouched.

Step 2: Compress the geometry (optional)

For dense meshes, geometry compression is the next lever. Draco or meshopt can cut geometry size substantially. The trade-off is decoding time on the visitor's device, and both need decoder support in your viewer. Test on a mid-range phone.

Step 3: Check the triangle count

If a model is over about 100,000 triangles and only ever shown small, decimate it (see reducing polygon count). Phones will thank you.

Step 4: Embed with model-viewer

Google's open-source <model-viewer> web component handles loading, lighting, camera controls and AR in a single tag:

<model-viewer src="chair.glb" alt="Red velvet armchair" camera-controls auto-rotate loading="lazy" poster="chair.webp" ar></model-viewer>

• alt gives screen readers a description. Write a real one.
• loading="lazy" waits until the viewer scrolls into view.
• poster shows a still image instantly while the model loads, and it's what search engines and slow connections see.
• ar adds an "view in your space" button on supported phones. Add an ios-src pointing to a USDZ for iPhone.

Step 5: Make the poster

Render a still of the model at your chosen camera angle and save it as WebP at the viewer's display size. On our library cards, the thumbnails are posters like this, rendered with the same viewer at 800×600 px.

Step 6: Don't load what nobody looks at

A grid of 50 live 3D viewers will bring any phone to its knees. Show posters in grids and listings, and load the live viewer only on the detail page or on click. That's how our library works.

Checklist

• Textures at 1024 px (2048 for hero models), WebP or KTX2
• Triangle count sensible for the display size
• Poster image and meaningful alt text
• Lazy loading below the fold
• USDZ provided if you offer AR to iPhone users