62Views8Replies

Author Options:

"Bug" - Issue with image importer converting .PNG files to .JPEG Answered

Update: posting this topic further illustrated that something weird is happening with how Instructables handles images. The image as shown above shows both left and right sides with the text blurry. If you click on the image, the left stays blurry (as it should because it was) whereas the text on the right shows clear and sharp. I give up on the root of the problem, but it's frustrating how the image quality gets messed up.

I put "bug" in quotations since you never know if it's a bug, unintended side effect, technical limitation or external problem. I'll let Instructables be the judge. Regardless, I thought it might be worth bringing attention to since I'm probably not the only one to have experienced it.

While I use RAW images converted to JPEGs in Lightroom for my main project images, which tend to look beautifully, I normally use Canva to design my title images. Mainly due to being able to add text, shapes or any other elements in layers. Canva exports by default in .PNG format, which is probably the most popular image format after .JPG due to its support of transparencies and lossless compression. For that reason it's normally preferred for header images and graphics. I tend to use a ratio of between 4:3 and 16:9 to make things easier for the file uploader, as well as a longest edge of 1024px since that looks like it's what Instructables wants so it won't be resized.

Despite trying to make things easy for the uploader, my title images have always been the blurriest, noticeably more so than the rest of the images or the image uploaded. Today I finally did some tests and found out that on import of .PNG files, the uploader noticeably deteriorates the quality of the image when converting it to JPEG, even if it isn't resizing it. A picture is attached as evidence. It seems to particularly affect portions which are highly saturated or text, greatly desharpening it. It makes a good image look like it's been carelessly edited. For the image to maintain its quality, I have to take the original .PNG and convert to .JPEG on my own (Photoshop), and then upload the .JPEG to Instructables (instead of the .PNG).

As a user, what I'd optimally like to see done is:

  • Fix the importer to properly support .PNG images without deteriorating the images. It is way too popular a format to not accept. I do realize it might be a Canva color space or other such issue, but it probably wouldn't be limited to that program anyway. Nonetheless, if this isn't possible, I'd be happy for the system to simply not accept .PNG and to throw-out an error message telling me to convert the images on my own and only upload .JPG. That would at least avoid image quality being inadvertently affected.
  • Make available an up to date FAQ page where all information regarding images is available: what formats are natively accepted, what is the optimal ratio for images, what is the optimal resolution for images, to what sizes an image is resized on import, or any other relevant technical image details. I've researched this multiple times in the past and there are a lot of people with the same questions in the forum. Especially when it comes to sizes and ratios (cut off images, etc). Most of the information is from years ago (ex. 2010) and cannot be trusted to be up to date. Up to now I've uploaded plenty of 18 megapixel images when it is unnecessary given that the largest size shown, I think, is "LARGE" size at 1024px (I believe). A place to educate ourselves objectively on this particular site's preferences would be appreciated.

Anyway, thought I'd comment this since it was a relief to finally find out the origin of the problem.

Discussions

Hi, I'm a designer at Instructables and can provide some background on what you are noticing. What you are seeing is intentional, and not a bug. All images that live on the web need to be optimized (i.e. compressed) to allow pages to load quickly. This is important both for performance and accessibility across a variety of internet speeds/devices. The difference in file size from images coming straight from someone's phone or camera to what is ideal for web is huge, often a difference of 100x or significantly more if images are coming from a high quality camera. If we were to populate an instructable with those lossless beautiful images, unfortunately anyone on a slow connection would spend minutes or hours trying to load the images in your instructable.

You do not need to size your images down to 1024, we do that as part of our processing, so feel free to upload larger resolutions. That is actually preferable, as devices and contexts where your images are served changes over time, and as devices become higher resolution 1024 as a guideline will be outdated soon. Still images are converted to .jpg and optimized, and we handle gifs separately for animation. How much something is optimized depends on what we need for that specific context to be performant, which is why you are seeing a difference between the image above and what it looks like in lightbox. From my experience, optimization hits text the worst, and specifically red seems to bump file size up so it ends up looking worse than other colors for some reason. Regarding cropping, images that are wider/taller than 3:2 and 2:3 respectively are currently getting cropped in image sets, and they display in their native aspect ratio when you open them up in lightbox.

Supporting pngs for general use would be great, but they are larger in file size generally so serving them in a performant way is challenging. It's hard to keep a place where all of this information is up to date as it changes regularly, but having some basics available in the upload modal is a good suggestion. Happy to answer more specifics, but I hope that gives you some background for understanding what happens under the hood, and why we do what we do.

Thank you for the detailed response, it's greatly appreciated.

I'm familiar with the need for image optimization and compression, and I perfectly agree that it's needed. That was why I wanted to know what would be the format and size that the server would least optimize or compress. Or better said what would lead to the smallest impact on image quality once performed.

That point about future proofing is a very good one, hadn't really thought about it from that angle. Currently it does seem that the largest image resolution shown is approx. 1024x (library aside), but that of course could change with ease. That text and red issues that you pointed out is very useful and interesting information. Looking back it certainly seems consistent. That's the great type of info that's normally hard to find. Do you think uploading a higher resolution image would look better once compressed/resized? I'll admit the red text fuzziness above does irk the photographer in me. Normally my images are approx. 4000x3000, but since the title image gets resized to 306x255 I try to maintain that ratio for the title, and a resolution closer to the 1024 it will be resized to. I guess I was falsely economizing.

On a site like this where a viewer might have reason to download a PNG with a transparent background (for overlays in template use, or for superimposed schematics and diagrams, for example), I'd see it as a particularly useful feature. Currently having to upload the image in a zipped folder isn't all that great of a solution.

The fact that details about image requirements or best practices changes frequently is part of the reason why it would be so useful to have a reference page. Forum topics quickly become outdated or are generally speculative at best (Which is why your answer was great). Instructables most recent design change probably hints at some viewers giving a lot more weight to image than text, so making it easier for creators to provide more uniform images with some basics on "best practices" page would definitely be helpful for everyone.

Thanks again for the detailed response.

No problem. In answer to what is best to upload, I haven't done any thorough tests comparing png conversion to jpg before or after our processing, but in general less processing or compressing on your part is better so the image doesn't go through more loss of quality than necessary. I usually upload jpgs saved at 100% quality and original resolution from photoshop. Sometimes I will size down process shots to 2000px wide or so (plenty large for any purpose, but still smaller than originals) but only so I'm not waiting so long for the batch to upload.

Yup, that too. That seems to be a typical issue with uploaders that accept but don't properly support PNG. I know Ebay has the same problem. One of PNG's biggest benefits is support of transparencies, but for whatever reason no background tends to be set as black.

Anyway, I played around with Instructable's uploader a bit more and only ended more confused. It seems that the images are substantially compressed (and image quality deteriorated) on upload regardless of the format, only that PNG images suffer even more drastically than JPG. If Instructables is so concerned with reducing image size (a perfectly valid and justifiable concern), that's even more reason for an image FAQ page to avoid users uploading images with excessive resolution.

I don't need Instructables to support a PNG, I uploaded that one like that by mistake. But why upload a PNG, just drag/paste it on a white background image...

I understand. Though it wouldn't be unwelcome either. PNG is non compressed (higher quality) and it would avoid you having to keep a second JPEG copy or deleting the original. I've had PNGs that I've saved as JPEGs to solve the black background, and then noticed I needed to transparent background again later on making me damage the image removing the background a second time.