Want a personal ProudCity demo? Schedule one today.

What is the ideal size for hero unit images?

There are a number of factors to account for when using images in hero unit sections of your website. Push10 has an excellent primer, and here is a helpful excerpt:

By default, the ideal website hero image size for full-screen background images is 1,200 pixels wide. However, if users are browsing on larger screens, these images need to scale up to fill the screen. This can often introduce some blur into the image. If the image is just a background image, this blur is often acceptable – even desirable. But if the image is a foreground image, or contains vital elements that must be sharp, we will often create larger source images in the range of 1,800 pixels or so. The upside? Sharper images. The downside? Larger files which lead to longer load times.

See also the Images section of the Guide to Local Government Websites for helpful optimization tips.

Close window