Very nice puzzle, and tool 
4 Likes
Great solve for a great puzzle - thanks for sharing the method - I’m looking forward to the breakdown by DevilinPixy as well.
2 Likes
Initial thoughts for this puzzle
I just thought of ways to hide text in an image, but using a different method than the usual known ways to do so. So when I thought about an image, the first thing that came to mind are the colors used for the pixels that make up an image. Depending on the format, this uses at least the RGB color information, while for images that allow transparency, the Alpha value is added, RGBA.
So what does text have in common with colors used to make an image? Well, that was easy enough, because a color has a value representation, and ascii characters have a value representation too. Color values are made up of three values (or 4 with alpha), ranging from 0-255. When you look at ascii values, the main range for default text characters is from 32-127 (decimal). However, if I wanted to turn text into colors, it would be fine to include non-printable characters (0-31 dec.), as well as including the extended range from 128-255. Actually, this extended range would even be better to have included, as it would allow more ‘special’ text characters to be used, as well as some symbols.
With this knowledge, I realised I could basically combine the values of 4 ascii characters to get a single RGBA representation. Each color channel value range, exactly matches each ascii extended value range. I thought that was pretty cool, but hasn’t that been done before? It just seemed so easy to come up with this idea, so I decided to have a look around.
Existing tools for my idea
I searched for already existing tools for the idea I came up with, but found it hard to get Google to work with me. Searching for text to image comes up with pages of turning text into an actual image of said text, not hiding the text as pixel values to create an image of those pixels combined. Some ‘more refined’ searches came up with code examples to get the colour information of pixels. Cool stuff, but I couldn’t really find any useful tool for what I had in mind. Sure such code is useful, but I can’t expect those trying to solve a puzzle to all be competent coders. Closest tools I found do something similar but for some reason use a grey scale. Other tools closer to my idea were shady … download .exe … right!? I was honestly amazed with the lack of results, but hey, not bad either, as I can code! Just have to keep this in mind, so whatever the puzzle is going to look like, should still be doable by hand.
Testing
With testing, I mean to look into how well hidden my idea would actually be. I know I can now turn ascii characters into colour values, but what would it actually look like when turned into an image. So I wrote myself some code to make it easier on myself. Input some short text, convert the values, combine them, and turn into an image, pixel by pixel. My initial program would output the full result of a text into colour values using HEX. However, once I started coding with Javascript, it turned out it actually uses those values as decimal values. No problem, as creating several so called arrays containing values, can be easily transformed from one to another. I am just more used to using HEX values when using colours.
Soon enough I could get a resulting image. Now I had to check how well the text would actually be hidden. So I looked at the image (png) using a hex editor, just to notice it all being gibberish … great! Then I looked at the image data in base64, which is common for images shown on the web. Same thing, all gibberish and no easy way to convert to pixel values. This satisfied me, because it meant that my text would indeed be well hidden. Only way to actually get to the pixel values, is to really understand the image format and go through very complicated hoops to get any results.
Now I was sure that for the general puzzle solver on here, the only way to solve it, would more or less be to look at the pixels themselves. Using a general painting program easily allows you to zoom in, to see these pixels sharp and big. Then using a colour dropper/picker would show you the exact colour. Of course I had to test this, to see if none of the image data would actually have any loss. If a pixel colour is only slightly off, it would have a totally different result. However, it turned out to have no loss, all colours exactly matched. Great!
Of course I am aware of several tools available online to help out with getting a pixel colour. This to me was fine, it wouldn’t stand in the way of solving, or making the puzzle itself ‘too’ easy. Helpful yes, but you’d still have to figure out how to actually solve it first, which was of course my main goal.
At the same time, I was well aware of not including the 4th value used for the colour alpha channel. In most drawing tools, getting the correct alpha value is a bit more complicated. Most people are likely not used to actually use RGBA directly, but just the plain colour, to adjust alpha/transparency after. Even on websites it’s more common to use straight up RGB, while alpha is more common in likely more advanced CSS styling. had I actually used alpha/transparency, the resulting image would possibly even be more interesting, as well as even smaller. It would then have fit 4 ascii characters per pixel, instead of 3. At the same time these images would have been limited to image formats supporting transparency as well. In this case it could have worked, as I had been using PNG, even in my tool. I just forced transparency to always be a value of 255, which means not transparent at all.
Finalising the idea
With all of the above tested and done, I could start thinking of the actual puzzle content. In all honesty, I was more excited about my idea actually working, than being focused on really cool content. The resulting images turned out truly small, even when adding huge amounts of text. This actually somewhat disappointed me, because it wouldn’t really ‘look cool’. The bigger the image, the cooler it looked, but at the same time, way harder to solve. Knowing this was likely going to need manual labour, having a big image as a result, was out of the question.
I searched for interesting things to turn into an image. Then tried some ascii art which I love. Searched for something that could relate to this forum, only to realise ascii art is ‘old school’. Hardly anyone really creates it anymore. Anything more recent, like NMS related didn’t really look very well.
I then stumbled upon Dr Seuss ascii art with a quote. Sure, I can use that as an initial start to give an impression. Of course I knew how hard it would be to solve that one, especially considering only a small part actually contains text. But hey, I could at least get you all excited and start thinking about possibilities. When new clues would be required to keep you all interested, I could post a new image with just the text. I also found some additional quotes that somewhat fit to give clues. I don’t mind guiding a bit along the way, while keeping it a bit cryptic is actually fun.
While actually testing the images as a post, I noticed another fun side effect. Of course the actual image is tiny, but when I manually altered the size of the uploaded image to show, it still would download the actual tiny source. Even when viewing the image in a new tab it would show tiny again. I thought that was actually pretty cool and useful, as well as a good distraction.
I was mostly excited to get this started, as I found the workings of my puzzle most interesting and wanted to share. So I stopped my search and decided to just go with our Dr.'s ascii art. Should be cool enough, right ?
Solving
Once I had this puzzle posted, you all made me really laugh, some funny replies. The mention of ‘brain’ by @SingularGleam was most hilarious. He wrote me in private with a similar comment. Of course he did not have a clue how funny this actually was, knowing the answer.
So giving it some time, getting an impression on your initial thoughts, made me post again. This time the smaller version, with another Dr. Seuss quote that I thought really fit well. Seeing the reply by @sheralmyst, I figured this would be solved soon enough. I had been wondering about the difficulty of course, but wasn’t really sure. In my mind it seemed easy enough, but at the same time had huge doubt. So I was happy to see confirmation of being on the right track.
Then followed some disappointment. Had I wrongly assumed you would all download the actual source? @toddumptious made it even worse with mobile scaling the image regardless when small. Sorry about that, I tend to forget about mobile devices with things like this. Finding out that mobile is a whole different experience, unable to participate, made me sad. Oh well, I now decided to give another clue by posting the actual size images. Wouldn’t change the fact on mobile of course, but all I could do was explain a bit more.
So with the size issue now ‘partially’ solved. I kept an eye on progress being made. I am sure @Oshoryu was having some interesting leads, although likely in the wrong direction. Then @kerdorin with an interesting reply, mentioning image/pixel art … close, it’s ascii art … lol. Too bad he mentioned not being skilled enough to continue down the Paint or Gimp path, as I had been hoping for.
Now guesses were thrown about, which is usually an indication of giving up. Yet another ‘brain’ mention by @Xion4012 … hehehe. Luckily @johnnycloud came somewhat to the rescue, by posting some properly captured scaled images. Was he on to something??? I was then proven correct about @Oshoryu trying a bit too hard, sorry, appreciate the effort though 
Time for another clue, although I had by this time run out of Dr. Seuss clues. So I decided to improvise a bit, keeping in rhyme. I think the clue may have been a bit too obvious, but I was fine with that. Puzzles are fun, but you’d want to keep participants interested, not lose them. After a while everyone just wants to see the result.
So yay, @Xion4012 figured it out and got the solution. It can indeed be time consuming, to go through an image, even if small, pixel by pixel, noting down the color value, to then combine and translate to ascii.
5 Likes
Solution
The solution to this puzzle is in my opinion simple. Figuring out the solution is however something else and likely more advanced.
Here is how to solve the puzzle in easy steps:
- Download or save the image.
Depends a bit on the browser used I think. - Take a close look at the image in a painting program.
Zoom in, should make the pixels bigger, without blurring.
There may be tools out there to show pixel colour information. Zoom is not always an option though. - Go through the image, pixel by pixel, starting at the top left, ending at the bottom right.
- Make a note of each pixel’s colour value, either in HEX, or in Decimal.
HEX is likely easier, as it is always 2 digits per colour channel, making it a total of 6 for each pixel. - Combine all values.
Most HEX to Ascii tools will easily convert the full string of values in one go.
Sometimes you need to properly separate all values, with a comma, space or similar. Especially when using decimal RGB values. - Result is the actual Ascii string.
Small image solution
I like nonsense,
it wakes up the brain cells!
- Theodor Seuss Geisel -
Larger image solution
.;''-.
.' | `._
/` ; `'.
.' \ \
,'\| `| |
| -'_ \ `'.__,J
;' `. `'.__.'
| `"-.___ ,'
'-, /
|.-`-.______-|
} __.--'L
; _,- _.-"`\ ___
`7-;" ' _,,--._ ,-'`__ `.
|/ ,'- .7'.-"--.7 | _.-'
; ,' .' .' .-. \/ .'
; / / .'.- ` |__ .'
\ | .' / | \_)- `'/ _.-'``
_,.--../ .' \_) '`_ \'`
'`f-'``'.`\;;' ''` '-` |
\`.__. ;;;, ) /
`-._,|;;;,, /\ ,'
/ /<_;;;;' `-._ _,-'
| '- /;;;;;, `t'` \. I like nonsense,
`'-'`_.|,';;;, '._/| it wakes up the brain cells!
,_.-' \ |;;;;; `-._/
/ `;\ |;;;, `" - Theodor Seuss Geisel -
.' `'`\;;, /
' ;;;'|
.--. ;.:`\ _.--,
| `'./;' _ '_.' |
\_ `"7f `) /
|` _.-'`t-'`"-.,__.'
`'-'`/;; | | \
;;; ,' | `
/ '
Bonus
While you all were busy solving the puzzle, I figured it would be cool to be able to decode the other way around. Considering I had already created some code to make creating this puzzle a bit easier, I thought to give it a try. So I continued working on the code a bit more to figure out a way to paste or upload an image and get the text out of it. What initially started out as a quick and dirty way to get the image, now had to be cleaned up and work in the opposite direction.
This took me a bit of time, as I did not have the code on a server. Uploading an image would usually be easy if that were the case. However, now I was restricted to finding a way that keeps an upload client side, in memory. Luckily enough there are ways to get access to the image data in memory. Often though, while depending on security restrictions, you may not end up getting the exact same detailed data required. The resulting image would look similar, but pixel data may be off a bit. So I used a method which can write image data from an upload to a hidden canvas, without drawing it to the screen. Sure I could draw to the screen as base64 image data, but this could lead to differences. So using the canvas draw method in the background, gave me access to the actual image data. Which I then basically used in the same way I create an image with. All I had to then do, was to inverse the process, turn it into an array of ascii characters, then writing it as a value to the ‘Input’ field. This would then show the exact ‘text’ used to create the image. Because I passed the value to the ‘Input’, using already existing code there, I right away had the ‘HEX Output’ again as well, and actually the exact same source image at the same time.
I basically cleaned up the code and made it a fully functional tool in a couple of hours time. Good enough to be a nice little bonus, saving you all a lot of time doing this manually. @Xion4012 was obviously very happy with it. Maybe I should actually upload it to my own website or elsewhere, but it works and has the full source for anyone to use.
Go check it out on Text to hex/image - Image to text/hex - JSFiddle - Code Playground and do with it as you like. Feel free to ask any questions about using the tool.
I hope you all enjoyed …
Dr. Theodor Seuss Geisel, signing off.
Yours truly, 
5 Likes
Great job! I really thought once I posted the link to the article about RGB colors having Hex values, someone would figure it out fairly quickly. I never realized there was a web color called Dr. Seuss. Just like the ARG, I may not always solve the puzzle but, I learn interesting things along the way.
Great puzzle!
2 Likes