When I was working in email marketing, it was all Chief and VP of Training Email Lists about the hero image—the main image on the creative that would (hopefully) get the most clicks. A great sale could fall flat because the image and copy did not explain the discount or sale selection. The hero image is usually your first “real” impression; someone was compelled enough to open the email or webpage to see what you have to offer. It’s a blind date—appearances are everything!
This may not need to be said, but make sure it looks sharp! Computer and phone screens are so big and crisp now, your customer will absolutely be able to tell if you have a fuzzy, low-resolution hero image. To avoid the fuzz? Feel free to resize your images DOWN but never UP.
In terms of actual pixel width and height, the size of your image depends on exactly what you are looking to portray. If you want your hero to take up the entire width of the page, ensure that your image is 100% of the container tag through VW or VH (more code knowledge here).
Customize your stock images (more on this below)! As a general rule of thumb, make sure the background isn’t too loud where you are placing text and look for a color contrast.
Example of Canva
Note the blur where I placed the white text on the image. Contrast is good!
Something to keep in mind with large, high-quality images: loading times. Google research revealed that a loading time increase from 0.4 to 0.9 seconds can reduce traffic by 20%. Some general best practices:
Resize the image yourself (as opposed to having the browser resize it)
Compress the image in Photoshop, an online compressing tool or even in Paint
Experiment with different image file types (PNG vs. JPG) to optimize quality without sacrificing load times
Leverage page caching as much as possible
If you are concerned about your page’s speed, GTmetrix is a good place to start!