I'm using patternify and pixieengine when i need to make some small graphic elements for my websites. It didn't bother me till now - pixel editor is dead a few days now. Why these websites ? Because of the base64 code compression.
Example:
Patternify - I fill 5x5 px pattern with black color, this is the base64 code i can get:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEUlEQVQImWNgYGD4jwVTXRAA9qoY6Kb21uEAAAAASUVORK5CYII=
It's short and everything works as i expected.
Now I'll try to make a short base64 code without these sites. I made in photoshop a black square 5x5 the same as above and saved this in every possible format. Next I've found few online encoders but this is what they gave me:
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAMAAAC6sdbXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTM1QjVGOEU0MDkxMTFFM0E5MDlGOUFDNDM5REVCMUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTM1QjVGOEY0MDkxMTFFM0E5MDlGOUFDNDM5REVCMUQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFMzVCNUY4QzQwOTExMUUzQTkwOUY5QUM0MzlERUIxRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFMzVCNUY4RDQwOTExMUUzQTkwOUY5QUM0MzlERUIxRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pg8gB7gAAAAGUExURQAAAP///6XZn90AAAAOSURBVHjaYmDABwACDAAAHgABzCCyiwAAAABJRU5ErkJggg==
Much longer code and the weight of file was similar to the PNG from patternify ~950 B
Patternify has limitation to 10x10 px. So for larger elements i have to use pixieengine, it has exact the same compression level as patternify and no limitation unfortunately it's dead thats why i need to understand now how it really works. Is there any "offline" way to achieve patternify/pixieengine compression level ?
This isn't really a question about base64 encoding, it's about image compression. Base64 encoding is not going to implicitly make your image take up fewer bytes, in fact it makes it take up more (binary vs. a string representation of that binary). Run your original PNG through a good compression tool such as pngcrush and then encode it as base64.
Related
I'm trying to build a live gif, just for kicks, and I want to turn a 2D array of pixel data into a gif (or more specifically one frame of an animated gif). I found gifencoder and it works but it's slow as molasses (~800ms to encode a 500x500px gif). Every other solution I can find (e.g. things built on graphicsmagick or imagemagick) don't seem to have a way to accept input streams, but just already encoded images. I suppose I could just dump data to a .bmp, but that's a very roundabout way to accomplish this. The other thing I'm thinking is just lzw encoding the data but before I go digging into the technical aspects of that I'm just fishing here for other ideas.
I just tried to convert few JPEGs to a GIF image using some online services. For a collection of 1.8 MB of randomly selected JPEGs, the resultant GIF was about 3.8 MB in size (without any extra compression enabled).
I understand GIF is lossless compression. And that's why I expected the resultant output to be around 1.8 MB (input size). Can someone please help me understand what's happening with this extra space ?
Additionally, is there a better way to bundle a set of images which are similar to each other (for transmission) ?
JPEG is a lossy compressed file, but still it is compressed. When it uncompresses into raw pixel data and then recompressed into GIF, it is logical to get that bigger a size
GIF is worse as a compression method for photographs, it is suited for flat colored drawings mostly. It uses RLE [run-length encoding] if I remember well, that is you get entries in the compressed file that mean "repeat this value N times", so you need to have lots of same colored pixels in horizontal sequence to get good compression.
If you have images that are similar to each other, maybe you should consider packing them as consequtive frames (the more similar should be closer) of a video stream and use some lossless compressor (or even risk it with a lossy one) for video, but maybe this is an overkill.
If you have a color image, multiply the width x height x 3. That is the normal size of the uncompressed image data.
GIF and JPEG are two difference methods for compressing that data. GIF uses the LZW method of compression. In that method the encoder creates a dictionary of previously encountered data sequences. The encoder write codes representing sequences rather than the actual data. This can actual result in an file larger than the actual image data if the encode cannot find such sequences.
These GIF sequences are more likely to occur in drawing where the same colors are used, rather than in photographic images where the color varies subtly through out.
JPEG uses a series of compression steps. These have the drawback that you might not get out exactly what you put in. The first of these is conversion from RGB to YCbCr. There is not a 1-to-1 mapping between these colorspaces so modification can occur there.
Next is subsampling.The reason for going to YCbCr is that you can sample the Cb and Cr components at a lower rate than the Y component and still get good representation of the original image. If you do 1 Y to 4 Cb and 4 Cr you reduce the amount of data to compress by half.
Next is the discrete cosine transform. This is a real number calculation performed on integers. That can produce rounding errors.
Next is quantization. In this step less significant values from the DCT are discarded (less data to compress). It also introduces errors from integer division.
I'm very interested in understanding how graphic file format (PNG, JPG, GIF) work. Are there any code examples that demonstrate how these files are made and also how they are interpreted (viewed in browser)?
Regardless of which graphic file format you are working with, you need to understand the basic nature that all graphic files have in common.
File Header
File Type, Version, (Time & Date Stamp - if included)
Possible data structure/s info or chunks
Flags for which color type to be expected, if compression is available and which type, byte order (endian), has transparency, and other various flags.
Image Data Info
Width normally in pixels sometimes in pels, bits or bytes
Height normally in pixels sometimes in pels, bits or bytes
Bits Per Pixel or Pixel Depth
Image Size in Bytes: numPixelsWidth * numPixelsHeight * ((bits or bytes) for each pixel)
Color Type: - Each Pixel has color data which can vary
Gray Scale
Palette
Color RGB
Color RGBA
Possible Others
If Compression Is Present Which Coding and Encoding Is Used
The actual image data
Once you understand this basic structure then parsing image files becomes easier once you know the specification to the file structure you are working with. When you know how many bytes to read in to your file pointer that includes all headers and chunks, then you can advance your file pointer to the data structure that will read in or write out all the pixel (color) data. In many cases the pixel data is usually 24bits per pixel such that each channel RGBA - Red, Green, Blue, and Alpha are 8bits each or one byte same as an unsigned char. This is represented in either a structure or a two dimensional array. Either way once you know the file's structure and know how to read in the actual image or color data you can easily store it into a single array. Then what you do with it from there depends on your application's needs.
The most detailed information can be obtained by reading the file format specification and implementing a parser in the language you know best.
A good way would be to read the format and transform it into an array of four byte tupples (RGBA, the red, green, blue and alpha parts of a color) This will allow you to use this format as an in between format between formats for easy conversion. At the same time most APIs support the displaying of this raw format.
A good format to get started with is BMP. As old as it is, if this is your first encounter with writing a parser this is a safe an 'easy' format. A good second format is PNG. Start with the uncompressed variations and later add the compression.
Next step is TGA to learn reading chunks or JPG to learn more about compression.
Extra tip: Some implementations of writers contain(ed) errors causing images to be in violation of the format. Others added extra features that never made it to the official specs. When writing a parser this can be a real pain. When you are running into problems always second guess the image you are trying to read. A good binary/hex file reader/editor can be a very helpful tool. I used AXE, if I remember correctly it allows you to overlay the hex codes with a format so you can quickly recognize the header and chunks.
I'm trying to understand the JPEG compression process and performed the following steps to verify a few things.
I take an input image img1.jpg and compress it by using IrfanView, say quality=50 (img1_compress.jpg).
Then I crop a small block from the input image img1.jpg (block.jpg of size 8x8 at X,Y=16,16) and compress it by using the same value of quality parameter (50). Let's call it block_compress.jpg.
Now when I compare this block's pixel values with the one in fully compressed image, they don't match.
To clarify, the pixel value at position 0,0 in block_compress.jpg should match with the pixel value at position 16,16 in img1_compress.jpg.
I'm confused why pixel values don't match? Any ideas?
I just did this experiment with my JPEG codec and the pixel values match. Irfanview may be applying some kind of noise filter or other modifications when it compresses JPEG images. Without seeing the source code to the codec you can't know what it's doing. Your experiment is valid, but by using other people's code to test your theory you can't know what's really going on inside their code.
JPEG is lossy compression algorithm. Compressing one image with identical compression settings in different tools can produce differ result. You need use one of lossless algorithms if you want pixel-to-pixel result. I.e. you can use PNG
"the DC component of each 8x8 block is predicted from the previous block.” : by Oli Charlesworth
I want to get a screenshot of a x11 window and find the location of smaller images in it. I've had no experiences with working with images, I searched a lot, but I don't get much helpful results.
The image are from files and can be loaded with any format that is easier to use.
The getting screenshot is easy, using XGetImage. But then the question is that which format to use XYPixmap or ZPixmap? What's the difference? How each pixel is represented?
And then what about the images? Which file format is easier to use? And then how each pixel is represented in that format?
And which algorithm should I use to find the location of the images in the screenshot?
I'm really lost here. I need a push in the right direction and see some example code that can help me to understand what I'm dealing with. Couldn't find any similar work.
The language, frameworks or the tools doesn't really matter to me as long as I get it working on my ubuntu machine. I can work in either C, C++, haskell, python or javascript.
With XYPixmap, each image plane is a separate bitmap (one bit per pixel, with padding at the end each scanline). If you have 24-bit color, you get 24 separate bitmaps. To retrieve pixel value at some (x,y) coordinates, you need to fetch one bit from each of the bitmaps at these coordinates, and pack these bits into a pixel.
With ZPixmap, pixels are represented as sequences of bits, with padding at the end of each scanline. If you have 24-bit color, every 3 bytes is a pixel.
In both cases, there may bee padding in the end and sometimes in the beginning of each scanline. It is all described here.
I would not use either format directly. Convert your pixmap to a simple 1, 2, or 4 bytes-per-pixel 2D array, and do the same with the patterns you want to search. If you want to find exact matches, you can use a slightly modified string search algorithm like KMP. Fuzzy matches are tricky, I don't know of any methods that work well.