How to Add ‘Invisible’ Pinnable Images in Blog Posts

I’m always on the lookout for cool tricks that are (a) easy to implement and (b) simplify social media management. When I was reading the Buffer blog’s monthly social media report, I discovered a nifty tip for embedding “invisible” pinnable images in blog posts.

Of course, I immediately tried it, and it works!

How to add invisible pinnable images in blog posts | Blogging Bistro

Before we dive in, I’ll answer the question you’re likely wondering about:

WHY would I want to hide a large vertical image in my blog post?

Well, we know that “visual content” is THE trend in blogging and social media marketing. Glance at your Facebook News Feed. Or Instagram. Or Pinterest. Add visuals to your blog post and your article instantly becomes more engaging. More shareable. More memorable.

Bloggers who care about engaging with readers and creating shareable content (and what blogger doesn’t?) are madly scrambling to master Canva and PicMonkey so we can feature compelling custom graphics with each blog post.

Therein lies the problem.

What size should that darned image be?

If you’re creating an image to be shared on Facebook (along with some “teaser” text and an embedded link to your blog post), the image (width x height) should be 1200 x 627px.

For Twitter, the image should be 506 x 253px

For Pinterest, the image should be 735 x 1102 px

See the challenge? We could spend all day creating shareable images for the major social networks!

For the past 9 months, I’ve been creating custom graphics for each blog post, appropriately sized for Facebook. Recently, I added a Pinterest-sized image, as well. But Pinterest images are ginormous, and take up a lot of real estate in a blog post.

Making your image “invisible” hides the large Pinterest image you’ve so painstakingly created and loaded to your post until the user clicks the “Pinterest” social sharing icon for the post. The image then miraculously expands to the perfect pinnable size.

Here’s the process, in a nutshell:

Design your pinnable image (735 pixels wide x 1102 pixels tall). Overlay the title of your post onto the graphic, like I did here:

How to add invisible pinnable images in blog posts | Blogging Bistro

Upload the pinnable image to your blog. Customize the “Alt Text,” which is the exact text that will display when a user pins your image.

Insert the full-size image at the end of your blog post.

Now, the secret part!

Click the image and then click the pencil icon (in WordPress) to open the image editor.

From the “Size” setting, select “Custom Size” from the dropdown menu and change the width to “1.” As in 1 pixel wide.

Update the image and then save or update your blog post.

This process reduces the size of the Pinterest image so it isn’t visible on the post, except as a tiny dot that you can’t see unless you squint very, very hard. (There’s one on this post, at the end, before the Click to Tweet.)

When the user clicks the Pinterest sharing button for the post, the perfectly-sized Pinterest image will display. (Give it a test drive on this post.)

Isn’t that slick?!

How to add invisible pinnable images in blog posts | Blogging Bistro

Click this image to download your free checklist that includes EVERYTHING you need to do prior to publishing a blog post! Or simply text PREPUB to 44222!

  • Pingback: » How to Add ‘Invisible’ Pinnable Images in Blog Posts()

  • This is a COOL idea! Thanks for sharing 🙂

  • Glad you like it, Jennifer. Give it a try and let me know what you think.

  • Great to know. Thanks for sharing your finding. I’m off to go and try it now…it’ll save having to change my css

  • Thanks for stopping by, Emma. I hope this technique works as well for you as it does for me.

  • Unfortunately it didn’t work. It looks like it’s there, but doesn’t appear when pinning is attempted via either my sharing buttons or via my pinterest toolbar button. Shame, because it would have been brilliant if I could get it to work.

  • Sorry you’re having trouble, Emma. One blooper I made when resizing my image to 1px is that it was 1px wide but 0px tall. It needs to be at least 1px x 1px.

    Please send me the URL to your post and I’ll click “pin it” to see if I can figure out what’s happening. You can post it in the comments (which I’ll have to moderate, as I approve all comments with links, or you can email it to

  • Pingback: So Your Post Went Viral. Now What? | Sweet Tea, LLC()