Work Text:
Hey all so I'm part of a bang and wanted to see if I could upload gifs- which made me realize I needed an image hosting website to upload gifs (or pics). Unlike the first time I uploaded a pic onto a Fic, I didn't want to simply upload my pictures to tumblr and then use that image address to embed my images- for a couple reasons, mostly because what if Tumblr takes it down with it's weird new policies, or the link breaks/changes (which can happen with tumblr apparently), and mostly, because I didn't want to have the pictures up anywhere else other than the Fic, at least not in the beginning. Maybe later down the road, to be like- hey, check out this awesome Fic! (because it is awesome- I read all 30k the author gave me yesterday lol)
So! That led me to look up how one does this- and I found there aren't really any tutorials... or at least, there are some but are missing several steps, or parts that I specifically want. And I'm sure others want to know this as well, so I figured I would write down all my findings and share it with the rest of this great site.
So, as I said, I decided to use Dropbox, which is free to sign up for (though they have some paid versions? you don't need those though) and you do need to download it, I believe, though you can just upload your files straight to the website. Not sure if you have to actually download to use the website part...
(found the suggestion for Dropbox and some notes on other sites you can host images on here: https://voltrongenminibang.tumblr.com/post/162790326041/posting-images-to-ao3 )
From there, you just need the link- something else I had a bit of trouble finding. As of now, July 16, 2019, the way you can do it is by clicking 'Share' on the file and going to 'invite via email'. A box will pop up with a regular email thing, but then at the bottom there will be an option to 'share a link instead'. This is what we want!
So then 'create a link' and copy what comes up. But! And this is important! We are going to change the end so that the image actually shows up! I don't know why it's like this, but it won't work as the link they give you. Go ahead, try. I did. It didn't work. lol
So! The link should look something like this: https://www.dropbox.com/s/6gd5vy271ui40nr/Screen%20Shot%202019-07-16%20at%209.40.15%20AM.png?dl=0
notice at the end we have a "?dl=0" well, really simple, we just need to change that to a "?raw=1" and then it will work. Amazing.
I got that little tip from this site: https://cantonbecker.com/etcetera/2014/how-to-directly-link-or-embed-dropbox-images/
So, that's how you upload pictures- next is about what dimensions are the best, because I know a lot of people use phones to read on Ao3. I personally use a computer and was originally planning to have landscape oriented pictures like my screen shot below so it would fit in with the text that stretched across the computer.
This is a screen shot. It is not a gif, it shouldn't move. I'm just using it because it because I needed a more horizontal based image (which I thought should work better for computers... spoiler alert, at the end I found out it doesn't really matter xD)
However, if you're using a phone right now, you're probably like 'wow this is annoying' and having to move your finger over to even see the screenshot (which is just a test plz don't judge me I was having a weird day when I made that xD). Which... I do not want for my bang Fic, it deserves the best.
So, I decided to experiment. Phone users will notice that the gif I embedded first is pretty much a perfect fit for the screen- it doesn't need to be dragged over, it isn't stretched out.
(Note when placing gifs on Ao3- make sure the link already has the ?raw=1 in it so that Ao3 can automatically figure out it's dimensions.)
However, the gif on a computer... not as pretty. It's on the side, just hanging out, which is not my aesthetic. So, I figured we could center it- so at least it has some sort of 'i am supposed to be here' feel on computers.
of course, I first tried Ao3's version of 'centering'.....
it works for text...
and as I just found out, works for images/gifs when you just already centered it. lol
What that means is that you need to have the curser already centered and then 'drop in' the picture, not put in the picture, select it, and then center it, as I tried earlier. It becomes like so
(for phone users, the image is now not centered lol)
Aaaand I just found out it can go far right or far left, but it even when 'center' is selected, it is still aligned with it's first placement. So, placement first, then drop in the image. We are both learning here. Some of you already knew this. Congrats.
Now, since we have how to upload, using vertical pictures for easier phone viewing, and then centering those vertical pictures/gifs for computer aesthetic, let's talk about dimensions!
Honestly, I'm still not sure about what 'the best' dimensions are yet. I tried looking them up or tried to find some solid ratios to work off of, but most people were like 'do whatever lol'. So. Maybe I didn't look hard enough? probably.
In any case, the gif is 360x480... pixels, I believe. I forgot the DPI, though I'm not sure how much that factors into the final product of a gif. The picture/screen shot is 880x492. I'm hoping to experiment a bit more and find 'the best' ratio---- oh wait, I just looked this up before I really had to get into the math and apparently someone already solved this issue?? Where you can resize anything to fit any screen. Well shit. At least the uploading part of this thing is still good lol
-original tutorial is here: https://archiveofourown.info/works/17512232/chapters/44695084
Let's try it out....
So the main thing here is that we just need to upload the image as normal, but then go into the HTML and replace the standard "width="##" height="##" to just be width="100%"
so for all those non-coders out there (like me!) sounds super simple, just get rid of height and put 100% for width. Let's try it out on the gif and the screen shot
Alright, so I uploaded those and... it worked! wonderful. The only problem now is that the gif is stretched out on the computer, which is expected given how much larger it needs to be on the computer. It looks perfect on the phone. In this case, that means it's better to start larger (like the photo- which barely had any problems shrinking on the phone screen) to avoid image distortion/pixelization.
I'm going to keep experimenting on this so I can figure out the best ratio/dimensions so that the image looks crisp and clear on both computers and phones. I'm thinking it will be a horizontal and large image, I'll probably try using an aspect ratio of 4:3, which is what most computers are. For widescreen displays those can be 16:9.... and perhaps I should be working on the size that would be distorted the most when the Fic is opened on it? So I'll probably just an image at 4:3 and an image at 16:9 to see how they work on laptops and phones... I'm not sure if I have any wide screens available to me but I'll figure it out
check out later to see what I figure out, or let me know if you have any tips you want to add.
for those curious- the gif is something I made with the intention of uploading it on giphy so I could use it on twitter as a 'hit retweet and like' image. Many ppl create these sorts of things and we only have one of PochaYuuri so I figured I would try Eros Yuuri so we could have more YOI fandom representation.... Uhhhh this was my first animation so...... I don't know why I thought it would be a good idea to make it as smooth as possible. There are about 12 images just to make him sit down, and to keep it simple and smooth I just reused those images going backwards to create the 'up and down' effect... and now it just looks dirty. ....whoops. Good learning exercise hahahha
So, here it is, being used as my example here because it's the only gif I've ever made. Well... If ppl want a tutorial on how to make gifs, I'll try to do that as well.
---
Alright Fam, I am back after finishing a picture for the 16:9 aspect ratio and 4:3 ratio. Dimensions can be changed depending on what you're doing, or not doing, but the ones I used easily enough for simple pngs/jpeg still pictures were 1920x1080 pixels at 300 DPI for the 16:9 ratio, and then 1440x1080 pixels at 300 DPI for the 4:3 ratio. Let's test them out, shall we?
So, quickly, let's go over the process- download to dropbox (or whatever image hosting site you're using), copy link- if from dropbox don't forget to change dl=1 to raw=1, now we will take that link and simply 'insert image' in the rich text format, not the HTML, and because I'm going to be doing that cool thing where we get rid of width/height later, I won't even worry about centering it.
so, 16:9/1920x1080 pixels @300PDI (jpeg for those interested)- remember, this is the 'longest' size there is, typically found on wide screen displays (TVs or fancy computer monitors). It's easier for computers to shrink images but generally not as easy to make them larger- which is why this aspect ratio might be our best bet.
first off, wow this is a big boy. Also, yes, that is Victor in a Jojo Bizarre Adventure style. You're welcome.
And I know I said I was going to change the height/width of this- but I change my mind. This is already stretching the screen in my editing form so I want to see what it will look like uploaded, and then I'll do another where I do the fancy width="100%" code thing to show the difference- better way to see if there's any huge change in the overall quality because wow this is big.
alright, from the preview it seems like the original, at 1920x1080 with 300DPI is actually cut off because it's too big. I did flip Victor around like that purposely because I wanted to fill up the space, so no, that's not a computer error lol. Looks pretty good to, at least as far as I can tell on the computer. No jaggy or strange stretching- always a good sign. Still need to check it out on my phone so I'll update you guys once I do so.
Alright, I really like this nifty tip- thank you Ao3 user Informative_Dandy, you live up to your name. Certainly a must use when putting images/gifs in an Ao3 Fic.
Alright! Onto the 4:3 picture, which was at 1440x1080 at 300DPI, which is at a more general aspect ratio found in most laptops/computers. Phones? idk. didn't research that hard, just looked at the first result on google. I would think with this size it would be easier to not get lost in the details, especially when it's downsized to fit a phone screen, but then there's also the possible side effect that it might stretch/distort the image (get all jaggy like that poor Yuuri gif up there) on wider screens, which some ppl do have. Of course, we don't know for sure, which is why we are doing this experiment in the first place.
So this is the original, without the fancy width="100%" trick, and you can see that it still (at least in the editing thing) stretches the screen, probably a bit cut off as well. Which is expected after seeing what happened with the 16:9 image.
Okay, so let's do it again, but this time, after uploading in rich text, going into the HTML to change the width/height to width="100%"
Alright, just like we thought, at least in the preview, the original sizing is cut off, though the knew one looks pretty good- little too good, I'm seeing some mistakes. I'm not a perfectionist I just like everything to be PERFECT. Right. Anyways, so I will go 'officially upload' this and check it out on my phone. I'll be back with results in a moment!
*Safiya Nagaard voice* Alright, so I just looked at my phone and realized I probably should have not been fancy and just put a single color background so we could figure out the edges better, but....... oh well. I'm pretty sure both of them are perfectly lined up with the text (as it should be with the 100% width). I zoomed in on both and the quality is still great! So, phone quality? Good on both sizes! Also, wow, the 16:9 is a real big boy. I did not realize I could just slide over and see the whole thing in the Fic. Ew.
Plz don't leave a picture as is, do the width="100%" trick. No one needs to have to slide over and then forget where god lives because the picture was so big and they can't find the Fic is in the sea of white. It happened to me on the phone while checking out the original 16:9 image. Also, wow, that is a big image lol.
I don't have a wide screen so someone else will have to check that out for me... maybe my friend has it? She does art too so she'll know what to look for. If any else out there is on a wide screen, let us know how these look! Especially the ones we changed the width to equal 100% because those are the ones I'm most worried about distorted image.
So! Overall for dimensions- I think you're probably fine with either of, 16:9 or 3:4, though to be on the safe side 16:9 is your best bet so the image doesn't get stretched on wide screens. 300 DPI is just standard in digital art, so you're going to be working with a bit of a big file, but not the largest. Unless you wanna go bigger, in which case, go big or go home am I right?? plz don't crash Ao3 tho my children are starving.
Let me know in the comments if you have any more tips to add, I think I covered everything I know at this point. I hope this was informative to you as it was to me, and I can't wait when the Fic I'm collaborating on hits the YOI markets (on Ao3 lol)! I actually did a character study with the Yuuri in the Fic on the 4:3 image, tho I still have a lot of work to do xD wooow congrats on making it this far go you!
Also also! The Fic I learned this for is now posting for the YOI Angst bang I'm in, so here's the Gif Cover I made for it. It's an Omegaverse thriller, with romance, of course, and I highly recommend checking it out! I actually cried (happy ending though!) Revampried is an awesome writer and I'm so happy I got paired with her! :D
Here's the link to it: https://archiveofourown.info/works/20921918/chapters/49737206 and if that doesn't work for whatever reason, it's called 'Body of Evidence' by Revampired (not misspelled) updates every Sunday! :D
