mooserrific:

mooserrific:

PSA

Hey friends! It’s reverse big bang posting season, which means a lot of people are posting art with the fics they put on AO3. It’s pretty swell! Beautiful art everywhere!

However, many people (like me!) primarily read fic on a mobile device, and art tends to break the screen. It’s much more difficult to see the art if I’m scrolling all over the place, and it makes reading harder when my screen suddenly wants to scroll sideways all the time.

So, if you are posting inline art on AO3, please consider limiting its width! It’s very easy: just add width=“90%” to your image HTML code. Thus:

<img src=“URL” alt=“DESCRIPTION” width=“90%”>

Et voilà! The art will scale down to fit whatever screen it’s being viewed on.

Thanks in advance,

Your friendly neighborhood phone user

Notes:

– the “alt” attribute is technically required. It provides the text that displays if the image doesn’t work, and also (I think) is the first place a screen reader looks for an image description. Please be kind to readers with limited data or vision difficulties and use alt!

– I haven’t played with the number, but probably 100% would also work, or 98 or 95. 90 just gives you a nice cushion. Feel free to experiment!

– You can always include a link to the full hi-res version so people can see fine detail!

– further info on how to use the img code here

– further info on how to make links here

– Tumblr formatted the double quotation marks as smart quotes (ie, open/close quotes). SMART QUOTES BREAK CODE. If your code isn’t working after copying from here that’s probably why.

As @notlucy points out here, you can do this with CSS as well! CSS is great, more flexible, and generally preferred to HTML for granular adjustments, and if you have multiple images it is way easier to just set all images to max width 100% than to have to remember to do it in every image tag. AO3 has a tutorial on custom style sheets for works that also has links to more resources.