Hero Image Size

What is the max size I should upload for the best quality hero image? Right now I have 3414x1695, the image looks good but the file size is 1.5 mb and when I choose cover it stretches the image a bit. I saved for web but the file size is even larger. I would like a smaller file size and I do not want the image to stretch, I would like it to fit proper. Any suggestions on this?

Also, should I upload a smaller version of the image for tablet and mobile to make sure that the image looks good on all devices?

it’s always recommended to keep your image assets as small as possible. 1.5mb is way too big and will cause some load time on your website.

Also, images will stretch and squeeze all depending on the user’s screen size. So, I would recommend no wider than 1920 pixels wide and no larger than 500kb in file size.

Yes. A smaller version that replaces the desktop version would be a good way to go

Hope this helps :smiley:

@PixelGeek At 1920 won’t the image pixelate if the user is on a larger Imac?

Yes. But that’s the world of Web. Sometimes you need to let go of image quality for faster load times on your site.

The best route to take is install Google analytics on your website. Find out what most of your user’s screen sizes are, then design for that.

You can’t really please everyone when it comes to responsive design, but you can please most people :smile:

Also, unless your site is more of a photography focused site, then imagery should be a second priority behind the actual goals of your site.

2 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.