Displaying transcoded media efficiently

For both page loading times and CDN costs, you need to ensure that you serve images and videos at the size they are likely to be shown at. For example, thumbnails are often no bigger than 640x480, so you would want to use a version of the image or video resized to that size rather than a larger version.

General media considerations

Sequentially loading pages

You can immediately appreciate that if you have say, 500 artworks in a database, loading all of them onto a page at once is a bad idea; the user is not going to see all of them at one time, so your page is extremely slow and eats loads of CDN bandwidth for no reason.

Instead, load the first e.g. 25 or 50 results, then load the next 25 or 50 when a user clicks a button or scrolls to the bottom of the page.

Video-specific considerations

In video HTML tags, the preload attribute specifies whether the video should be loaded before the user tries to play it, if only the metadata should be loaded, or nothing at all.

For obvious reasons, preloading the entire video when the user might never click on it is a bad idea outside of very niche use cases. You should generally use the metadata option for this; loading the metadata means you can show the duration of the video and so on, giving the user some extra information without loading a lot of data onto the page in advance.