How to post infographics on site in the best way?

[Golan]

I have got a very cool and very long infographic for my site.

But being very long and very detailed, it's also very heavy. JPG is like 3Mb. Of course i won't post it on the site as is.

Firstly i thought to slice it into pieces and let them pieces lazy load. But then i thought that in this case Goog won't ever index the whole image, and that is obviously not what i want.

Then i thought to post a preview on a page, like small preview like 300kb... Quite heavy too, but if make it even lesser it would be impossible to read anything at all but the biggest subheaders. And from this preview, link to a separate page with a full image? to .jpg file? A bit confused here how to do this better.

I already got an advise to show it in full to G in noframe, and to the users - lazyload slices in iframe. Any other ideas?

Please advise.

 

[Future State]

3MB's is nothing these days. People stream GB's off of Netflix and Youtube all day long. GB's off of Spotify. Imgur probably loads TB's daily. It's not something I'd be concerned about. It's also the price you pay for creating a large image with marketing appeal.

Have you compressed the image as far as possible? TinyPng and Kraken.io might be able to reduce that some for you.

You could use a CDN if you're concerned about running up a bandwidth charge on your hosting.

You could upload it to Imgur and hotlink it from there.

How big are you talking resolution-wise? My last infographic was 900 x 3575 and clocked in at 231KB using the .png format.

726 x 363​

 

[Golan]

Thank you @Future State for your suggestions. I trusted my designer that she knows everything but apparently she didn't know about Tinypng. So after this done, my piece is 1280x9497 and 1.69MB in .jpg.

Would you advice to shrink it to 900 wide?

 

[Ryuzaki]

I'd suggest going as thin as 700px, but even a drop to 1000px would help because you'd also shave off some of the height. 1280px is fairly wide. That's too big for iPad mini and regular iPad and nearly maximizes the iPad Pro's landscape mode.

I'd drop to 700, 800, 900 if it doesn't cause the text on the graphic to become too small to be readable. Any site that chooses to post it for you is going to have a maximum width to their main content column as well, and most of them are going to be pretty small. Expecting them to resize the image is one extra step where they might say "screw it."

For example, the width of the content area on BuSo is about 730px max on desktop.