Displaying images and videos 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.

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.

Image-specific considerations