# Recursive Images on Bitcoin

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:

```css
<img src="/content/INSCRIPTION_ID">
```

My first experiment: [metablocks](https://www.ord.io/16167023) (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](https://www.gimp.org/) to slice the artwork (free image editing software).

<figure><img src="/files/lSLd3roM1v9ysQ3YDIUs" alt=""><figcaption></figcaption></figure>

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](https://mempool.space/) 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](https://instacalc.com/56229) 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](https://gamma.io/?is_create_open=true\&path=inscription) - 214,704 ($65.52)\
[UniSat](https://unisat.io/inscribe) - 254,000 sats ($77.60)\
[OrdinalsWallet](https://ordinalswallet.com/inscribe) - 299,183 sats ($91.42)\
[OrdinalsBot](https://ordinalsbot.com/) - 325,952 sats ($99.63)\
[Looksordinal](https://looksordinal.com/) - 368,068 sats ($112.33)\
[Satscribe.xyz](https://satscribe.xyz/inscribe) - 837,044 sats ($253.66)\
\
Once inscribed make sure to grab the inscription IDs from the ordinals for the next step...

<figure><img src="/files/dmp7ThEfTKw3pa4DOcy4" alt=""><figcaption></figcaption></figure>

## 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](https://code.visualstudio.com/) (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!

<figure><img src="/files/ho9Iw4OwEY2pXiLnKQwQ" alt=""><figcaption><p>6.25% ZOOM</p></figcaption></figure>

<figure><img src="/files/bXhNp0rlDYrTrO9Vs1H5" alt=""><figcaption><p>100% ZOOM</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://billyrestey.gitbook.io/recursive-images-on-bitcoin/recursive-images-on-bitcoin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
