Skip to the main content.

4 min read

🖼️ Size Matters: 3 Ways To Optimize Images For Better Content Marketing

Featured Image

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. 

1) Image Size 

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.

Best Size for HubSpot - 1024px x 512px

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).

Best Size For HubSpot - 1024px X 512px

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.

image sizes for websites

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

 

Image Sizes for Social Media

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

  • LinkedIn image sizes for blog post link images: 1200 x 627 pixels (recommended)
  • LinkedIn custom image size for sharing a link in an update: 1200 x 627 pixels (recommended)
  • X (formally Twitter) images sizes for in-stream photos: 1600 x 900 pixels (recommended)
  • Facebook timeline photo and post sizes recommended size: 1200 x 630 pixels
  • Facebook image sizes for Facebook Stories: 1080 x 1920 pixels (recommended)
  • Instagram post sizes (feed photos): Landscape: 1080 x 566 pixels, Portrait: 1080 x 1350 pixels, Square: 1080 x 1080 pixels

Image Sizes for Email - 600px x 650px

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. 

2) Image Compression

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/.

how to optimize images

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.

3) Image Alt Text

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?

Image Alt Text Examples

Example 1:

Bad Image Name: recurringrevenueconf.jpg
Good Image Name: Participating in local trade events generates leads!

optimizing images for marketing_2

Example 2:

Bad Image Name: Zombie.png
Good Image Name: Snarking Alert-Stupid Automated Sales Emails

optimizing images for marketing_3

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.

Need Someone in Your Corner?

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