Have you ever needed to embed art on AO3? Embedding images on AO3 (aka The Archive of Our Own) can be a little tricky depending on where you’re hosting your art. I’ve compiled tips on the most popular services for AO3 embedded art below!
Is there an image hosting site that you prefer when using embedded images on AO3 or embedded art on AO3? If you’d like to see a guide for whatever service that may be, please let me know – I’d be happy to write a tutorial for it!
Jump to: Dropbox • Flickr • Privatter
Dropbox
To embed images and art on AO3 from Dropbox, follow these steps:
- Navigate to your Dropbox home. Make sure your art is Public and Shareable.
- Click “Share,” then click “Copy link.”
- Go to your work on AO3. Make sure you are in the Rich Text Editor, and then paste the text.
- Replace “www.dropbox.com” with “dl.dropboxusercontent.com.”
“https://www.dropbox.com/s/img.png”
would become
“https://dl.dropboxusercontent.com/s/img.png.” - Ensure you have “img src” tags around that link. Include alt text to describe your image, and (optionally) height/width fields! If you don’t know how to use the height and width fields, check out this tutorial.
- Close off your tags and preview your work! I find it best to save as a draft first, then view it on mobile and desktop to ensure my images are showing up properly.
Flickr
To embed images and art on AO3 from Flickr, follow these steps:
- Navigate to your art on flickr. Make sure it is Public and the Safety level is Safe.
- Click the Share arrow on the bottom of the media, then click Embed.
- Copy everything in this field.
- Go to your work on AO3. Make sure you are in the Rich Text Editor, and then paste the text.
- Replace the given title and alt text fields with the title of your media and something that describes your media, respectively.
- Optional: Replace the size of your image with the size you want it to be. (You can also just delete these fields entirely, as AO3 will handle it for you.)
- Close off your tags and preview your work! I find it best to save as a draft first, then view it on mobile and desktop to ensure my images are showing up properly.
Privatter
To embed images and art on AO3 from Privatter, follow these steps:
- Upload your art to Privatter as usual.
🔴 Note that when you embed a Privatter image to another site like AO3, your password protection / follower protection / etc. isn’t respected. Anyone will be able to see this image wherever you embed it. - Next, view your image on Privatter. Right-click on your image and select “Copy Link Address.” (Or “Copy Image Location” in Firefox.) Do not use the “Copy URL” button on the right side of the page, or the URL from the address bar.
- Navigate to your work on AO3. Make sure you are in the Rich Text editor, then paste the text.
- Ensure you have “img src” tags around the link. Include alt text to describe your image, and (optionally) height/width fields! If you don’t know how to use the height and width fields, check out this tutorial.
- Close off your tags and preview your work! I find it best to save as a draft first, then view it on mobile and desktop to ensure my images are showing up properly.