RATIO / RENDER
Dynamic Aspect-Driven Image Rendering for High-Octane Web Developers
Create images based on aspect ratios, not fixed dimensions.
Optimize load times with bite-sized SVGs bite-sized of the size of a conventional image.
Scale globally, reaching clients everywhere.
Build faster websites, faster!
<img src="https://api.ratiorender.com/5/2?fill=A7FFF6">How to Use Ratio Render
Specify the aspect ratio using path parameters via https://api.ratiorender.com/[WIDTH]/[HEIGHT].
Use this as the src attribute for the <img> tags on your site.
In order for the image to scale properly, you'll need to set the image width to 100% via style="width:100%"
or some other css magic.
This renders a 1:1 image
<img src="https://api.ratiorender.com/1/1">This renders a 4:3 image
<img src="https://api.ratiorender.com/4/3">This renders a 16:9 image
<img src="https://api.ratiorender.com/16/9">Change the Color
By default, Ratio Render will return a gray image - BORING!
You can set your own color using the fill query parameter. The fill parameter accepts any CSS compliant hex color code.
Let's render a rainbow! 🏳️🌈
<img src="https://api.ratiorender.com/1/1?fill=4F34CA"><img src="https://api.ratiorender.com/1/1?fill=C038CF"><img src="https://api.ratiorender.com/1/1?fill=FB536A"><img src="https://api.ratiorender.com/1/1?fill=FAEA08"><img src="https://api.ratiorender.com/1/1?fill=A0EA48"><img src="https://api.ratiorender.com/1/1?fill=19CC59">