What size should a cover image of my dev.to post be? When I hover over the add cover image button, I am advised to use 1000:42 ratio image for best results. As illustrated in the image:
When I resize my image to be 1000px width and 42px height, I get undesired results. When I don't resize, the main areas of my image shift out of focal view.
Am I converting the ratios incorrectly?
If yes, then what is the right way?
Top comments (10)
I find when uploading a 1000:420 image you really have to be careful where your content within the cover image goes. As if you follow the 100:42 ratio and place your content at the edges. If you then post a link to your content on social media for visibility and promotion, your image will get cropped to 800x418 and you will lose majority of your image content.
So make sure to make the image 1000:420 but the content you want displayable on social media within a 800x418 box. I've done this and it works, however the crop doesn't seem to be central sometimes (on twitter for example).
Thanks for that info. However for the link previews in social media, I believe they all don't the same dimensions, i.e 800x418...or is it so?
But we can't control that. As twitter cards generate the twitter card image from the cover image on Dev.To which is 1000:420 e.g.
I've found what works is setting your cover image to 1200:628. This works with both DevTo image & twitter cards.
As Julien mentions, it should be 100:42. Preferably a larger image I guess, so better to make it 1000x420 :)
You have a bunch of other tips here for what you can do on DEV. It's an article I wrote a while ago that people seemed to like :)
Tooltip says 100:42, not 1000:42.
oops, how could I not see that all these time. Any Idea what these dimensions translate into?
Itâs a ratio so divide whatever the width you choose by 2.38 (100/42) and thatâs the height you must use.
Width of 1280 gives you a height of 539 for example.
Okay thank you
You know what's weird? If I inspect the page, the rendered image is actually an arbitrary 806px x 339px, and the source image is 1000px x 420px
I tried to upload exactly 806x339, but it seems dev.to resizes and crops the image to 1000 x 420, but it renders it at 806x339 because of the dimensions of the parent div.
This behavior is weird. But I guess image hosting service is being used e.g cloudinary, that is converting image sizes on the fly