Hi @NateWr, thanks for taking a look. I removed my workaround for now because it didn’t work with externally linked images like the Creative Commons badge. I think ideally, what I’d love is a simple configuration option that altered the resource URLs, and perhaps a second configuration option that allowed you to select formats you’d like to alter. I’m not sure if URL writing is called from some central function or if it’s duplicated where needed.
An alternative would be to allow any local resources to be referred to with relative links rather than the full address.
Either way would allow simple CDNs to be enabled like imgix. Imgix works similarly to other image CDNs I’ve seen. Basically you host the image on your server, and register a subdomain with them that points to your domain. Then any image you want to pull from the CDN, you just set the domain to the imgix subdomain instead, with the exact same path after. If the src path is relative, then you can actually run imgix.js which will add all the relative data attributes to your images client-side.
A method most CDNs employ is transformations. Basically, by passing URL parameters like w=500 it will dynamically resize the image. You can do some really cool things with imgix in particular. For example, in my archives page you can see dynamically generated covers for the issues that don’t have one set. Past Issues | The Journal of Bahá’í Studies
This is done with an {if} statement in PHP that feeds the issue data into a URL which is then requested from imgix. They are unique in that they don’t charge for transformations - just for the total number of active source images you have. I think it’s $3/1000/month.
A second method that most image CDNs seem to rely on is HTML5 <image> tags and the srcset attribute. Either one will allow for a set of different images (which are dynamically generated just by the URL parameters) and then the browser selects which one is best, only loading the right size for the resolution, supported formats, etc.
For example, this is what imgix.js produces when provided with a relative URL:
<img
class="img-fluid homepage-issue-cover"
ix-path="public/journals/1/cover_issue_1_en_US.png"
ix-params='{ "auto":"format", "min-w":"300" }'
sizes="210px x 307px"
srcset="
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=100 100w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=116 116w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=134 134w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=156 156w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=182 182w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=210 210w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=244 244w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=282 282w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=328 328w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=380 380w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=442 442w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=512 512w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=594 594w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=688 688w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=798 798w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=926 926w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=1074 1074w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=1246 1246w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=1446 1446w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=1678 1678w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=1946 1946w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=2258 2258w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=2618 2618w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=3038 3038w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=3524 3524w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=4088 4088w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=4742 4742w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=5500 5500w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=6380 6380w,
https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2&w=7400 7400w
"
src="https://abs.imgix.net/public/journals/1/cover_issue_1_en_US.png?auto=format&min-w=300&ixlib=imgixjs-3.4.2"
ix-initialized="ix-initialized"
/>
I think if one CDN were to be chosen for simplicity to implement with a plugin, imgix would be up there IMO. I did a lot of research in the different options, and it seems like It’s one of the best fits for OJS.