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:
- home page / Front Page Header Image (a.k.a. Hero image)
- page header banners,
- blog post images, and
- 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.
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.
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.
- 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
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.
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.
The “Right” Blog Post Image Size
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
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.
Thanks Nancy that us really useful information
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.
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.
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.
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
Thank you for your useful tip, finally I figured out which size is good.
You are welcome. Happy the articled helped.
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.
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 ….
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!!