Embedding images on AO3: A Guide V2
Hi,
So, I thought I would go back and make an updated version of the A03 embedding image guide I made back in September of 2022.
This choice was mainly due to one of the options being viable.
Discord.
Due to the rise in malware distribution, Discord has set expirations on Discord links. This only applies to links that are used outside of Discord.
This short video explains this well
So, If we wanted to use the option, we would need to update the link every 24 hrs in your work.
Not great.
I know I also feel the salt.
Well, with that out the way, let's dive in.
A03 doesn’t actually allow for image hosting itself, so that’s why third-party hosting is needed.
In this guide, we will use these as possible choices to host our images
Google Drive
https://postimages.org/
Tumblr
Other contenders:
IMGBB https://imgbb.com/
imgbox https://imgbox.com/
IMGBAM https://www.imagebam.com/
Image venue https://www.imagevenue.com/
Paste board https://pasteboard.co/
(Most if not all if these options listed require signup)
But really there are many options to choose from. If you have any recommendations, comment, and I’ll add them in.
Before we upload, you may need to compress your image(s) to shave them down to size, as some of these options upload size caps.
I recommend https://compressjpeg.com/ for this task. Or you may choose whatever your preference is.
Hosting options:
Option 1: Google Drive
In Google Drive, create a new folder with the image(s) or subfolders for further organization.
Right-click and select New Folder, and name this folder whatever you want.
Now upload your image(s)
Right-click on your image and hit share.
Hit Copy link
The link you have should look something like this
https://drive.google.com/file/d/1Nt17i9jx8LYffyQQew6D2x4HYxXFM0_B/view?usp=sharing
But as is it won't work! We need to modify it first!
Remove the
/view?usp=sharing
at the end of the link to work with AO3
Now, you have a working link from Google Drive that is ready to use.
Your modified link should look like…
https://drive.google.com/file/d/1Nt17i9jx8LYffyQQew6D2x4HYxXFM0_B
This Google Drive portion was from this guide here: https://archiveofourown.org/works/28132845
Option 2 Tumblr:
Tumblr is not always the best platform to use, as blogs can get deleted or URLs can change. But I’ll include it here anyway.
On mobile
Long tap the image you wish to use in a post.
You will be presented with this menu.
Tap share photo.
Then, you will be presented with another menu.
On the desktop, it will basically be the same.
Right-click on the image and hit copy image address.
Now, you have a working link from Tumblr that is ready to use.
Option 3: Imgur
First sign up for an account. I would recommend this because last year, Imgur began deleting images not tied to a user account. This means that if you upload an image without an account, the image link may eventually expire and the image will be deleted.
Create a new post
Upload your desired photo(s).
Do not hit the Grab Link button
It will not work with AO3
Instead, right, click on the image and hit copy image link or address, depending on your browser.
Now your Imgur Link is ready to use.
Option 4: Using an image hosting service like postimages.org
You can create an account for free with this one. This is pretty straightforward, so I’ll gloss it over.
Once logged in you will be presented with this page.
Upload your image, and you will be taken to this page.
Copy Direct link
Now, you have a working link from postimages ready to use.
Step 2: Inserting and fitting the image
Head over to Ao3.
Go to the new or existing chapter in which you wish to embed image(s).
HTML OPTION:
Make sure in the HTML editor view.
This is located next to the rich text button in the Worktext section, as shown.
Now, find the place in the text where the image should go...
Now, preview your work to confirm the link is correct.
As you can see the image worked but in my case the image was waaaayyy too big.
So, we can add the width and height attributes to scale the image to a more comfortable size.
First, we need to know the exact dimensions of the image.
This can be done by looking at the size in an image app or can be done with an online tool.
Find image Size (MB. KB) and Dimension (Height, Weight) from the image URL. Copy image address and paste into the input field and get dimens
Record these values
In this example, the image is 1080x2400
Now divide each by the same factor; this is important to avoid compressing or stretching the image.
In this example, We quartered/ divided them by 4.
Record these values
Width = 1080/4 = 270px
Hieght = 2400/4 = 600px
And update the img tag
src is the path to the URL.
<p>
<img src="" alt="" width="" height=""/>
</p>
alt is the alternative text for the image. This is used for accessibility as well as be a modern web standard.
width is the image width in pixels
height is the image height in pixels
You insert your values in between the double quotes.
ALWAYS TO REMEMBER:
to close your quote _
to close your image tag
to close and include your units
Here it is much better.
RICH TEXT OPTION:
Make sure in the Rich Text editor view.
Set the cursor where you want the image. Click the image icon.
Set the values in this form.
Use the URL we generated in one of the previous 4 options.
Set the Image description
The width and height may be input automatically; if you are unsure, consult the HTML OPTION to find the dimensions and how to rescale an image.
Here’s how it looks after posting
Well, that concludes my simple guide to AO3 image embedding. Thanks for reading to the end.
