You NEED This Ebook When Starting Out on HubSpot!
📢 Calling all SaaS Startups and Tech Companies! So you've taken the leap and invested in HubSpot. Brilliant move! But if you're tempted to get...
4 min read
Benny Canady
:
Nov 07, 2022
What is the right size for an image on a website, a blog post, in email or on social media? And how should images be optimized? Our team begged for this post!
Images are critical in capturing the readers’ attention and play an essential role in all marketing vehicles. It only takes a few minutes to ensure they add to your story and help your SEO. The 3 most important considerations are image size, image compression, and image alt text.
Images can influence several things when you utilize them for multiple purposes. One image can be displayed across a blog page in the content, as the featured image, on a social media post, and in an email newsletter. CRM systems such as HubSpot do a great job distributing your content in many ways.
Some tips on image sizing:
Bigger is not always better. Only use images that are sized for the largest possible use you will have for that image.
If you are using a picture or graphic as a featured image for a blog post that will also be used for your social media, then keep it to a format that works well for both. HubSpot guides you on best practices in the Featured Image dialogue.
We typically use 1024 x 512 pixels as that size presents well as a blog header, across all the social channels on HubSpot and as the HubSpot automatic email newsletter featured image. We leave good "margins" around text; generally, the picture looks great on social media and the blog (a marketing two-fer).
Large page banners and hero images might need to be larger, but keep them sized appropriately and not bigger than necessary.
Image size and file size directly correlate, affecting your pages' performance. CRM systems do a great job in displaying images, and you have some control in HubSpot in the Image Settings. But keep in mind that resizing requires processing, which reduces the time to display a page. You might not notice one large image slowing a webpage down, but when you have a few, it really adds up.
So where you can, size all images appropriately before uploading and using them on your web pages. If the largest size you require, for example, is a banner that needs to be at least 700 pixels wide, then there is no need to upload that image at 1090 wide.
We love this article at Tiny-img.com which gives a great table for generally recommended image sizes for websites.
Here is a cheat sheet of standard image sizes for web pages best suited for a desktop with a resolution of 1920 x 1080 px (which is the most popular according to the statistics).
Image Type | Dimensions | Aspect Ratio |
Background Image | 1920 x 1080 px | 16:9 |
Hero Image | 1280 x 720 px | 16:9 |
Website Banner | 250 x 250 px | 1:1 |
Blog Image | 1200 x 630 px | 3:2 |
Logo (Rectangle) | 250 x 100 px | 2:3 |
Logo (Square) | 100 x 100 px | 1:1 |
Favicon | 16 x 16 px | 1:1 |
Social Media Icons | 32 x 32 px | 1:1 |
Thumbnail Image | 150 x 150 px | 1:1 |
Others have dealt with this much better than we can and we love the reference guide at HootSuite. In Summary, for B2B the specific social media sizes for posts are
Let's not leave email behind. This stat hasn't change much over the years, but the best image size for email is still 600px wide. Test your emails in multiple email clients to ensure they are loading properly and displaying images as you intended.
HubSpot makes this easy with it's native Litmus integration which allows you to preview your Hubspot emails in 30 different inboxes.
You can reduce file size through image compression. But be careful, this can also reduce the amount of detail in an image as it resizes for different display sizes. Read this detailed article to learn more about image compression and file types in this article from TechTarget. For a tool to support you with image compression, try tiny-img.com/image-compressor/,
PNG file formats can retain more detail but will potentially have a larger file size. That’s a trade-off you have to weigh against the overall performance of your site.
Alt Text is the text that goes along with the image. It’s not the name of the image, although some systems will default to that if there is no specific Alt Text entered. As a best practice, set specific Alt Text for each image you use on a page.
Search engines can’t interpret images well, so they rely on the Alt Text to understand what the image is about. Not setting Alt Text for your images can have a detrimental effect on the ranking of your web pages, and you will be ignoring one more opportunity to emphasize your point.
If you are careful at selecting the right images for your blog and web pages, be just as careful about the Alt Text. Don’t write them just for SEO by stuffing keywords into them; write them to support your content and describe what the picture represents. What would it say if you could not see the image and only read a short text description? What makes sense related to the picture and the topic? What is a good short summary of what the image represents?
Bad Image Name: recurringrevenueconf.jpg
Good Image Name: Participating in local trade events generates leads!
Bad Image Name: Zombie.png
Good Image Name: Snarking Alert-Stupid Automated Sales Emails
Your text does not need to be long, but it should be descriptive.
HubSpot makes it easy to add Alt Text to your Feature Images and those you add to web pages and blog pages. Use the image feature in the page editor to change Alt Image Text and add Link attributes.
Keep it simple. Start with the tools you have at hand. If you need help, contact your creative agency or web designer. Leverage every ounce of value out of your images.
We got you. We build HubSpot efficiency—and we're really good at it. Start with an audit and some HubSpot tips - or have us run full marketing and sales support, whatever you need to let you focus on generating revenue​. Learn more about our Fractional HubSpot Admin support today!
📢 Calling all SaaS Startups and Tech Companies! So you've taken the leap and invested in HubSpot. Brilliant move! But if you're tempted to get...
The recently concluded #INBOUND2023 was abuzz with innovations, breakthroughs, and forward-thinking strategies. At the heart of it all was HubSpot's...
One reason we have gone to every single HubSpot INBOUND since we began Orange Marketing way back in 2018, is that INBOUND is an efficient way to pick...