🐈 Community
» Forums » Freelancers » Re: Portfolio Thumbnail Guide for Perfectioni...
Page options
bogdanradenkovic
Community Member

Portfolio Thumbnail Guide for Perfectionists

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:

Upload Thumbnail UI

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:

After Cropping

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!

tool.jpg

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

 

 

 

 

 

ACCEPTED SOLUTION

Hi Md. Ramzanul,

 

I checked your portfolio thumbnails and didn't find any issues with them. Could you please submit a ticket to customer support with more details and screnshots of errors you see in your portfolio?

~ Valeria
Upwork

View solution in original post

77 REPLIES 77
kandytech
Community Member

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.

 

 

 

 

 

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. Cat Very Happy

__________________________________________________
"No good deed goes unpunished." -- Clare Boothe Luce
tasamil
Community Member

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.

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

reichstephen
Community Member

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.

 

 

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): 

 

 

 PSD

 

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]

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.

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!

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.

If you aren't doing it already, be sure to  navigate to the file manually ("drag or upload project thumbnail"). For whatever reason, drag-and-drop operations fail when trying to upload thumbnails (but not project files).

Thank you very much John K.

I did the same as you mentioned. And wow the job is well done. My thumbnills are now looking perfect. As I never used photoshop so I find an online tool [ https://www.photopea.com/ ] which did the job. Thanks you both.

 

What I did:   

* At first resized image 297x197

* Then resized canvas 297x297. Point the image in center.

* Upload to upwork and and drag cropping tool to center

* Done

Thank you a  Lot for leaving valuable info.
It really helped me.

ziya750
Community Member

Why portfolio thumbnails works so buggy? As long as i see, they have changed the ration and proportions of thumbs few times and now they look awful and wrong cropped.

 

Which is exact size for thumbs and shall i re-upload them or shall i wait until you guys will fix it?

 

+ same thing about thumbnail of profile pic! It looks very distorted whatever i'm trying to do it with it.

 

Any suggestions? Thanks!

Hello there! Please review the whole post, you have basically everything you need to make a good looking portfolio. It's a huge advantage over others who didn't take their time to organize it and make it beautiful. 

In short: image should be 1x1 format, 1188px x 1188px (thanks Jeff), and see my guide for creating perfect thumbnails, you will need some photoshop wisdom.

sivavranagaro
Community Member


@Dan R wrote:

Hello Fellows!


It says "Drag frame to adjust portrait" (obviously the same dialog for setting the profile photo).

 


Hey Dan, you have incredible portfolio. Thanks for knowledge shared. I appreciate this.

Anyway, I think this is meant for portrait vs. landscape ratio, and not portrait as in photography of a person's face.

____________
Don't correct my grammar!

Hey Vesna, thanks for landing on my profile, thanks for compliments too!

About "Drag frame to adjust portrait" is definitely a misnomer (even if they thought about the orientation, thumbnails are not in portrait but in landscape aspect, and the crop tool is in square aspect--which is neither portrait nor landscape).

This post summarizes everything about portfolio images, also works for profile pics.

Thanks a bunch!

ziya750
Community Member

My post is actually moved here, before it was a seperate topic.

But that's nice that i've found this topic and thanks for the help!

 

BTW. Still not sure why we have to do so much thing with such an essential function to get normal thumb. Why upwork just not fixing it? Seems to be so simple thing to-do.

Can a mod please confirm that this new aspect ratio is here to stay? I spent time creating mine to fit properly in the aspect ratio that existed before and really want to avoid spending more time if this will be rolled back to what it was.

 

 Hi All,

 

Our engineers are aware of the issues with the resolution and the way thumbnails are uploaded to portfolios and they are working to fix it. The fix should be released within a month.

 

Thank you for your patience.

~ Valeria
Upwork

Hey Valeria, that's great news. Can't wait to see the updates. Wishlist: 5x4 thumbnails, with no padding :- )

Did it release yet?

Geo Maria George
ckortjohn
Community Member

this is relieving to read and very helpful. great job!

am i crazy to think with a budget like upwork must have that these kinds of problems shouldnt exist at all?

rojus
Community Member

Hi Dan,

