• Skip to main content

building websites for authors

Personalized profitable websites for authors

  • Website
    • Authors
      • Authors Website Templates
  • About
  • Before & After
  • Blog
  • Contact
  • Website Profitability QUIZ

The Right Image Size for Your Website: 10-Minute Monday

July 5, 2020 by Nancy Fields 10 Comments

What Size Should You Make Your Website Images? woman making a frame with her hands
Video below shows how I find the right image size for any website project

What? No images?

If you’re like most people, when you downloaded your first WordPress theme you wondered what happened to the images — those same images that made you want to buy that theme.

Once you got over your first BIG disappointment, that your theme did NOT come with images, the next question you likely asked yourself was, ‘How in heck do I get my WordPress theme to look like the demo?’

If you begin by finding out what image size your theme’s demo used, you’ll soon have a site that’s better than the demo because it will have images that best represent you and your business.

The Right Image Size

When I’m building a WordPress website for my clients, I typically need 4 different sized images:

  1. home page / Front Page Header Image (a.k.a. Hero image)
  2. page header banners,
  3. blog post images, and
  4. sidebar images.

How To Find the Right Size

The MEDIA SETTINGS information under APPEARANCE is a great place to start because it will give you…

  • the best image width for a blog post (1024 is for the Showcase Pro theme), and
  • what size image will work best in your theme’s sidebar (300)

…BUT it won’t give you dimensions for your HOME page / Front Page Header Image or page header banners.

screen shot WordPress site media settings
Front Page Header Image under Appearance Customize in WordPress

You’ll find the size for your HOME page / Front Page Header Image size under APPEARANCE —> CUSTOMIZE —> FRONT PAGE HEADER IMAGE.

In this example, the size is 1600 px X 1050 px.

Page Header Banners

Finding this size is a bit trickier.

For example, Showcase Pro’s TEAM Page demo header banner is a lot thinner than the HOME / Front Page Header Image, BUT the theme’s documentation does not tell me what size to make the TEAM Page header banner.

header banner comparison Showcase Pro theme

To Find Any Page Header Banner Image Size

Enter the URL of your theme’s demo into the Firefox browser. Use Firebug to get the exact image size dimensions that were used.

  1. Right + Click / Control + Click (Mac) on the web page
  2. Choose View Page Info
  3. Choose Media
  4. Scroll down to Background
  5. Select the image that is the same as the header banner
  6. Dimensions: gives you the exact image size used in the theme’s demo

The TEAM header banner size is the exact dimension as the HOME page header banner (1600 px X 1050 px), even though it displays thinner.

header banner image size diagram

Watch the video below to see how I use Firefox to find the right image size.

What?!!! Not Every Header Banner Image Is The Same Size

When I checked the BLOG header banner, I was surprised to learn it was not the same size as the TEAM head banner. Instead of being 1600 x 1050, it was 1800 px X 960px.

This theme’s header banners will resize to keep the look consistent throughout the website.

Your design challenge will be to find images that look good in long and narrow spaces.

firebug used to find image size on a webpage

The “Right” Blog Post Image Size

Showcase Pro blog post image example

You’ll use these same steps to find your theme’s demo blog post image size:

  • Right + Click / Control + Click (Mac) on the web page
  • Choose View Page Info
  • Choose Media
  • Scroll down to Background
  • Select the image that is the same as the header banner
  • Dimensions: gives you the exact image size used in the theme’s demo
firebug to find blog post image size
900 px X 600 px

Final Tip

Images for the web should be 72 dpi and RGB.

Images for print should be 300 dpi and CMYK.

Watch Me Use Firefox to Find the Right Image Size in the Theme Demo

Need Help With Your Images?

Join me for 10-Minute Monday where I share tips and tricks for non-designers who want to enhance their professional image.

You may also phone or email me, anytime. Contact

Join Me Live on My Next 10-Minute Monday

Get an invitation to join me LIVE on my next 10-Minute Monday by signing up below.

You’ll also receive a tip on how to find the perfect images for your website home page plus a list of my favorite Free resources for great photography that you can use on your website or in any project.

10-Minute Monday is LIVE and 10-minutes or less. I also try to keep the sessions short and focused on one topic because I know you’re busy and you don’t have time to waste.

And because it’s LIVE you can ask questions.

Sign up below and I’ll see you on the next 10-Minute Monday.

Filed Under: 10-Minute Monday, business, WordPress

Reader Interactions

Comments

  1. Natasha Mitchelll says

    July 31, 2018 at 8:12 am

    Thanks Nancy that us really useful information

    Reply
    • Nancy Fields says

      August 1, 2018 at 10:33 am

      Thank you Natasha! Finding out what size you need, first, will save you so much time in the end. So glad you could join me LIVE on 10-Minute Monday.

      Reply
  2. Tatiane Torres says

    June 11, 2019 at 11:03 am

    I have not tried yet, becuase I’m wating for the Firefox to download. I was getting crazy trying to find the image size of a template I’ve bought anda now I know that sometimes, the website builder dont give us all the info we need.

    Reply
  3. KEVIN STAGG says

    January 14, 2020 at 9:04 am

    How can I have a 1600×1050 image graphic for my hero page though? Even crunching the quality down to 30% in Photoshop I’m getting huge filesizes (300K+) for simple jpg photos.

    Reply
    • Nancy Fields says

      January 14, 2020 at 1:26 pm

      Hi Kevin,

      Start out in a photo editing program such as Photoshop or Canva.

      Create a ‘canvas’ (document) that is 1600×1050. Then bring your image into that sized document. Once you are happy with how it looks in a 1600 x 1050 space, save your document in 72 dpi, NOT 300.

      Hope that makes sense.

      If not, join me on my free 10-Minute Monday trainings, and ask me to demonstrate what is not clear. If you sign up for my free offer you will also get an invitation to attend on Mondays.

      Best,
      Nancy

      Reply
  4. FtripVietnam says

    August 21, 2020 at 3:12 am

    Thank you for your useful tip, finally I figured out which size is good.

    Reply
    • Nancy Fields says

      August 21, 2020 at 12:33 pm

      You are welcome. Happy the articled helped.

      Reply
  5. Mansoor Ahmed says

    September 30, 2020 at 3:54 pm

    This is very informative, useful and helpful article. I was compressing the size of images for my blog site. It is really very supportive post. Thanks for providing and sharing great information.

    Reply
  6. christine says

    January 24, 2021 at 7:13 am

    Hi Nancy ! I just signed for your Monday’s tips ! I look forwards to the first one ! Your article was very useful but I’m a bit stuck… I ‘m trying to prepare a banner for a school orchestra with a collage of about 50 photos. I first ” inspected” the size of the previous banner … 1920 px / 600 px . The I tried to convert it in centimes with 72 dpi, in order to know the size of each photo but it gives a much a too large canvas in centimetre… What do. I do wrong ….

    Reply
  7. Omaha advertising agency says

    April 22, 2021 at 11:22 pm

    I am so happy I found your blog and I absolutely love your information about right image size your website! I liked and it is wonderful to know about so many things that are useful for all of us! Thanks a lot for this amazing blog!!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Home
  • Contact
  • Facebook
  • LinkedIN

Copyright © 2023 · Infinity Pro on Genesis Framework · WordPress · Log in
This site is not a part of the Meta website or Meta Platforms, Inc. Additionally, This site is not endorsed by Meta in any way. Meta is a trademark of Meta Platforms, Inc.