🧙‍♂️Recursive Images on Bitcoin

Piece together a large on-chain image with recursion by billyrestey

Recursion is simply the process of referencing other inscriptions within an inscription (inception, innit) This is achieved with the "/content/" tag which looks like this:

<img src="/content/INSCRIPTION_ID">

My first experiment: metablocks (400 inscriptions) file size: 6.19mb dimensions: 16,000 x 16,000 pixels: 256,000,000

Process

I. Divide your artwork

I used Photoshop's slice tool to right-click and select "Divide Slice".
For this example, we divided a 4096 x 4096 image into 4 pieces (2 x 2 grid).
You can also use GIMP to slice the artwork (free image editing software).

Click File>Export>Save for Web (Legacy) and "Save.." your images as JPEGs (it will batch export them). We suggest using around 70 quality, unless you plan to convert to WEBP, then use 100 before compressing further. View the exported pieces at 100% resolution and make sure you are happy with the balance between quality and file size. WEBP files are 30% smaller than JPEGs and can look great!

II. Inscribe the pieces

When it comes to inscribing data, the cost is constantly in flux between the fee rate on Bitcoin, the price of bitcoin (BTC) and your file sizes—which is why we recommend the lowest file size while maintaining the highest quality possible. Use an inscription calculator to figure out your hard costs, then go back and re-optimize if necessary. My 4 pieces are roughly 150kb / each (600kb total)—resulting in $187.50 at a fee rate of 5 sats/vB. Not bad! Here are some more scenarios at various file sizes and fee rates: 500kb x 25 sats/vB = $781 1000kb (1mb) x 5 sats/vB = $312 1000kb (1mb) x 25 sats/vB = $1563 4000kb (4mb) x 10 sats/vB = $2500 When it comes to choosing an inscription service, there are many options (the best being inscribing yourself from your own node for free). These services can charge anywhere from 15,000 sats ($4.50) flat to a percentage of the total cost. Using a 150kb image below are some examples at a 7sats/vB fee rate:

Gamma - 214,704 ($65.52) UniSat - 254,000 sats ($77.60) OrdinalsWallet - 299,183 sats ($91.42) OrdinalsBot - 325,952 sats ($99.63) Looksordinal - 368,068 sats ($112.33) Satscribe.xyz - 837,044 sats ($253.66) Once inscribed make sure to grab the inscription IDs from the ordinals for the next step...

III. Create the HTML

You don't have to be a coder, I promise. On Windows or Mac you can use Notepad or TextEdit to create the file and paste in the code below. When you go to save the text file, make sure you save it as "YOURFILE.html".

For more advanced users—you can use Visual Studio Code (free). This allows you to create a local test environment with robust tools to dial things in before inscribing—if you had 6 images and wanted to play with how it displays in the browser window.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="YOUR DESCRIPTION HERE">
  <title>YOUR TITLE HERE</title>

  <style>
    html,
    body {
    margin: 0;
    padding: 0;
    width: 100%;
  }

  #container {
    position: relative;
    width: 100%;
    padding-top: 100%;
    image-rendering: crisp-edges;
  }

  .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
    image-rendering: crisp-edges;
    box-sizing: border-box;
  }

  #image1 {
    top: 0%;
    left: 0%;
    width: 50%;
    height: 50%;
    background-image: url("/content/YOUR_INSCRIPTION_ID1_HERE");
  }
  
  #image2 {
    top: 0%;
    left: 50%;
    width: 50%;
    height: 50%;
    background-image: url("/content/YOUR_INSCRIPTION_ID2_HERE");
  }
  
  #image3 {
    top: 50%;
    left: 0%;
    width: 50%;
    height: 50%;
    background-image: url("/content/YOUR_INSCRIPTION_ID3_HERE");
  }
  
  #image4 {
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    background-image: url("/content/YOUR_INSCRIPTION_ID4_HERE");
  }
  
  </style>
</head>

<body>
  <div id="container">
    <div class='image' id='image1'></div>
    <div class='image' id='image2'></div>
    <div class='image' id='image3'></div>
    <div class='image' id='image4'></div>
  </div>
</body>

<!-- signed by artist -->

</html>

This is just a basic starting point. There are a ton of tweaks you can make to the code (CSS) to display your art however you want. Just keep in mind how digital artifacts are displayed on monitors and screens and plan accordingly. I chose to use percentages of the browsing window to stitch the images together—but you can use absolute values, such as:

#image1 {
    top: 0;
    left: 0;
    width: 2048px;
    height: 2048px;
    background-image: url("/content/YOUR_INSCRIPTION_ID1_HERE");
}

IV. Inscribe the HTML

Use whatever inscription tool you like to inscribe your "index.html" file (2kb). It should be extremely affordable—demonstrating the power of code and recursion on Bitcoin.

Enjoy!

Last updated 1 year ago

I. Divide your artwork

I used Photoshop's slice tool to right-click and select "Divide Slice".

For this example, we divided a 4096 x 4096 image into 4 pieces (2 x 2 grid).

You can also use GIMP to slice the artwork (free image editing software).

II. Inscribe the pieces

III. Create the HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="YOUR DESCRIPTION HERE">
  <title>YOUR TITLE HERE</title>

  <style>
    html,
    body {
    margin: 0;
    padding: 0;
    width: 100%;
  }

  #container {
    position: relative;
    width: 100%;
    padding-top: 100%;
    image-rendering: crisp-edges;
  }

  .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
    image-rendering: crisp-edges;
    box-sizing: border-box;
  }

  #image1 {
    top: 0%;
    left: 0%;
    width: 50%;
    height: 50%;
    background-image: url("/content/YOUR_INSCRIPTION_ID1_HERE");
  }
  
  #image2 {
    top: 0%;
    left: 50%;
    width: 50%;
    height: 50%;
    background-image: url("/content/YOUR_INSCRIPTION_ID2_HERE");
  }
  
  #image3 {
    top: 50%;
    left: 0%;
    width: 50%;
    height: 50%;
    background-image: url("/content/YOUR_INSCRIPTION_ID3_HERE");
  }
  
  #image4 {
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    background-image: url("/content/YOUR_INSCRIPTION_ID4_HERE");
  }
  
  </style>
</head>

<body>
  <div id="container">
    <div class='image' id='image1'></div>
    <div class='image' id='image2'></div>
    <div class='image' id='image3'></div>
    <div class='image' id='image4'></div>
  </div>
</body>

<!-- signed by artist -->

</html>

#image1 {
    top: 0;
    left: 0;
    width: 2048px;
    height: 2048px;
    background-image: url("/content/YOUR_INSCRIPTION_ID1_HERE");
}