Portfolio Thumbnail Guide for Perfectionists

[Dan R]

Hello Fellows!

This is my first post ever on the community. I writing just to say thanks to Upwork developers for defacing my portfolio item thumbnails. I thought that older interface was bad—the new one proves that you can always make it worse.

Two weeks ago I took a whole day to sort out my porfolio, made crops that will fit into thumbnail boxes, and it looked pretty nice. Three days after, just came back to see how my portfolio is neat and tidy and got a minor heart attack—my thumbnails are re-cropped, compressed like hell, looking like child-play.

It took me 20 minutes for good to understand what's the logic behind the crops (I am into UX/UI), try-miss technique and I found how it works. Long story short, here's a brief explanation. Dialog looks like this:

It says "Drag frame to adjust portrait" (obviously the same dialog for setting the profile photo). Okay, no worries—use the crop function (square) and try to crop it as good as possible (although it's always challegning to fit design into square: monitors are 16:9 now, mobile devices have short width, long height). Also, there is a nice circle that shows how it will look in circle (it's just in case if you are curious how your thumbnail looksin circle, it won't appear anywhere on the site). 

You click "Save" and you get this:

Your image is cropped now! And here's how it looks. You had 1:1 crop frame, and 1.56:1 is what you get. Not so bad, one side is not significantly longer than you were presented in the previous screen (only 56%).  Also, due to savings image is compressed to 12kb (JPG compression is obviously set on 50). But it looks like it's 2kb, not 12. Right sample is the same image, exported from Photoshop, same size, and noticeably better quality. Also, thumbnail frame has a different aspect compared to photo.

[ offtopic for developers ] It seems that images are not cached or saved, instead they are generated every time someone opens your profile. Sometimes they load, sometimes they don't. I think that logic behind that is that you save on storage (thumbnails are purged after they are displayed).  You save on space, you waste processing power on image-resizing, which is cpu intensive. Kind of weird logic to me.

My Solution

It's good to know that the vast majority of good designers are OCD type. And want their portfolios to look perfect. At first, I wanted to submit a ticket for this issue, but then thought "who the hell will give a **bleep** about portoflio thumbnails?", so I decided to go the long way—find a solution to trick the devil's crop box. And here it goes! I used html/css inspect tools, a few calculations, few drops of logic, and here's the magic formula!

I made it! Looks great again (okay, great for 12kb). What kind of soccery is this? Well, I created a photoshop template which is square size (just like crop tool) and has two rectangles that block area that will be actually cropped, so you can acutally see what your image will look like. I can make a fortune from it! If everyone here gives me 1$, I would have millions. Great product. Sorry for bad humor, just kidding—It's attached in this post.

Download it for free now, once in a lifetime chance, and so on.
Link: **Edited for Community Guidelines**

--- TLDR / Summary ---

I find that thumbnail upload for portfolio items is a great example of bad User Interface Design, and I wrote a long post to prove it. I do not have ANY intentions to be offensive. Instead, I want to make this place better and comforable to work.  Even more straightforward—I am willing to offer my free time and design and code the whole interface completely free of charge, if you want to (i'm also into PHP, LAMP stack, with decent image resizing library it's few hours of work).

 If Upwork staff find this offensive, those were not my intentions—I just love Socrates Mayeautica, irony and have good will. I really appreciate what Upwork did to my life, I quit my 5d/8h job (the weird part: I was a physician in Serbia—that means 40-60 patients daily, 400$ monthly, or 1.25$ per hour for an utterly difficult job, at the end of the day it pays off when you have two very different degrees). Now I have time to write long community posts (at least on weekends).

I hope that you enjoyed my very first community article. Feel free to join the discussion and share your thoughts!

Love you all, have a nice weekend!

Dan

[Chamira A]

Thanks Dan,

It has always been a bit of a trial and error to get the portfolio images lookign decent.

I am going to try out your template - shame it has been removed.

[John K]

Dan,

Amazing post! Even though your PSD template is gone. However, your post enabled me to find a simple workaround that works perfectly. First, crop/resize image in Photoshop to be 297x190. Next, use Image > Canvas Size to resize it to 297x297. Upload result to upwork, make the crop frame full height & centered, and result will be the 297x190 you started with in your portfolio. 

[Natasa M]

Apropos " I was a physician in Serbia—that means..." 

Not for my doctor but then again I use private healthcare and pay private insurance. I respect that it might be your experience, but that doesn't mean the same thing for everybody obviously.

[Theresa P]

That made my image look even worse! Maybe in a year the thumbnails on Upwork have changed what they need to upload properly.

[Stephen R]

Thank you! 

I have written off Upwork portfoilio. Its horrible.

I just throw art up and hope for the best.

Now i will use your recomendations.

You would think Upwork would have a help page portfolio specs.

[Dan R]

Hello Guys,

I'm still having trouble with this community thing. Had an adventure with "accept" button (had no idea what it does, but had to click it to find out haha, so I selected some "answer").

John practically explains how to do It (also have no idea why they deleted my psd), i did it a bit different,

it works as a template and can be used faster on the long run (dimensions are like John proposed): 

 

I don't know why they removed my link for download, and if there is any way to share the link according to community rules, please advise!

Thanks to everybody!

[off-topic: a short meditation on modern medicine, careers and human rights]
P.S. I see that Natasa disagreed on my "physician in Serbia" statement: yes, this is a generalization (which means that applies to the vast majority of physicians in Serbia, not all). There are better opportunities, of course, but it's a very uncertain and steep carreer path. I am happy with my current career and I don't have idea to go back (which is not so unusual these days, I see that a lot of doctors quit clinic and work in healthcare startups, especially in SF Bay area). Although I hold very liberal standpoint for the most issues (free choice of jobs, pensions, taxes, banks and other second-grade stuff, you name it), when it comes to health, social help and other fundamental issues that directly affect one's chance to exist/survive I think that everyone deserves the same treatment (that was also Hippocrates' idea). I'd be happier to die like human than to fight with insurance company to pay my life-saving surgery or something.
[/off-topic]

[Jeff G]

Great work guys! Your tips helped me get around the cropping issue.

For overcoming Upwork's rough image resampling, try rendering the thumnails at 1188x1188 resolution (297x4).

To summarize, here is the full process (in brief):

1. Crop the original image at a 297x197 aspect ratio.
2. Resize to a square canvas
3. Save as PNG-24 at 1188x1188 resolution; upload.

[Dan R]

Hi Jeff,

That info is golden! I tried all sorts of sizes, formats and compression rates to get decent quality, but couldn't trick it... Thanks again, will try now!

[Luis C]

All this would be great... I suppose... if I could even save my thumbnails (for the nth time)... all I get is a something went wrong message.