--- title: Pixel data from encoders to decoders | daily.dev description: Explores how image data transforms from raw pixels to compressed files through encoding and decoding processes. Covers pixel fundamentals, image formats like... canonical: https://daily.dev/posts/pixel-data-from-encoders-to-decoders-7cfb82dlk twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Pixel data from encoders to decoders | daily.dev og:description: Explores how image data transforms from raw pixels to compressed files through encoding and decoding processes. Covers pixel fundamentals, image formats like... og:url: https://daily.dev/posts/pixel-data-from-encoders-to-decoders-7cfb82dlk og:image: https://api.daily.dev/og/posts/7Cfb82DlK.png og:image:alt: Pixel data from encoders to decoders og:image:width: 1200 og:image:height: 630 og:locale: en --- [MDN Blog](https://daily.dev/sources/mdnblog) [Read post](https://api.daily.dev/r/7Cfb82DlK) # [Pixel data from encoders to decoders](https://api.daily.dev/r/7Cfb82DlK "Go to post") Explores how image data transforms from raw pixels to compressed files through encoding and decoding processes. Covers pixel fundamentals, image formats like JPEG, AVIF, and WebP, and compression techniques including chroma subsampling, spatial locality exploitation, prediction modes, DCT transformations, quantization, and entropy coding. Demonstrates practical JavaScript examples for pixel manipulation and explains how modern codecs achieve significant file size reductions while maintaining visual quality through various optimization strategies. [#webdev](/tags/webdev "Check all #webdev posts")[#javascript](/tags/javascript "Check all #javascript posts") Aug 04, 2025•22m read time•From [developer.mozilla.org](https://api.daily.dev/r/7Cfb82DlK "developer.mozilla.org") [](https://api.daily.dev/r/7Cfb82DlK "Go to post") 132 Impressions3 Upvotes Comment Bookmark Copy Share your thoughtsPost [](https://daily.dev/sources/mdnblog) [MDN Blog](https://daily.dev/sources/mdnblog "https://daily.dev/sources/mdnblog") MDN Blog is a platform or publication associated with Mozilla Developer Network (MDN), offering arti... Read more 373 Followers • 2.3K Upvotes #### Would you recommend this post? Copy link WhatsApp Facebook X New Squad Copy linkShare with your friends 3 ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Pixel data from encoders to decoders","url":"https://daily.dev/posts/pixel-data-from-encoders-to-decoders-7cfb82dlk","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/pixel-data-from-encoders-to-decoders-7cfb82dlk"},"datePublished":"2025-08-04T02:32:55.266Z","dateModified":"2025-08-04T02:33:17.564Z","description":"Explores how image data transforms from raw pixels to compressed files through encoding and decoding processes. Covers pixel fundamentals, image formats like...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a2d5504f982f58e5030bc23bfdb6c6e5?_a=AQAEulh","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a2d5504f982f58e5030bc23bfdb6c6e5?_a=AQAEulh","isAccessibleForFree":true,"articleSection":"MDN Blog","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"MDN Blog","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/236034d60b694d00b5fb9a5a5d6b57ae","url":"https://daily.dev/sources/mdnblog"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/pixel-data-from-encoders-to-decoders-7cfb82dlk","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,javascript","timeRequired":"PT22M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"MDN Blog","item":"https://daily.dev/sources/mdnblog"},{"@type":"ListItem","position":3,"name":"Pixel data from encoders to decoders"}]} ```