What PNG's row filters actually do

David Miller — Wed, 14 Oct 2026 15:43:06 +0000

PNG preserves its pixels through a sequence of reversible steps. Before compression, it can transform each row of image bytes so that the compressor has a more predictable pattern to work with. PNG calls that transformation a filter.

Take one row of an 8-bit grayscale image with byte values 100, 102, and 103. A filter called Sub can represent that row as 100, 2, and 1: the first value, followed by differences from the value immediately to the left. The decoder reverses the process, adding each difference to the value it has already reconstructed.

For a color image, the operation still works on bytes. Sub compares a byte with the corresponding byte of the previous pixel, such as red with red, rather than simply subtracting the byte directly before it. Another filter, Up, compares with the corresponding byte in the row above. PNG defines other prediction methods as well. Each row starts with a byte that tells the decoder which filter was used there.

Filtering does not shorten the row on its own. The filtered bytes then go through DEFLATE compression. A flat background or a repeated graphic pattern often gives the compressor useful repetition. A noisy photograph is less predictable and can produce a large PNG, even though no image detail was lost during PNG encoding.

The encoder can choose a different filter for each row. That is one reason two PNG files can decode to identical pixels yet have different file sizes. If you are exporting a screenshot with fine text, compare the displayed pixels and the file size after export. The filter affects the bytes on disk; it does not change what the PNG decoder reconstructs.

How to verify a HEIC-to-JPEG conversion before upload

David Miller — Tue, 13 Oct 2026 02:41:41 +0000

An HEIC converter can return successfully while a browser preview or thumbnail service still refuses the result. The app may even have named the output photo.jpg. Before upload, inspect the bytes that came back.

Check the result in the browser

If your converter returns a Blob, this function rejects an empty file, checks the first two bytes for a JPEG marker, and asks the browser to decode the image.

async function inspectJpeg(blob) {
  if (!blob || blob.size === 0) {
    throw new Error("The converter returned an empty file");
  }

  const header = new Uint8Array(await blob.slice(0, 2).arrayBuffer());
  if (header[0] !== 0xff || header[1] !== 0xd8) {
    throw new Error("The output does not start with a JPEG marker");
  }

  const image = await createImageBitmap(blob);
  try {
    if (image.width === 0 || image.height === 0) {
      throw new Error("The decoded image has no dimensions");
    }
    return { width: image.width, height: image.height, bytes: blob.size };
  } finally {
    image.close();
  }
}

The marker check rejects many wrong-format files, but those two bytes can also be present in a truncated JPEG. Decoding catches more failures. Even a file that passes both checks may have the wrong orientation or colors, or may have lost transparency or metadata during conversion. Check those properties with sample photos.

The filename and Blob.type are useful hints, but neither verifies the bytes. MDN explains why Blob.type cannot be the only validation check. The file input's accept attribute only guides the picker; it doesn't validate the selected file. Validate uploads again on the server.

Watch for a canvas fallback

A canvas conversion has one easy-to-miss case. If you call canvas.toBlob(callback, "image/jpeg") and the browser doesn't support the requested format, it exports PNG instead. If the app still gives that blob a .jpg name, the extension disagrees with the file. The check above catches that mismatch.

Keep a few awkward test photos

Use a portrait photo whose orientation matters and an image where a color shift would be visible. A multi-image HEIC and a damaged file are useful too. Check the decoded dimensions and look at the output. The smoke test won't tell you whether the chosen image, its colors, or its metadata match the original.

For a manual comparison, you can try Morphio's HEIC-to-JPG converter with the same samples. Morphio is my product; the browser check above works with any converter.

DEV Community: David Miller

What PNG's row filters actually do

How to verify a HEIC-to-JPEG conversion before upload

Check the result in the browser

Watch for a canvas fallback

Keep a few awkward test photos