# pixel A pixel is the smallest building block of a graphical display, with display resolution expressed in pixels. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Google's September 2026 Pixel update addresses a modem vulnerability reportedly under limited, targeted exploitation DevFeed: [Google's September 2026 Pixel update addresses a modem vulnerability reportedly under limited, targeted exploitation]() Original publisher: [Read original article]() Author: Pieter Arntz Published: 2026-09-16T10:39:04Z Content type: news Language: en Sources: [Malwarebytes]() Topics: [Google](), [pixel](), [Vulnerabilities](), [Android Security](), [Security & Privacy](), [Mobile]() Tags: [android-security](), [bugs](), [cve-2026-58704](), [google](), [mobile](), [modem](), [news](), [pixel](), [security](), [update](), [vulnerabilities](), [vulnerability]() ### AI overview Google's September 2026 Pixel security update fixes 110 vulnerabilities, including CVE-2026-58704, a high-severity cellular modem permission-bypass flaw that may be under limited, targeted exploitation. Pixel users should install the update and verify that their device shows the September 5, 2026 security patch level or later. ### Source excerpt Google's September Pixel update fixes 110 vulnerabilities, including a modem flaw being used in limited, targeted attacks. ## Making thumbnails fast DevFeed: [Making thumbnails fast]() Original publisher: [Read original article]() Author: Khan Academy Published: 2015-09-14T22:00:00Z Content type: tutorial Language: en Sources: [Khan Academy]() Topics: [Image](), [pixel](), [Server](), [Software]() Tags: [article](), [blog](), [code](), [color](), [components](), [design](), [engineering](), [image](), [images](), [news](), [rgb](), [software](), [web-frontend]() ### AI overview Khan Academy explains how it generated custom video thumbnails by resizing, desaturating, lightening, color-tinting, and overlaying text and branding on source images. The post also explains pixel multiplication and why the team implemented the image operations themselves because its server infrastructure could not use available libraries. ### Source excerpt Note: This post contains quite a bit of LaTeX notation, which is not supported right now on this ... Read more ## AI Prototyping in 2026: The PM Field Guide DevFeed: [AI Prototyping in 2026: The PM Field Guide]() Original publisher: [Read original article]() Author: Paweł Huryn Published: 2026-08-19T12:19:16Z Content type: tutorial Language: en Sources: [The Product Compass]() Topics: [Artificial Intelligence](), [prompt](), [Tool](), [Security](), [pixel]() Tags: [2026](), [ai](), [context](), [field](), [guide](), [pixel](), [prompt](), [security](), [tool]() ### AI overview A field guide to AI prototyping that compares tools for different jobs, presents a context prompt, recommends a security check before sharing a link, and addresses pixel-perfect handoff. ### Source excerpt I built the same CRM four times in just over an hour, live. The field guide: which tool for which job, the context prompt that beats a spec, the security check before you share a link, and the pixel-perfect handoff ## SpaceDeck X is coming to an arcade cabinet DevFeed: [SpaceDeck X is coming to an arcade cabinet]() Original publisher: [Read original article]() Author: Stanko Published: 2026-05-21T00:00:00Z Content type: release Language: en Sources: [Stanko Tadić]() Topics: [arcade](), [3D](), [JavaScript](), [pixel]() Tags: [3d](), [3d-printing](), [game](), [javascript](), [pixel-art](), [release](), [steam]() ### AI overview The article announces that SpaceDeck X will be released on a physical arcade cabinet at Blast Galaxy in Amsterdam on June 14, with a release party and high-score tournament. The author also describes a 3D-printed trophy modeled in JavaScript with Replicad and mentions work toward a Steam release. ### Source excerpt I want your coins! I'm making a game. It is called SpaceDeck X and you can try it online. But thanks to Amsterdam Indie Arcade, it will be available on a physical arcade cabinet at Blast Galaxy. It will be released on the 14th of June with a small release party and hi-score tournament. If you are in Amsterdam, be sure to come and check it out. It will be available for the next two months, then a new indie game will take its place. Hi-Score Tournament # We are going to organize a hi-score tournament. The Indie Arcade organizer asked me if I could come up with a fun prize for the winner, so I did: I designed and 3D printed the main player ship from the game on a little pedestal. It was super fun figuring out how to bring my pixel art to the real world and break it down for 3D printing. The model is made in JavaScript using Replicad. Come and claim the trophy on the 14th! Steam Release # The arcade release is just a pit stop. I'm actively working towards a Steam release, so stay tuned! ## Fast calculation of the distance to cubic Bezier curves on the GPU DevFeed: [Fast calculation of the distance to cubic Bezier curves on the GPU]() Original publisher: [Read original article]() Published: 2025-10-18T09:21:56Z Content type: article Language: en Sources: [The Last Static Blog RSS]() Topics: [GPU](), [glsl](), [WebGL](), [shaders](), [pixel](), [Code]() Tags: [glsl](), [gpu](), [graphics](), [math](), [maths](), [pixel](), [prog](), [shaders](), [source](), [visualization](), [webgl](), [webgl-demo]() ### AI overview This article explains how to calculate the distance from a point to a cubic Bézier curve on the GPU. It derives the distance function and its derivative, reducing the problem to solving a fifth-degree polynomial, and demonstrates the method with self-contained GLSL fragment shaders and WebGL visualizations. ### Source excerpt Bézier curves are a core building block of text and 2D shapes rendering. There are several approaches to rendering them, but one especially challenging problem, both mathematically and technically, is computing the distance to a Bézier curve. For quadratic curves (one control point), this is fairly accessible, but for cubic (two control points) we're going to see why it is so hard. A glyph from the Virgil font, composed of multiple Bézier curves Having this distance field opens up many rendering possibilities. It's hard, but it's possible; here is a live proof: Distance to a cubic Bézier curve In this visualization, I'm borrowing your device resources to compute the distance to the curve for every single pixel. The yellow points are the control points of the curve (in white) and the blue zone is a representation of the distance field. Note All the demos and code in this article are self-contained GLSL fragment shaders. Most of the code can be found in the article, but feel free to inspect the source code of any of these WebGL demo for the complete code. They can be run verbatim using ShaderWorkshop. The basic maths In a previous article, we explained that a Bézier curve can be expressed as a polynomial. In our case, a cubic polynomial: B_3(t) = \textbf{a}t^3 + \textbf{b}t^2 + \textbf{c}t + \textbf{d} Where a, b, c and d are the vector coefficients derived from the start (P_0), end (P_3), and control points (P_1, P_2) using the following formulas (you can refer to the previous article for details): \begin{aligned} \textbf{a} &= -P_0 + 3(P_1-P_2) + P_3 \\ \textbf{b} &= 3P_0 - 6P_1 + 3P_2 \\ \textbf{c} &= -3P_0 + 3P_1 \\ \textbf{d} &= P_0 \end{aligned} For a given point p in 2D space, the distance to that Bézier curve can be expressed as a length between our curve and p: \begin{aligned} d(t) &= ||B_3(t) - \textbf{p}|| \\ &= ||\textbf{a}t^3 + \textbf{b}t^2 + \textbf{c}t + \textbf{d} - \textbf{p}|| \end{aligned} Our goal is to find the t value where d(t) is the smallest. ## Change font-weight based on the user's screen DPI DevFeed: [Change font-weight based on the user's screen DPI]() Original publisher: [Read original article]() Author: Stanko Published: 2025-02-03T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Font](), [CSS](), [Media Queries](), [pixel](), [User Experience](), [Web Development]() Tags: [accessibility](), [browser](), [css](), [fonts](), [pixel](), [user-experience]() ### AI overview This tutorial explains that thin font weights can become blurry and difficult to read on low-DPI screens. It demonstrates progressive enhancement with CSS media queries: use a more readable default weight for low-DPI displays and apply a thinner weight on high-DPI displays. The technique can also be applied to font size and icon line width. ### Source excerpt A lot of us as developers have hi-DPI screens, and we can easily forget to test the websites we build on low-DPI screens. One common issue I noticed is that thin font weights can be hard to read on low-DPI screens. Since there are fewer pixels to render details, fine lines can appear blurry due to anti-aliasing. Here is an example of the same text rendered on two screens with different device pixel ratios. At the top is a hi-DPI screen (with a pixel ratio of 2), and below is a low-DPI screen (with a pixel ratio of 1). The font used is Inter, 24px tall, with a font weight of 100. This problem is a great example of how we can use progressive enhancement to improve the user experience. We'll set a default font weight that is readable on low-DPI screens, then use CSS media queries to target hi-DPI screens and apply thinner fonts. Here is a code example: // Default font weight for low-DPI screens h1 { font-weight: 300; } // Progressive enhancement for hi-DPI screens // Making font thinner and more elegant @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { h1 { font-weight: 100; } } This will set the font weight to 300 on low-DPI screens and 100 on hi-DPI screens. Feel free to adjust these values as needed. Additional applications # This is an example using font weight, but you can apply the same technique to other properties, such as font size or icon line width. Simulating low-DPI on Mac # This is a great tip from StackOverflow: Open System Settings > Accessibility > Zoom > Advanced > Uncheck "Smooth Images" Zoom out your browser to 50% Turn on the system Zoom (the default shortcut is Option + ⌘ + 8) This should give you a good idea of how your website appears on a low DPI screen. Sorry, Windows and Linux users! If you have a good solution for your system, please open a GitHub issue, and I'll add it here. ## Optimization, Step by Step DevFeed: [Optimization, Step by Step]() Original publisher: [Read original article]() Author: Romain Guy Published: 2024-11-25T00:00:00Z Content type: tutorial Language: en Sources: [Posts on Romain Guy]() Topics: [Optimization](), [Kotlin](), [Android](), [pixel](), [Algorithm](), [Code]() Tags: [algorithm](), [android](), [android-14](), [code](), [developer](), [graphics](), [implementation](), [kotlin](), [optimization](), [performance](), [pixel]() ### AI overview This tutorial describes step-by-step optimizations to the Kotlin implementation of BlurHash decoding. On a Pixel 6 running Android 14, the changes made decoding a fixed blur hash into a 384x384 image up to 4.35 times faster; one optimization using direct character access and a lookup table improved performance by roughly 5%. ### Source excerpt BlurHash is a compact representation of placeholders for images. A blur hash is encoded as a short string that can be rendered to a bitmap at runtime to display a "blurry" version of the source image. The way it works remind me of how spherical harmonics are used in 3D rendering engines to efficiently encode irradiance. I recently remembered that I had been meaning to look at the Kotlin implementation of BlurHash to see if there was a way to make it faster. I looked up the KMP port and after a few changes, I was able to make decoding a blur hash up to 4.35x faster on a Pixel 6 running Android 14. For all the measurements mentioned in this article, I decoded a fixed blur hash to a 384x384 image. The original code took 24.4 ms to do this when running at full speed, and 41.5 ms when locking the CPU clocks. This is way too long considering the low resolution of the image. ## Why does the chromaticity diagram look like that? DevFeed: [Why does the chromaticity diagram look like that?]() Original publisher: [Read original article]() Author: James Long Published: 2024-01-08T12:00:00Z Content type: article Language: en Sources: [James Long]() Topics: [math](), [pixel]() Tags: [article](), [color](), [image](), [pixel](), [rgb](), [theory]() ### AI overview This article explains why the CIE 1931 chromaticity diagram has its characteristic shape and how its colors are computed. It introduces color-matching functions for red, green, and blue, then describes calculating color mixtures and rendering sampled points into a two-dimensional image. ### Source excerpt (note: skipping interactive content block) ^30b920 I've always wanted to understand color theory, so I started reading about the XYZ color space which looked like it was the mother of all color spaces. I had no idea what that meant, but it was created in 1931 so studying 93-year old research seemed like a good place to start. When reading about the XYZ color space, this cursed image keeps popping up: By BenRG - Own work based on: CIExy1931.svg, Public Domain, https://commons.wikimedia.org/w/index.php?curid=7889658 I say "cursed" because I have no idea what that means. What the heck is that shape?? I couldn't find any reasonably clear answer to my question. It's obviously not a formula like x = func(y). Why is it that shape, and where did the colors come from? Obviously the edges are wavelengths which have a specific color, but how did the image above compute every pixel? I became obsessed with this question. Below is the path I took to try to answer it. I'll spoil the answer but it might not make sense until you read this article: the shape comes from how our eyes perceive red, green, and blue relative to each other. Skip to the last section if you want to see some direct examples. The fill colors inside the shape are another story, but a simple explanation is there is some math to calculate the mixture of colors and we can draw the above by sampling millions of points in the space and rendering them onto the 2d image. Let's dig in more. (note: skipping interactive content block) ^f0af28 (note: skipping interactive content block) ^82e29b Color matching functions The first place to start is color matching functions. These functions determine the strength of specific wavelengths (color) to contribute so that our eyes perceive a target wavelength (color). We have 3 color matching functions for red, green, and blue (at wavelengths 700, 546, and 435 respectively), and these functions specify how to mix RGB to so that we visually see a spectral color. More simply put: ima ## Personal Heatmaps DevFeed: [Personal Heatmaps]() Original publisher: [Read original article]() Author: J Evans Published: 2022-10-28T21:15:46Z Content type: tutorial Language: en Sources: [Strava Engineering]() Topics: [data](), [Algorithm](), [navigation](), [pixel](), [real-time](), [Google Maps](), [Website]() Tags: [algorithm](), [cycling](), [data](), [engineering](), [gis](), [google-maps](), [gps](), [heat](), [map](), [mapping](), [navigation](), [pixel](), [real-time](), [recursion](), [running](), [strava](), [zoom]() ### AI overview This article explains the algorithm behind Strava's Personal Heatmap, which renders an athlete's GPS activity as a frequency-based heatmap on an interactive world map. It focuses on Mercator projection and recursive map tiling, where 256x256 pixel tiles are served at different zoom levels for real-time navigation. ### Source excerpt This post discusses the algorithm behind Personal Heatmap, one of Strava's most acclaimed subscriber features. Product Overview The Personal Heatmap feature has been around in some form since 2015, but we gave it a major overhaul in 2020. For those unfamiliar, the heatmap is an aggregated view of an athlete's GPS-enabled activities on Strava. Activity data is rendered onto a map according to path traversal frequency; the more an athlete runs on a road, the brighter -- i.e. "hotter" -- that road shows up on the map. The result is a beautiful color gradient displaying the intricate web of past activities, unique to each athlete. The Personal Heatmap is displayed on an interactive world map, also known as a slippy map. Athletes can seamlessly zoom in and out or pan around to arbitrary views of the map, and their activity heat stays displayed the entire time. To enable this, we must provide a scheme for rendering and serving subsections of the world map on the fly. Enter map tiling. Mercator Projection & Map Tiling Map tiling is the practice of subdividing a map into many discrete images that can be stitched together and rendered as a single image in real-time during map navigation. The first step in choosing a tiling scheme is picking what world map to use. Enter, the Mercator Projection, the most commonly used projection of Earth as a flat, rectangular surface. We use this projection in all of our mapping products, including heatmaps. https://medium.com/media/d9e120d13950dd0f1bb4ee14108aa9a9/href Now, imagine a grid overlaying the Mercator projection. Each grid section is known as a tile, a pixel image with resolution 256x256. Every tile has an associated zoom level, and tiles are defined recursively according to this zoom level. A tile at a given zoom level can be subdivided into four equal sized tiles at a next zoom level. For example, Zoom level 0 displays the entire planet in a single 256x256 pixel image. Zoom level 1 displays the world in four 256x256 pixel images. ## A Review of Generative Art, Blogging, Work, and Side Projects in 2021 DevFeed: [A Review of Generative Art, Blogging, Work, and Side Projects in 2021]() Original publisher: [Read original article]() Author: Stanko Published: 2022-03-04T00:00:00Z Content type: opinion Language: en Sources: [Stanko Tadić]() Topics: [generative art](), [3D modeling](), [pixel](), [ibm]() Tags: [3d-modeling](), [clients](), [code](), [generative-art](), [ibm](), [pixel]() ### AI overview The author reviews 2021, covering generative art, reduced blogging activity, a redesign of the site from Jekyll to Zola, work with TED and IBM Research, and side projects including 3D modeling, electronics, and a pixel art frame. ### Source excerpt I'm super late with this post, but again, better late than never. I just couldn't find the inspiration and drive for writing last year. Generally, I lacked motivation and wasn't really productive. Generative Art # As for my art, 2021 wasn't as fruitful as the year before, but I did finish a couple of drawings. I'm still very much into it and lately I have found my drive again. AxiDraw, the pen plotter, continues to be my favorite purchase ever. Here are a couple of my plotted drawings from the last year: I wrote a separate post about the creative process behind the last drawing - Breaking down Krypton. Blog # Oh boy, did I neglect this blog last year. I wrote only four posts. But I really couldn't find the inspiration and will to write. Naturally, the number of visits dropped, and it was a little above 90K. The fact that adblockers now block Goat Analytics also had an impact on numbers. Luckily, now I have way more drive to write and keep the site updated. This February, the blog got a redesign that I planned for a long time. I wanted to add "Art" and "Projects" sections, but I kept redesigning it over and over again. Finally, when I decided to switch from JekyllI'll probably cover that in a another post. to Zola I was able to focus and finish the redesign. I did the design myself, using the thing or two I picked up from my designer colleagues. I released it as soon as I had something presentable. It was super bare bones and I'm still tweaking it and adding more personality, but nonetheless, I'm pretty satisfied with how it turned out. Fun fact, you can try my layout debug mode, I kept it in the production on purpose. Work # Last year was productive for my company as a whole. I had the pleasure of working with two clients, TED and IBM Research. In both cases, teams consisted of wonderful people and I feel proud that I was able to help them build and improve their digital products. Side projects # I tremendously enjoy these small pet projects. Generative art was a bi ## Ideas and Solutions for Advent of Code 2021 in Kotlin -- Part 4/4 DevFeed: [Ideas and Solutions for Advent of Code 2021 in Kotlin -- Part 4/4]() Original publisher: [Read original article]() Author: Yev Kanivets Published: 2021-12-26T14:39:41Z Content type: tutorial Language: en Sources: [xorum.io - Medium]() Topics: [Advent of Code](), [Kotlin](), [3D](), [pixel]() Tags: [3d](), [advent-of-code](), [algorithms](), [array](), [beacon](), [competitive-programming](), [data-structures](), [kotlin](), [pixel](), [points](), [scanner](), [solutions]() ### AI overview A Kotlin walkthrough of Advent of Code 2021 tasks 19 and 20. It explains matching rotated point sets in 3D space using beacon intersections, then enhancing an image represented as a 2D pixel array while accounting for infinite padding and changing background values. ### Source excerpt Ideas and Solutions for Advent of Code 2021 in Kotlin -- Part 4/4 The final week of Advent of Code was, obviously, the most challenging one. To be honest I was close to being happy with just a silver star multiple times. But at the end, tenacity made the difference. 50 stars are mine this year 🌟 Ideas and Solutions for tasks 1 to 6 can be found here, for tasks 7 to 12 -- here, for tasks 13 to 18 -- here. Day 19: Beacon Scanner We are provided with several sets of points in 3D space. Those points are rotated differently in each set, so we don't know how X, Y, and Z coordinates are aligned between sets. Our goal is to merge all those sets into a single group by matching points (sub-task one) and find the most significant distance between coordinate origins after they are matched. Here is the complete task. This is an exciting task! I've initially learned about this idea from The Three-Body Problem book, which introduced the concept of locating any star in the Universe by the distances from a few nearest stars -- in our case, "a few" means 12. Think about it as a star fingerprint ;) So to match the sets of points in 3D space, we need: check all combinations of rotations in three dimensions (in our task, the step is 90 degrees, so there are 48 combinations) for the whole set assume that each pair of points from the first set and the second set is an intersection by adjusting all points to that pair check how many adjusted points intersect between the two sets if there are more than 12 intersections, voilá -- the sets are matched The embedded Kotlin's functions like intersect, map, and mapNotNull make the solution, even for such a complex task, elegant. Day 20: Trench Map This image-enhancing task provides us with the initial photo (2D array of black and white pixels), and enhancing guidance (1D array). Enhancing happens in steps, where for each pixel, we found its enhanced value as a result of a combination of itself + all eight adjacent pixels. Here is the complete task. We ## Where is the high bandwidth internet for the masses? DevFeed: [Where is the high bandwidth internet for the masses?]() Original publisher: [Read original article]() Published: 2020-05-03T15:09:26Z Content type: article Language: en Sources: [Jessie Frazelle]() Topics: [screen](), [pixel](), [Graphics](), [Ray Tracing](), [Xbox]() Tags: [graphics](), [ibm](), [japan](), [pixel](), [ray-tracing](), [screen](), [xbox]() ### AI overview The article examines the progression from standard-definition television to HDTV, 4K, and 8K, connecting increasing pixel density with newer game consoles and display technology. ### Source excerpt Being cooped up at home got me looking into the new Xbox and PlayStation 5. I was curious about the innovations in the consoles since their successors. Both claim to have ray tracing and support for 8K graphics. This then got me thinking about how prevalent 8K televisions are today. 8K televisions seem to be in the same state as 4K televisions a few years ago. One thing I know through my life is that pixel density will continue to get bigger and bigger. I almost wonder if there is a Moore's Law equivalent for pixel density... let's take a look at televisions through the years. Pixel density through the years Standard definition television The first electronic television was invented in 19271. Cable television systems originated in the United States in the late 1940s and were designed to improve reception of commercial network broadcasts in remote and hilly areas2. We can consider the televisions of this time to be what we know of as "standard definition." Standard definition television (SDTV) is designed on the assumption that viewers in the typical home setting are located at a distance equal to six or seven times the height of the picture screen -- on average some 10 feet away. High definition television High definition television (HDTV) has its roots in research that was started by Japan's public broadcaster, NHK, in 19703. For comparison, a 1080i HDTV signal offers about six times the resolution of a conventional 480i SDTV signal. HDTV also features a wider 16:9 aspect ratio format that more closely resembles human peripheral vision than the 4:3 aspect ratio used by conventional TVs in the past. Furthermore, HDTV is based on a system of 3 primary image signal components rather than a single composite signal, thus eliminating the need for signal encoding and decoding processes that can degrade image quality. Perhaps the biggest advantage over the old analog SDTV system is that HDTV is an inherently digital system. 4K resolution In 1984, Hitachi released the CMOS (co ## Sass Pixel Art DevFeed: [Sass Pixel Art]() Original publisher: [Read original article]() Published: 2015-05-03T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [Sass](), [HTML5 and CSS3 tricks](), [pixel](), [Programming]() Tags: [blog-post](), [css3](), [how-to](), [pixel-art](), [sass]() ### AI overview This tutorial explains how Sass lists, matrices, maps, and list functions can generate pixel art using CSS3 multiple box shadows. It examines how individually positioned box shadows form pixels and how Sass data structures organize them. ### Source excerpt Pixel art is so much fun! This blog post walks through how to read a matrix-like list with Sass and generate Mario pixel art from box shadows. ## Seam Carving for Content-Aware Image Scaling DevFeed: [Seam Carving for Content-Aware Image Scaling]() Original publisher: [Read original article]() Published: 2013-03-04T22:19:19Z Content type: tutorial Language: en Sources: [Jeremy Kun]() Topics: [scaling](), [Mathematics](), [pixel](), [implementation](), [Web Development]() Tags: [calculus](), [graphics](), [image](), [implementation](), [javascript](), [mathematics](), [photoshop](), [processing](), [programming](), [scaling](), [seam-carving](), [web-development]() ### AI overview This tutorial explains seam carving, a content-aware image-rescaling method that removes or adds pixels the viewer is least likely to notice. It introduces the motivation, mathematical background, and a working implementation for reducing and enlarging images. ### Source excerpt The Problem with Cropping Every programmer or graphic designer with some web development experience can attest to the fact that finding good images that have an exactly specified size is a pain. Since the dimensions of the sought picture are usually inflexible, an uncomfortable compromise can come in the form of cropping a large image down to size or scaling the image to have appropriate dimensions. Both of these solutions are undesirable. ## Transparency with JPEGs DevFeed: [Transparency with JPEGs]() Original publisher: [Read original article]() Author: Square Engineering Published: 2013-01-18T17:01:00Z Content type: tutorial Language: en Sources: [Square Corner Blog RSS Feed]() Topics: [Compression](), [Image](), [Graphics](), [implementation](), [pixel](), [render]() Tags: [android](), [color](), [compression](), [engineering](), [graphics](), [implementation](), [information](), [jpeg](), [library](), [pixel](), [quality](), [render]() ### AI overview The article describes a technique for adding transparency to JPEG images by storing color data in one JPEG and transparency data in a separate monochrome alpha-channel image. It explains how to combine the two images during rendering, including an Android implementation, to reduce file size while retaining photographic quality. ### Source excerpt Combining the compression of JPEGs and the transparency of PNGs for a 90% compression gain.