Sizing Your Embedded Images Correctly

blogcover - sizing your embedded images for social media.png

When you share blogs or content from web pages to various social media platforms, one common difference is the resize dimensions of the thumbnail image. It is also important to know how Facebook, Twitter, and LinkedIn crawl through your website to select the best images. Here are some best practices for correctly sizing images embedded within a site.

Facebook

Ideal image upload size: 1200 x 628px (Alternatively 560 x 292px or 400 x 209px to maintain the 1:1.91 ratio)

  • Resized shared image size: 470 x 246px

  • Anything outside the 470 x 247px range will be cropped from the top and bottom

Twitter

Twitter crawls through your page to create "Twitter cards" when posting an image associated with a shared link.  The default summary card will resize your image to 120 x 120 px. Additional HTML will be needed on your website to override the default Summary Card with a Large Image Summary Card.  Directions on how to do that can be found on Twitter's Developer Site

  • Ideal image upload size: 1024 x 512px

  • Resized Large Summary Card size: 440 x 220px centered vertically

  • Resized Standard Summary Card size: 120 x 120 px

  • Preview your twitter card with this Card Validator

LinkedIn

  • Ideal image upload size: 744 x 400px

  • resized shared image size: 180 x 110px

 

Moral of the story, if you have an image sized to 1600 x 800 px, with a 160px buffer on each side horizontally, it should resize to all three platforms (Facebook, LinkedIn and Large format Twitter card) without losing information.

embedding 1.png

 

Please use this printable summary page for reference.