Add more docs for using images (#4280)

.env.example-full

@@ -33,6 +33,9 @@ R2_SECRET_ACCESS_KEY=  # optional
 GRAPHER_CONFIG_R2_BUCKET= # optional - for local dev set it to "owid-grapher-configs-staging"
 GRAPHER_CONFIG_R2_BUCKET_PATH= # optional - for local dev set it to "devs/YOURNAME"
 
+CLOUDFLARE_IMAGES_ACCOUNT_ID= # Available in Cloudflare, on the main "images" page.
+CLOUDFLARE_IMAGES_API_KEY= # Generate your own with read and write permissions, can be the same as other Cloudflare API keys, e.g. R2_SECRET_ACCESS_KEY.
+CLOUDFLARE_IMAGES_URL= # Available in Cloudflare, on the main "images" page. Format must be "https://imagedelivery.net/<id>".
 
 OPENAI_API_KEY=
 

site/README.md

@@ -24,6 +24,10 @@ This content is only updated in an environment's database when someone presses "
 
 ## Images
 
+To use images locally, you need to set the `CLOUDFLARE_IMAGES_ACCOUNT_ID`,
+`CLOUDFLARE_IMAGES_API_KEY`, and `CLOUDFLARE_IMAGES_URL` in your `.env` file.
+See `.env.example-full` for the format.
+
 Image blocks can be added to gdocs via the follow archie syntax:
 
 ```
@@ -34,6 +38,11 @@ filename: my_image.png
 
 where `my_image.png` is an image that has been uploaded via the `/admin/images` view in the admin client, and thus exists in Cloudflare Images.
 
+> [!CAUTION]
+> Cloudflare Images don't have separate environments for production, staging and
+> dev, so be careful not to upload images that are only available in one
+> environment and even more **careful when deleting images**.
+
 We store information about the image's dimensions and alt text in the database, which is shared via React context to any component that needs to render them. See `Image.tsx` for the (many) implementation details.
 
 ## Data Catalog