48Views4Replies

Author Options:

Instructables Image Compression Answered

Does Instructables compress images once uploaded?

What is the recommended file size so as to avoid compression of the image?

Discussions

1
None
Jack A Lopez

15 days ago

Well, most of the images uploaded to Instructables are already compressed, because they are JPEG, which is compressed, and lossy.

Regarding the question of re-sizing images, the Instructables web site seems to do a lot of that too. In fact it seems to keep a collection of different sizes, and shapes, of each individual picture you upload.

When I say "seems to", I have to admit I have no idea how the data is actually being stored on the back end.

What I mean to say, is that from looking at the source html, of any particular page, from any particular instructable, the names of these picture files, seem to have a suffix that specifies their sizes, and the general form for that is:

/PPP/QQQQ/RRRRRRRR/PPPQQQQRRRRRRRR.[SIZE].jpg


where {PPP, QQQQ, RRRRRRRR, PPPQQQQRRRRRRRR} are some funky alphanumeric strings of length, 3, 4, 8, 15, respectively, and the last one, the filename prefix, is just the previous three strings concatenated together. Moreover that [SIZE], is an English word in the set, {ORIGINAL, TINY, SQUARE, SQUARE1, SQUARE2, SQUARE3, THUMB, SMALL, RECTANGLE, MEDIUM, LARGE}

Here is an example from

https://cdn.instructables.com/FDO/0U58/JU6S4HR7/FD...

from an 'ible I noticed today, about building a homemade spectrometer,

https://www.instructables.com/id/Arduino-Spectrosc...

So, somehow these different image sizes are available to the authors who code the site, although it ?might? be the case only one size, the full size, is actually stored somewhere, and somehow software is translating these images on the fly, into whatever size is requested.

Of course I have not got to the really interesting part yet.

The interesting part, is for every image stored by the Instructables web site, and possibly for every file, there is a special URL with the form

/file/PPPQQQQRRRRRRRR/

That is: slash, then the word "file", then slash, then the special 15 character file id, then another slash.

Example,

https://www.instructables.com/file/FDO0U58JU6S4HR7

and that page shows you all the different sizes of that image that are available.

Actually, here is a better example,

https://www.instructables.com/file/FZFE7DXJS4YXZJK...

one that includes an ORIGINAL size image that is larger than the LARGE size.

For your own images, your "Image library"

https://www.instructables.com/upload,

has a link to this special page, with the "Available sizes", for each image.

For another user's images, you might have to write out that URL,

/file/PPPQQQQRRRRRRRR/

if you want to peek at whatever sizes, including the original size, of the image he or she uploaded.

In response to your question about how big of images are needed, I think the LARGE size is 1024x768, so it might be pointless to upload images too much bigger than that, because they will rarely be displayed at full resolution. Unless someone looking at your instructable is very curious about some detail, seen in a corner of one of your pictures, and he or she intentionally seeks out the full, ORIGINAL, resolution version of your picture, just to get a better look at that detail.

0
None
Downunder35mJack A Lopez

Reply 15 days ago

I struggled with it for a while too, so maybe some of my "insight" helps to explain things.
Instructables tries to make everything as easy (clickable) as possible.
And that means for all platforms used to show the websites, be it a 4K smart TV or an older smartphone with a small screen.

What you upload goes into your collection "as is".
However what is shown on a certain browser or device depends on the capabilitites.
Thumb sized images are created as well as those for different backend resolutions.
Similar (sadly) story for using the images you uploaded.
Unless you use HTLM and external images sources (can be unreliable!) you need to find what you want to use in your image library.
For example just dragging an image from your top bar into your step means you might get a different resolution than what you uploaded.
In most cases this makes sense as nothing above full HD is considered a standard viewing device.
So an image needs to fit in there somehow and if you uploaded a 12K image from your DSLR then it simply would be bigger than the entire website.

To add insult to injury we are supposed to follow the right way of handling images, if in doubt one step per image so you are actually able to get meaningful text with the right image.
Only way out is manually editing in HTML to include a fixed images size and position that allows a click on the image to open it in another tab at full resolution.
The usual way in other places is to do exactly that but automatically.
Means the user does not need to find the right link to the image in the top bar by opeing several new pages.
Just place the image where you need it, use the sliders to adjust the size to the text and page width, done.
If a user needs it in full scale then again a simple click on it opens in a new tab or window.

A lot of all these limitations we face come down to being able to compress an Instructable into a usable PDF for download.
You might be able to still read a single sentence of hundred words in one line on your screen - but you won't be able to get it into a single readable line on an A4 sheet of paper ;)
This firstly explain why we are limited to a certain "textbox size" for our Ibles.
But also how big an image can be to make sense in relation to the text size.
Again, if you would want to get a printable PDF copy then an image of lets say 5196x5196 pixels would be well above what a normal printer can provide to it within text size limits.
As most people won't use a photo printer and glossy photo paper it makes sense to keep it to a max of 600DPI.
The downside of this is that a bunch of reasonably sized images would require more space then what is left for the corresponding text.
Hence the need for the bundling up of multiple images or using a step for each picture.
Of course there are better ways of dealing with a PDF creation of websites containing high res pictures.
Like adding the option to have one or all images added in full resolution for seperated prints or screen use.
As this is currently not possible with the PDF format only providing a compressed archive of all or all indiviual pictures at full resolution would be an alternative.
Considering the added date volume not really a feasable option in terms of costs for providing them.

If you want to include a high res option then currently the only way I know is finding the "large" image you need and then to use HTML to manually embed it where you need it and in the form you need it.
For that however you still need to consider the above restraints ;)

0
None
guru7236

14 days ago

I also wondered it ;(