For full width images
We recommend "full width" images to be 1600-2400px wide (at 72 dpi). The height depends on you and your layout!
If you're using the banner to design for mobile, we recommend your mobile image be ~640-800px wide (at 72dpi). You can go smaller — 320px minimum — but the slightly larger size shrinks down and looks sharper (another little "protip!")
For multi-column images
For smaller images which are contained within a multi-column section, we generally recommend making the image 1.5-2x as wide as the "average" dimension it will be seen at.
For example: say you have a two-column layout and you want to put the right size image in a banner in one of the columns. You can use ~1600px as your "average" full-width size (probably lower, but it's okay to round up) — so half of that would be ~800px, which sounds about right!
Sometimes it takes a little trial and error to find the right size. As always, we recommend testing your work across multiple devices and tweaking until you're happy!
Don't forget to optimize!
Keep your eye out and don't use massive images! Image dimensions and files can get huge if you're not careful! And heavy images = slow sites = bad SEO = ☹️
Our themes will automatically resize images for mobile, but we always recommend you compress ("tinify") your images so they're as lightweight as possible.
Here's a great/easy/free tool we use all the time for exactly this: tinypng.com
