Create a Great Hero Image for Your Website

In this post I am going to show you how to create a great hero image for the homepage of your website.

In this post I am going to show you how to create a great hero image for the homepage of your website.

What is a Hero Image?

This is the image that appears at the top of the page and is the first graphic a visitor sees. This is an important part of web design. So, you want to show them a good, relevant graphic image.

The example below shows the hero image for my website, Blue Lacy SEO.

hero-image-blue lacy seo

Two Options for a Hero Image

  1. Use your own image. Make sure this is a high-quality image that is related to your business.
  2. Use a stock image. Here is a list of several high-quality image sites. Most of these have free and paid options.

Download and Save an Image

I looked for a suitable image for a fictional aerial drone photography service. I found a great looking image that shows foot bridge.

aerial view hero image

I was presented some download options for this image, as shown below.

image-size-selection

The largest size was 3882×2184 (width x length) pixels with file size of 4.5 MB. This option is way too big for a website image and will cause your webpage visitor to wait for this image to appear.

The next option is 1920×1080 pixels with a file size of 1.0 MB. This is the size of many desktop and laptop screens but is still too big for our purposes.

The download option I chose is 1280×720 pixels, which is a good size for a full width image for a website page. The size is only 484 KB.

Let me explain the difference between MB (megabyte) and KB (kilobyte). Kilo stands for 1,000, so a thousand KB is equal to 1 MB. The first download option for our image is 4.5 MB in size and is equal to 4,500 KB. This gives you a better idea of the disparity in file sizes in our image download options.

Image Compression

The image I selected is in the JPEG (Joint Photographic Experts Group) format. This is a commonly used method of lossy compression for digital images.

I wanted to further compress this image without losing quality for faster page speed. I used a free online application called Tiny JPG. This application will further compress the image for use on a website.

After compression, my aerial image went from 484 KB to 424 KB. It’s not a big reduction, but it helps.

There are also image optimization plugins for WordPress. Here is a list of some of the better ones. These plugins will compress all your images as they are uploaded to the Media section in WordPress. If you have a lot of images to compress, these plugin apps will save you a lot of time.

Most of these have free and paid options.

  • Smush
  • EWWW Image Optimizer
  • ShortPixel
  • Optimus
  • Imagify

Install a New Theme for WordPress

For the purpose of this article and video, I installed a new theme from Astra. If you are new to WordPress, I would recommend working from a theme until you are proficient with WordPress. You can use any WordPress theme.

After installing the basic Astra theme, I installed the Astra Starter templates and chose a suitable template for this demo.

mountain-theme

The Mountain template has a hero image that is approximately the same size as my aerial photography image.

Uploading the Image and Using a Page Builder

The Mountain Astra theme has a nice hero image and I am going to change that to the new aerial photo photography image.

I’m also going to be using a page builder called Elementor. You can use any page builder, such as Beaver Builder, Divi, or even the WordPress built-in page builder, Gutenberg.

mountain-theme-with-elementor

With the Elementor page builder loaded, I can then change the image.

To see how to install the new image refer to the Create a Great Hero Image for Your Website video.

Blue Lacy SEO
El Paso, Texas
[email protected]
915-494-2382 or 915-471-9796

Related Posts