H.26x IDR as Web Image
When H.264 (Advanced Video Codec (AVC)) was created, it was designed as a video codec. There was already a popular image codec, JPEG. And although H.264 Instantaneously Decodable Refresh (IDR) frames are similar to JPEGs in concept, in that each encodes a full image independent of other information, the two formats are not compatible. Hence, if you have an H.264 file and wish to view a thumbnail, developers often save a separate JPEG for this purpose.
With H.265 (High Efficency Video Codec (HEVC)) was created, an image format named High Efficiency Image Format (HEIF) was created to turn a H.265 IDR into an image. Unfortunately, today only Safari supports HEIF, with no support planned in Chrome, Edge, Firefox, or Opera.
Fortunately, WebCodecs can be used to render a H.264 or H.265 IDR almost as simply as if it were an image. Here's a demo -- drag an Annex-B formatted IDR (prefixed with SPS and PPS) onto the canvas below to try it out). Note that H.265 support is contingent on underlying hardware support. For most users, this is not an issue.
Sample images to try:| JPEG | 1,000,460 bytes |
| H.264 IDR | 469,435 bytes |
| H.265 IDR | 296,508 bytes |