What size would be good for Hero image in pixels length and weight for both laptop and desktop?

Desktop images are more rectangular and the mobile device square images, this needs to be considered. Say desktop is designed say at 1688px wide or at 1366px wide, or 1920px wide – some say that the larger size is necessary due to large monitor – which is common, best?

What would be a good length?
I don’t want it to have such a great length, so that it is hard to see what is below the banner or require a lot of scrolling., perhaps it is good to still something showing just below the banner. What would be the ratio for the hero image that would work?

Optimize for load time
Eventually, it will be a gif or some file that enables some movement.

Any thoughts on how a coder can work with the file so that it loads faster?

Is there a way for a coder to specify that the image be static sometimes – depending on device? on other relevant issues?

I might want the banner image to be static on mobile phones as the load time needs to be quick so the movement be visible on the desktop version, is there a code to do this or how?

  • @Scott - I think you made a nice job of editing this rather unwieldy question, although there's still far too much stuff in it.
    – Billy Kerr
    Sep 26, 2018 at 9:31
  • I do not disagree, @BillyKerr and voted to close (the original question) for that very reason.
    – Scott
    Sep 26, 2018 at 10:53
  • @Scott - yes, the OP would have been better to edit the original question and ask for it to be reopened rather than just post it again.
    – Billy Kerr
    Sep 26, 2018 at 12:37

1 Answer 1


That's a lot of questions, too many in fact, but I'll give a brief rundown of my thoughts anyway.

  1. Design it at the largest size you think you will need. Perhaps 1920px wide would be a good place to start. Raster images can easily be reduced in size, but don't look good when enlarged. Start with a larger size, and your web developer should be able to take that image and resize it for different devices, and optimise the file sizes for the web. Be aware however that the detail of fine lines might be lost at smaller sizes.

  2. There is no "best" size. "Best" is highly subjective. These days, the most common size is probably a mobile phone, but that's irrelevant, since I'm sure you probably want the site to look good whatever device it is viewed on.

  3. The aspect ratio would depend on how much of the screen you want to fill. Without seeing the design, I can't see how this can really be answered in any great detail. You'll have to make up your own mind. Perhaps draw up some sketches, or create some rough mockups to help you decide.

  4. GIFs aren't suitable for very large animated images. The format was designed for small web animations. Perhaps a video loop would be more suitable - ask your web developer about implementing this.

  5. Coding/web development questions are generally off-topic here. But, there are techniques that involve detecting the size/type of device being used so that appropriate sized images can be served to the browser. This is a job for your web developer.

Not the answer you're looking for? Browse other questions tagged or ask your own question.