I would love to see this template or just some tips how to deal with those thumbnails.

 

 

Hey Rojus, well come to the community!

I tried to find the file and send you via private message, but I will have to ask someone else to do so because I can't find the **bleep** file o.O
If no one has a sample to send you I will take 3 mins to make a new one, it's that easy... If you follow the first page of posts you will make it.


BTW I noticed that it came up to Upwork's ears, profile images look better now (at least there is no place for "subtitles" :D) I hope that they will solve the upload and cropping to and send this thread to history. Go Upwork! 🙂

Thank you. I did follow the posts, but my issue with the thumbnails is more about the upscaling they do than the actual cropping. I tried this and that, but I'm still stuck with blurry graphics. Do you know a fix for that?

Yeah, go upwork..  *sigh 

 

 

alru
Community Member

Same problem. Blurry thumnails.

bryant_karen
Community Member

Hi and thanks for the detailed steps and research you've done.

 

Unfortunately, I'm having the problem that the thumbnails are really blurry too. Your steps have helped with regards to the cropping (although it's still a bit off for me!). I'll try raising this with Upwork, along with everyone else who has this issue, and hope that they can fix their downsampling.

 

Cheers

Alex and Karen, I too had a lot of blurry thumbnails. When I did a reupload on the worst of them, they weren't blurry anymore. Can't explain why this worked, but it did.

 

I think someone mentioned it's better to upload by navigating to your files, rather than dragging and dropping, which is what I did. So ... you might want to give that a try.

Thanks Virginia,

 

I just tried with one of the worst ones and it's still blurry. I tried with a small file and a larger one. I tried a jpg and a png. I tried navigating to my files, saved it and then tried reloading the page... still blurry. I've sent a request to Upwork but I realise they probably get a lot of enquiries each day. Hopefully they will be able to address this at some stage.

 

I appreciate your advise and help.

Hi Karen,

 

The team is aware that some users experience issues with portfolio thumbnails being low resolution and they are working to make sure it works well for everybody.

 

We appreciate your patience.

~ Valeria
Upwork
alexandrumolnar
Community Member

Hello everybody!

 

The aspect ratio for the upwork thumbnail is 1,33 x 1

 

I really hope it helps.

 

Have a great day!

Alexandru Molnar

polanco_theresa
Community Member

My thumbnails are suddenly blurry, previous ones appeared fine, maybe their colors weren't showing it as much as this new project I'm trying to upload. I've tried various resolutions and sizes, nothing works. 

 

Upwork needs to fix this or it will lose it's customers on all fronts!

Hi Theresa, 

 

Were you able to make your thumbnail pictures look better by re-uploading them? Please, let us know if it worked for you?

~ Valeria
Upwork

My portfolio thumbanil don't work properly still now please help to solve this. thanks!!
@Valeria K wrote:

Hi Theresa, 

 

Were you able to make your thumbnail pictures look better by re-uploading them? Please, let us know if it worked for you?


 

Ramzanul

Hi Md. Ramzanul,

 

I checked your portfolio thumbnails and didn't find any issues with them. Could you please submit a ticket to customer support with more details and screnshots of errors you see in your portfolio?

~ Valeria
Upwork
artlover88
Community Member

I searched out this topic because I was having problems uploading thumbnails as well. There's already been at least one solution posted so I hope this isn't redundant. I found if I size a canvas (in Photoshop) to 720x720 pix, then place my image, sized no higher than 460 pix tall, in the middle (yes, leaving lots of white space around the edges) this allows me to post a thumbnail image that I can properly crop. It's weird but this seems to work. I hope this helps someone who is just as frustrated as I was. Smiley Happy

bhawin2008
Community Member

Thanks Dan for the post. It's a shame that upwork can't fix this apparently minor problem on their side instead of thousands of freelancers having to resort to hacks that can make their portfolio images look decent. 

Hi Bhavin, 

I checked your profile and do not see any portfolio on your portfolio section. Could you please share the portfolio items you are trying to upload via a private message so that I can go ahead and check it?


~ Avery
Upwork
glogana
Community Member

Hello,
I have checked every size ... but it is still blurred .. don't know what to do ...
Ania G.

Latest Articles
Featured Topics
Learning Paths