Sizing Instructable Images

Do you have problems getting images to size correctly? Do your images size way too large and overflow the frame like the one above? This instructable attempts to summarize what I've learned to address this problem.

I've been told by Instructable Staff that all uploaded images are duplicated into various aspect ratios. These pool of images are then pulled from and sized differently depending on what device you are viewing the instructable from. There isn't a way to specify in the regular editor what size and ratio to display.

They then suggested that "Another option that may work is if you upload images that are a more traditional aspect ratio. Anything from 16:9 to 4:3 should display very nicely."

Notice that they say this "may" work. Here's what I've found in my struggles to get my images to display decently. (Note I'm using images from my "Rubik's cube made easy" instructable, hence all those cube images!)

The above image is its original size (600x195) which is not in that range of traditional aspect ratios. As you can see, Instructables is displaying this image enlarged way too big with the left and right sides cut off. Let's see what we can do to get this image to display properly.

So let's try the 16:9 (width:height) aspect ratio. I'll keep the original width of 600 pixels, 16:9 means the height needs to be 338 pixels so we'll make a canvas size of 600x338 and drop that 600x195 image into it.

So let's see how this 600x338 (16:9 aspect ratio) image looks. So interestingly, when I dropped this image in and previewed it, it fit perfectly - the left and right edges were not cut off! I took a screenshot of it just for proof, see it in the next slide.

But, when I view this in my browser (Chrome) what I'm seeing in the above image, is that the right and left sides are again chopped off! So from this experiment, it appears that resizing to a 16:9 aspect ratio is not going to solve our problems!

As a side note, 16:9 is the "new" common aspect ratio known as "widescreen" whereas 4:3 is the old school "full screen" that was common back in the tube TV days. Yeah, you millennial's probably don't have a clue what I'm talking about.

This picture is the screen capture showing that our 16:9 image looks perfect in the Preview. Success right? Well, not so fast - see what happens when we actually view this page in our browser (Chrome)! The left and right edges are truncated again! Just go back to let previous slide and see for yourself.

Lesson learned - don't trust the Preview! What looks fine in the Preview gets rendered differently in actual viewing with a browser!

Also, yes, there's a lot of white space below my image. That's because I dropped a 600x195 image into a 600x338 canvas and put it at the top, so there's all that blank white space at the bottom. What can we do about that? Well... we'll try to address that in a later slide.

So let's continue to see how we can make this image display in its entirety.

Just for the record, in case for whatever reason your browser is displaying these 16:9 images perfectly, this is what I'm talking about. Here's a screenshot of how I see my 16:9 image in Step 1 displayed after "settling in" after the initial preview - notice the left and right are cut off.

If you're seeing my Step 1 image displayed perfectly, well, great. Let me know! But this is how I'm seeing it. Yes, it's much better than the original image from the title page, but it's still cut off. So for me, despite the advice from the Instructables staff, 16:9 aspect ratio doesn't quite cut it. Let's move on to 4:3 aspect ratio.

So let's try the 4:3 aspect ratio. I'll keep the original width of 600 pixels, 4:3 means the height needs to be 450 pixels so we'll make a canvas size of 600x450 and drop that 600x195 image into it.

How does this 600x450 (4:3 aspect ratio) image look?

Again, when I first drop it in, the image looks great (except for all the white space at the bottom). Left and Right are displayed fine. Looking at it in a browser, it seems Right & Left appear to continue to be displayed fine.

As previously noted, all that blank white space below the image is because I dropped my 600x195 image into a 600x450 canvas and just placed it at the top.

Lesson learned - 4:3 aspect ratio seems to be required so that Right and Left sides are not cut off. Unfortunately, this means there'll be a lot of white space for images that are short and wide, because you'll have to drop those images into a 4:3 sized canvas. Yeah, you could center your image so that there's equal white space on top and bottom but regardless, there'll be a lot of white space above or below your image, but to the best of my knowledge, this is the compromise you'll have to make in Instructables so that your images display intact.

Here's the same 600x195 image dropped into a 600x450 canvas but centered so that there's equal blank white space on the top and bottom. Looks a bit better, the text doesn't seem as far separated from the image.

And lastly, here's that same image dropped in and moved to the bottom. Now's there's a ton of blank white space on top of the image. The image is now really separated from the title bar, but it's closer to the text. So these are your compromises and lessons learned:

• 4:3 seems to be the aspect ratio you need to use for images to be displayed in their entirety in Instructables.
• don't trust the preview - it might show your image perfectly, but parts could be truncated in the actual browser

.

Now let's see what the minimum width should be. The image shown is size 382x206, close to 2:1, it seems really huge doesn't it? Obviously, Instructables has enlarged the image to make it fit some set width, probably 640 pixels, I'm not sure.

But it does fit because it is more "square" - i.e., it's not too wide for its height. Oh wait, I got tricked by that Preview again! It actually doesn't fit - the R&L sides are truncated again.

Actually, this is odd, it's not only the preview that's messed up. I actually looked at it in the browser and at first it rendered properly (i.e., the R&L edges weren't cut off). But looking at it through the browser again, now the image is rendering resized with the R&L edges truncated. Odd.

So let's try making the image smaller. We'll shrink the image to 200x108, keeping the same 2:1 aspect ratio.

So I resize that image to 200x108, keeping the same 2:1 aspect ratio.

Now again it seems to fit at first (with the resolution (picture quality) greatly deteriorated!) but of course you're probably looking at it and it doesn't fit at all, and looks exactly like the original image except the original has better resolution. Again, Instructables is expanding the image to make it fit some set width so this is why this smaller (200x108) image looks so horrible, much worse than the original 382x206.

I say "probably" because I've really no idea how Instructables is displaying these images in your browser. For whatever reason, if I refresh my cache and review this Instructable, my image sizes don't seem to stay consistent so I really don't know what Instructables is doing except that it can be inconsistent. Thus the objective of this Instructable - to figure out how to size images so they're displayed at least somewhat consistently!

Here's what I saw at first immediately after uploading the image - it fits! (Note that I had to fit the above screenshot into a 1600x1200 image (i.e., 4:3 ratio) to make Instructables display the entire screenshot!)

But of course you know when you look at that image a couple slides back now, it's not fitting anymore. Let's see what the minimum width needs to be to make it fit.

I kept the 382 width and dropped the original 382x206 image into a 382x287 canvas to make it a 4:3 aspect ratio because we've previously discovered that Instructable needs an image to fit that 4:3 ratio to display it in its entirety.

So now there's a lot of blank white space underneath. It fits with nothing chopped off, but again it's been expanded to fill some set width, so the image isn't sharp. Let's try to find what this perfect Instructable width is.

I dropped the original 382x206 (2:1) image into a 600x206 (3:1) canvas just to see if widening it to 600 pixels would make Instructables display the entire image. Again, at first it did, but as you can see it doesn't now.

This is the really odd thing - every time, when you first drop an image in, it seems like Instructables will display that image correctly, no matter what the size or aspect ratio of that image. This time I even logged out of Instructables and closed that tab, and then revisited this Instructable "fresh" so to speak to verify if the image still displayed properly. Usually this is enough to allow Instructable to do its thing and start resizing the images that are not in a 4:3 aspect ratio and displaying them with left and right sides chopped off.

To my surprise, the first couple of times I revisited this Instructable "fresh" this image did remained displayed in its entirety, but alas, after I walked away to do something else and came by maybe an hour or so later, this image started displaying enlarged with the L&R sides truncated again just as you see it above.

Why or how does this happen? I've no idea. I've no idea why waiting some time period after uploading an image would make Instructables render it differently, but it does. As proof, I'll show my screen capture of the above image displaying perfectly in the first oh, 10-15 minutes after I'd uploaded it in the next slide.

Here's a screen capture showing that 600x206 image displaying in its entirety immediately after uploading. This is a screen capture of the previous slide. Go back to the previous slide and you can see how jacked up the image is now!

Note that my screen capture was actually sized 1563x766 but as I learned from my experiments in the beginning of this Instructable, I knew since it didn't fit that 4:3 aspect ratio (1563x766 is roughly 4:2) so if I'd just uploaded that screenshot in its original size Instructable would truncate the edges. So I dropped that image into a 4:3 canvas so that's why there's lots of empty white space beneath my screenshot.

Note that screenshot was also taken before I changed the title of Step 11 and finished typing in all this text in case you're wondering about that!

Lesson learned - viewing your uploaded image in a browser immediately after you upload it won't necessarily show how it'll be displayed in the future. For whatever reason, almost any size and/or aspect ratio image seems to display nicely immediately after uploading, and even for about 10-15 minutes after uploading and even after you log out of Instructables and view it fresh from a new browser session, etc.

But wait about an hour or more, and things change! Your image, if it doesn't fit the 4:3 aspect ratio, will be adjusted (usually enlarged) by Instructable so the edges are truncated.

So bottom line - what did I learn?

1. To display an image in its entirety, keeping a 4:3 aspect ratio (width:height) is a must!

2. Use original images that are large with the highest resolution you can and drop them into a 4:3 ratio canvas. If too large, Instructables will size it down and you'll have nice sharp images.

3. If your image is too small (much less than 600 pixels wide) Instructable will expand your image and make it at least 600ish pixels wide thus making it less sharp. I say "ish" because I don't really know exactly what width Instructable is using but it seems close to 600. It's probably 640, which was a common width back in the old school tube monitor days.

600x450 and 640x480 are 4:3 aspect ratios.
All old school "full screen" tube monitors were 640x480 (width x height).

4. What to do if your original image is not at least 600 pixels wide? About all you can do is drop it into a canvas that fits the 4:3 ratio that displays your image close to its original size. If your original image is small, there'll be lots of blank white space, so try to center your image or put the white space either above or below your image and make it look the best you can.

To the best of my knowledge, this is the compromise you'll have to make in Instructables so that your images display intact.

As an example, the above image is a 600x450 canvas size with a 382x206 image dropped into it and centered so we have equal blank white space above and below. The image displays roughly in its original size, I think Instructables might be expanding it to 640x480 (negligible expansion) so that's about the best we can do with that original image.

5. Do NOT trust the preview or trust the way your image looks for the first few hours after uploading them into Instructable! For whatever reason, image sizes don't seem to stay consistent until a couple hours after you upload them.

Every time, when you first drop an image in, it seems like Instructables will display that image correctly, no matter what the size or aspect ratio of that image. It may even stay displaying correctly for some period of time afterwards, but DON'T BE FOOLED because eventually, it'll resize them and give you problems unless you follow that 4:3 rule!

Hope this helps and please, if you find a better way or have any other hints, let me know!