I don't know the width of your image but my suggestion is to use at least 1000px wide .... for best output between 1000px-1400px . Smaller images become blurry .
This distortion of the image is more accentuated on larger screens.
Pro's and Con's
- con/ an image-based bio (one single image) with around 1400px width will slow down the page loading.
- pro/ from visual point of view, image based bios are more flexible, more appealing (when done right) and offers more editing varieties ... creativity is limitless
What I'd suggest you to do is to open your design in your favorite image editor (if it is designed in Photoshop, even better), enlarge the image, add a sharp filter only if necessary and slice it on smaller sections...
So if the size of your image (after resizing it) is around 1400x4000px w/h you could slice it 5 times and you'll end up with 5 images (1400x800px w/h) much faster to render in browser.
And on CB just add them into a single wrapper like so:
<p style="display: block;width: 100%;height: auto;margin: 120px auto 50px -146px; box-sizing: border-box;"><img src="YOUR IMAGE URL HERE 1" style="display: block; width: 100%; height: auto; margin: 0 auto;"><img src="YOUR IMAGE URL HERE 2" style="display: block; width: 100%; height: auto; margin: 0 auto;"><img src="YOUR IMAGE URL HERE 3" style="display: block; width: 100%; height: auto; margin: 0 auto;"><img src="YOUR IMAGE URL HERE 4" style="display: block; width: 100%; height: auto; margin: 0 auto;"><img src="YOUR IMAGE URL HERE 5" style="display: block; width: 100%; height: auto; margin: 0 auto;"></p>
No spaces between images so the final output to show as an single image.
I know it sounds like a lot of work, but if you want to do a good job with awesome output, a bio design which really works for you and empowers your brand... that's the way to do it.
Good luck.
