What are the best practices for the pictures? In all areas of the website and listings. I want to be sure that the pictures I upload are not too big and heavy, yet large enough to no be grainy.
Hi Morgan,
Yes this was shared last week but I will post them here as well.
Recommended Dimensions
Hero Large - 2560 x 1152px
Hero Medium - 2560 x 895px
Hero Small - 2560 x 480px
Enhanced Listing - 2560 x 1360
Logo - 240 x 64px
FC Community Photo(s) - 566 x 500 px
Agent / Office Photo - 600 x 600px
5 Likes
Thanks for sharing @rchohan! I’m working on an easy-to-read diagram that incorporates all of these specs.
2 Likes
I handle all of my own listings, no IDX feed. I have noticed on my previous site that if I put too many photos it really slows down the loading. Now that the images have increased in size, is there a suggested limit or total file size to avoid slowing down the site? Pictures vary in file size even with the same pixel count.
I was sizing images 1200 wide before and would end up with images around 100 KB. Images at 2560 wide are coming out around 800 to 900 KB. This seems too heavy to me. By the time I put 15-20 images on a listing there’s no way it will load quickly. Is the site doing anything to resize or compress them?
What website do you recommend we use to resize photos. I’m having a hard time resizing the images to this sizwe.
I use my mac (preview) are you a mac or a PC guy?
Got it. Thanks
I use a Mac App called PhotoBulk. I can resize and watermark a lot of images all at once. Highly recommend.
Edit: It also lets you reset the metadata on the pictures.
There are already lots of great answers here, I just want to add quick tips from a designer perspective.
- Always provide the image which have good light in it!
- Avoid dark images
- Try to avoid writing something on image.
- Make sure main content of the image should be in the middle.
- Make image darker if there is any text on it! to provide good contrast.
Thanks for the chart. I have a couple questions:
What you are calling “Hero Image” is what the site calls “Header Image”?
What are the sizes recommended for the Preview Image?
Thanks!
On mac I typically resize in preview and then compress using ImgOptim - ImageOptim — better Save for Web
Hello @PuertoRealty !
You are correct! Hero and Header image are the same. We are referring to the main image/header image at the top of the page.
There are no recommended dimensions for the Preview Image. When using the Preview Image for social media, every platform has a different ideal image size. A quick Google search recommended and stated that the ideal image size is 800 x 418 pixels .
We hope this helps! Please let us know should you have any other questions.
Kindest Regards,
Stephanie
Implementation Specialist
What does changing the size of the hero image to 480 to 895 to 1152 x 2560 do? I had thought it would make the height of the header less tall, but it doesn’t do that. Does it just make the image size smaller/potentially more pixelated? If so, is there any way to make the size of the header smaller? I just switched to Renaissance from Discover and the blog header is really big, to the point where the content is below the fold on a 13" desktop.
Change the aspect ration - For instance 500 x 500 = square 300 x 500 = rectangle 200 x 500 = less high rectangle.
But of course use a high enough resolution image (so it’s not pixilated) and then if need be have the browser reside the image.