← Back to context

Comment by erklik

4 years ago

and I'll add, It's not just fast, its incredibly beautiful and a joy to browse. Thankyou :) Its added to my list of inspiration for beautiful simple websites.

4 comments

erklik

Reply
jen729w  4 years ago

I needed to hear that, thank you. <3

  • spondyl  4 years ago

    I'd love to know if you have any tips on your images like were they preprocessed or scaled down? They're really well done and still high quality despite loading quick?

    • jen729w  4 years ago

      Blood sweat and tears? I tried really really hard to get them as small as possible while still being original-sharp.

      It’s a real PITA to be honest. I’m typing this from bed and can’t remember the exact details but chuck me an email and I’ll have a look over the weekend. (Or just scan the repo if you can be bothered, but I’m happy to try to remember what I did and put it in a mail.)

      https://github.com/johnnydecimal/johnnydecimal.com or hello <at> the domain.

    • jen729w  4 years ago

      Okay so the pain I had was taking retina screenshots and having them show up in retina resolution.

      The site is written in MDX and then `gatsby-plugin-mdx` does the heavy lifting. What I could not get to work was Markdown formatting for inline images, especially not for smaller images. They always ended up being shown at 2x.

      So now it's just an image, imported in to the file at the top, and displayed further down.

          import outlook_folder_structure_1232_expanded from "./Outlook__folder-structure-12-32-expanded-min.png"

      And then just a straight `<img src={outlook_folder... }` where it needs to appear.

      As for making them sharp and small, they're just screenshots from my Mac run through one of the many online PNG resizers. From memory that gave me a file with a 78% saving and if it wasn't near magic then I couldn't tell you how it did it because there was zero difference to my eye. I can't remember which one I used, just try a few.