Pinkbike Photos - How to make them look amazing!

Oct 31, 2011 at 11:59
by Ian Hylands  

While Pinkbike is primarily a mountain biking website, it is also a site that involves a lot of photos taken by a great many photographers. With an average of over 4000 photos posted to the site every single day, Pinkbike is a busy place when it comes to pictures. While most of the images posted are shot by amateur photographers, there are also more than a few professional photographers on Pinkbike as well, and everyone regardless of their ability wants their photos to look as good as possible. So to that end I've put together a bit of info to help you make the photos you post on Pinkbike look the best.

The Basics

In order to have your photos look as good as possible on the site please keep in mind the following rules.

1. Size your photos to either 1600 or 1024 pixels on the long side. This is very important. 800 pixels also works, but in this day of larger screens most people are disappointed if a photo is only available as an 800 pixel 'thumbnail'

2. Make sure your photo looks great at whatever size you upload it (1600 or 1024) If the original is oversharpened, Pinkbike won't make it look any better. And the same goes for images that are soft, make sure the original looks good if you want it to look good on Pinkbike.

3. Embed the sRGB color profile in the image. If you want the colors to look accurate on the web make sure to embed the sRGB color profile into the image, Firefox and Safari recognize color profiles and use them, rendering proper colors.

4. Use Firefox or Safari to view images on the web, IE7 if you need to use a Windows product. Google Chrome does not have any color management as of this post, and will not give you accurate color no matter what you do to your photos.

5. Also please be sure to include your name and or copyright in the Metadata of the photo if possible.

The Details

Image Quality and Resizing

The past year I've spent a bit of time working on the image resampling and sharpening algorithm with Pinkbike's resident tech guru, Radek.
During the time that I've been working for Pinkbike there have been a few comments about images becoming over sharpened when uploaded to the site. And also the opposite, some people have said their images were made softer when they uploaded them. That's two completely opposite things, so Radek and I sat down to figure it out. Radek spent a lot of time configuring the original algorithm, and he did a lot of research. He even discovered a few things that I as a photographer really knew very little about. As a result of that the original resampling/sharpening code on the site is quite advanced, possibly even ahead of photo sharing sites such as Flickr in some ways. When I looked into what was happening I took a bunch of different examples I had seen or been sent, and looked at the original images as well as the resampled ones on Pinkbike. Then I uploaded different images and compared how they looked at Pinkbike's various photo sizes to how I wanted them to look. The results were fairly surprising. To understand them you need to know a little about photo resampling to start with. Here are the basics...

To start with some of you are probably wondering why I'm saying resampling instead of resizing. Resizing an image refers to changing the size it will print, without changing the actual pixels. Pinkbike doesn't ever make photos bigger, only smaller. When you make an image for the web smaller, pixels are removed from it to make it physically smaller, and this is normally referred to as downsampling. Which pixels are removed depends on which interpolation method you use to resample the image. Regardless of which method you use for downsampling an image, when you remove pixels edge detail is lost, and it ends up making the image appear softer. Photoshop gives a few different options depending on which version you're using, most people never even notice them and just go with the default. Here is the description that Adobe gives for the relevant downsampling options available in PS CS5:

Bicubic
A slower but more precise method based on an examination of the values of surrounding pixels. Using more complex calculations, Bicubic produces smoother tonal gradations than Nearest Neighbor or Bilinear.

Bicubic Sharper
A good method for reducing the size of an image based on Bicubic interpolation with enhanced sharpening. This method maintains the detail in a resampled image. If Bicubic Sharper oversharpens some areas of an image, try using Bicubic.

There are other options such as Lanczos or Sinc that work better (on Pinkbike we use Lanczos), but for the purpose of downsampling in Photoshop these are usually the only two that we use. Bicubic produces the nicest gradations but tends to make images look a little softer while Bicubic Sharper has built in sharpening to improve this. The problem with Bicubic Sharper is that while it works well for some images it can really oversharpen certain details and textures. The best way to downsample for our purpose is to use Bicubic, and then manually sharpen after as needed. This usually works really well, however it is image and size specific. Some images need more sharpening than others, and images need different amounts of sharpening depending on how much they've been downsampled.

On a website there is no way to control the amount of sharpening that is applied to a specific image, so we need to assume all images that are uploaded are sharpened properly to begin with. That gives us a neutral starting point with which to figure out size specific sharpening. When I tweaked the sharpening algorithm I uploaded several different images that were 1600 pixels on the long side (Pinkbike's recommended size) and adjusted the sharpening on each of the set image sizes until they all looked good. If you're having problems with the way the website sharpens your images make sure you haven't oversharpened them to start with, and be sure to upload them at 1600 pixels on the long side if possible. The algorithm that we use to downsample and create the various sizes used on the site (1024, 800, 500, and 250 pixels) is designed to work with a starting size of 1600. It applies the same sharpening to an image downsampled to 1024 pixels regardless whether the starting size was 1600 or 1100. This is the same for all image sizes. So a starting image of 1100 pixels will produce a 1024 pixel image with more sharpening than a starting image of 1600 pixels will. An image that is uploaded at 1024 or 800 pixels will look great at that size as no processing, downsampling, or sharpening is done to it, however it may be slightly oversharpened when it's downsampled to the smaller sizes.

Gamma Correction

There's more to downsampling than just simply removing pixels and then sharpening to bring back sharpness. If you take an 8 bit image in Photoshop and just downsample it 50% you physically lose a lot of the fine detail. This has to do with the way that most image resampling software interprets the brightness scale as being linear, when in fact it is not. A great example would be this image of the Dalai Lama that was modified by Eric Brasseur. He added a gray line screen to it that changes the way it looks when it's resampled. Try downloading and downsampling this image in photoshop and see what happens. Or if you can't be bothered to do it yourself take my word for it and look at the examples below. You can see the original image on the left, beside it is the image as it appears on Pinkbike at 150 pixels, and then next to that is the image that I downsampled to 150 pixels in Photoshop. Interesting isn't it...



Your scaling software rules! This is a good test of image scaling software as well. Download it and try it out in different apps at different sizes... At 100% you can still see the image with gray lines across it, as you resample it though it becomes simply a gray rectangle. This is representative of what happens to a lot of fine detail when images are downsampled. There is a workaround for this that is documented by Eric here if you're interested, although I will warn you that it's fairly technical. Radek took this Gamma issue into consideration when he created the original downsampling code, and it works well, preserving image detail better than even sites such as Flickr that still don't seem to use it. Even Photoshop itself fails in comparison when you downsample an 8 bit image. Lightroom and Aperture however both do a really good job of downsampling, partly because they usually start with a 16 bit image.

What this means for you the photographer

When you upload an image to Pinkbike a lot happens in the background. Pinkbike stores your original image, then creates and saves different versions at different sizes, depending on your original upload size. It does a whole bunch of math and applies gamma correction and sharpening during the process to bring back sharpness that was lost in the downsampling process and keep your smaller images looking as good as the full size one. What the downsampling engine can't do is figure out anything specific to your particular image, it can't tell if your image is a little bit soft or a little bit sharp to begin with. This means that it's up to you, the photographer, to sharpen your images so that they look good at the size you upload them. It's best if you upload images at 1600 pixels, although 1024 will do reasonably well also. Once they've been uploaded check the different sizes to make sure they all look good.

Metadata

You may have noticed that photos now display the IPTC and EXIF information below the photo info. EXIF stands for Exchangeable Image File Format and it's a way that standardized information is stored in photos taken by digital cameras. IPTC stands for International Press Telecommunications Council, and IPTC data is information that is added to a digital image file to tell us about the photographer and the photo. Professional photographers normally add their copyright and contact info, as well as information about the image itself including such things as the subects name and the location where the image was taken. The display of this info was initially a test we worked on, and with a lot of positive feedback we rolled it out as a regular feature.



The EXIF info displayed on Pinkbike includes the camera make and model and basic camera settings. It also includes copyright info taken from the IPTC Author or Copyright field in your images. If you don't see any copyright info you should probably make sure to add it before uploading your images in the future. For more info about adding and removing image data you can look at my previous post on the subject. Radek has also been hard at work creating a feature that sorts images by their data, you can now click on the camera model in the display and see all the images taken with that particular type of camera.
If for some reason you don't want people to see your camera settings please be sure to remove that info from the metadata before uploading your images.

We've also been working on automatically adding rider name and location along with description to the Pinkbike images straight from the IPTC info. This would take the info that you put into your metadata in Photoshop, Bridge, Lightroom, or whatever other program you use, and automatically add it to the Pinkbike photo info. For those of you that are adding this info to your photos already, You'll then only have to do it once. Pinkbike currently takes the "Trail" name from the "Sub-location" field in the IPTC and the rider name from the "Person in image" field. The "Description" currently comes from the IPTC Caption or Description field. If you don't see these fields in your EXIF or IPTC tool please upgrade to a tool that supports the current IPTC standards, more info on the standards and tools can be found here on the IPTC site.

View Photos By Camera

Curious to see the types of photos that certain cameras produce. Or looking for inspiration to see the types of photos your camera is capable or producing? We can now display a list of ALL cameras and then view the photos taken by those cameras. Check that feature out here. View all cameras

If you have any questions about photo related issues please send me a message here on the site.
Must Read This Week






71 Comments

  • + 18
 Thanks for the detailed explanation Ian, it's great that photography is becoming a bigger and bigger part of the site, and that you are eager to help the users here learn more about it. Certainly helped me to understand this better. One thing I have to ask - 4000 images a day!? that is some crazy workload!! have you guys ever considered putting a cap on the amount of images a single user can upload per 24hr period? It may help teach the aspiring young individuals to review and select their best/favourite images to share, rather than flooding the various image categories with uploads of their entire memory card from a day of point and shooting? just a thought...
  • - 5
flag cherouvim (Nov 2, 2011 at 1:41) (Below Threshold)
 Workload for who? For the web server?
  • + 5
 Every photo page comes with 3 adverts, I don't know how much PB makes from their ads but I'd think they would justify the cost of the workload.
  • + 11
 The cost of storing images and the bandwidth involved in viewing them is pretty high, and that's the main reason we don't do HD video on the site, the cost of the bandwidth would absolutely kill us. But limiting peoples photos is not something we're going to do...
  • + 11
 Holy shit, my brain is fried! Seriously, I was engrossed. Does that make me a geek? Who cares? I've recently started to use ACR to crop, and alter exposure, blacks, vibrancy etc, open file, resize to 1024 and then unsharp mask, before saving for web! Phew! Will need to think about resizing to 1600, as 1024 works well for flickr, pinkbike and facebook. All in though, go grab a beer for your work guys!
  • + 34
 Who saw the SUCKS in the Your scaling software .......?
  • - 12
flag livingkills (Nov 2, 2011 at 4:54) (Below Threshold)
 Not me..
  • - 1
 I did:P
  • + 7
 All i read was science science science .....pretty picture!!!
  • + 7
 You should check out Lightroom, it will make your life a lot easier. Resizing and sharpening for web is all done on export and can also export directly to flickr and facebook. Someone needs to develop a Lightroom-Pinkbike export app!
  • + 1
 Great Post!! I was actually into photography before getting into mtb and I still learned quite a bit in this post.

If you have a Mac, you can quickly and easily generate a custom script (with Applescript) to convert photos for pinkbike, etc. It will appear in the menu when you right click on the file! It especially useful when you are resizing and changing file type for a whole batch of photos. (Im sure there are better ways to do this but definitely not as fast)
  • + 1
 lol i used paint to scale, and rules pops out.
  • + 1
 that's good to know about Paint!
  • + 1
 i saw sucks and rules??? whats that about.
  • + 1
 it's supposed to be like that. its to give an example of bad software.
  • + 1
 i saw both at the same time
  • + 1
 It's normal to see a bit of each, I usually see various versions at different sizes. What you don't want to see is just sucks, and rules is best.
  • + 1
 my scaling software rsuuckless?
must be somewhere in the middle
  • + 4
 Good to see photography becoming a serious slice of PB - facebook needs to start thinking about their smapling as my stuff always come out over sharp on there. Ill step a foot out and say ive had no issues on here though - Exif is also a great add on for nerds like me!
  • + 0
 Yeah fb's image processes has always been a freaking joke. Btw the instant you upload photos to fb...they own them.
  • + 1
 NorCalNomad - FB has to own that version of the image to host it, they can't use it on any other website in any other way and can't sell the image on.
  • + 1
 im always checking the exif of photos aha Razz
  • + 1
 Wow! Thanks for the info. This explains why all my facebook uploads are overly sharp. I'll start resizing them prior to upload. It is baffling that Facebook, the largest photo sharing site in the world, has such a crappy Implementation.
  • + 3
 facebook is slowly draining everyone's souls
  • + 1
 Not necessarily, if Pinkbike has 4000 or so photos uploaded every day, then facebook has millions. And they keep their costs down by lowering the quality of most photos. I think they started allowing you to post higher res images lately, I'll have to check that out.
  • + 1
 Facebook's high-resolution images aren't exactly good. Flickr used to set the standard for hosting high quality; nice to see that PB is taking a run at that crown
  • + 1
 Facebook's high resulution images are the same as the low resultion, I tried to upload two photos, one with high resolution and one with low resolution, I can't see a diference between them.. I think its only for promotion
  • + 1
 Sandro - I thought it was just me at first when I tried the uploads. But you and some other people have said the same thing
  • + 1
 Before pinkbike improved the image quality of uploads I used to always just upload to my flicker. Then download the large image (usually around 1024x768 ) then upload to pinkbike. like this old one of Messere www.pinkbike.com/photo/2832869

Good to see pinkbike taking the time to make sure our photos look there best! And great write up Ian!
  • + 1
 Thanks for the article! I'm studying photography now and have the teachers taught me that uploding a photo somewhere that forces you to resize the pixels of the image, it lose quality. But I wonder, if I upload the picture exactly with the size that will be seen in pinkbike, the image also loses quality?
  • + 1
 no, if you upload the image exactly the same size that it will be viewed, ie 800 pixels for the standard view, then no processing is done to the image at all, you see what you uploaded... Let me know if you're getting a different result, that would suggest that something strange is going on...
  • + 1
 that's what I meant, so to get the best quality for every size the photo must be reduced to 1600
  • + 2
 Yes, because that's the size that we used when we set up the sharpening. Everything is adjusted for an original image size of 1600 pixels.
  • + 1
 Ok, thanks!
  • + 1
 good article. 99% of people out there don't really care about color management. Attaching a profile, resampling in gamma correct colorspace with a sinc filter will not make a difference for 99% of people out there reading on crappy, uncalibrated tft's. (btw, why does photoshop only supply gaussian filters? wtf..) even some pro photogs mess up on the color management issue. even in this case, you have to be using a properly color managed operating system and use applications that respect color management. there will always be some miscommunication when sampling analog data into a digital state then back on different devices. anyway, good work Smile even large photography sites (cough, flickr) don't do gamma correct resampling. that's one of the more misunderstood, but subtle issues especially for dark images. i'm guessing you use imagemagick on your machines.
  • + 1
 Thanks, and yes we use imagemagick...
  • + 1
 I write this comment from a computer with a color calibrated LCD monitor. Such a shame to think that after all the amazing work the photographers and staff at Pinkbike have done to bring the best and highest quality images to its users, some people are viewing them on a crappy, badly calibrated, fuzzy CRT screen. I learned a lot from this article. Keep up the great work!
  • + 1
 Hey, I have an idea. Why don't we upload pictures with good lighting, good color, and good subject matter? That might have a little more influence than the program you used to re size ur image. Oh, and hot chicks.
  • + 3
 Now Ians done how to get quality pictures, Larock should do one for videos Salute
  • + 2
 It's so funny... I follow most of those rules and yet MY pics never seem to get more than 100 views
  • + 3
 maybe it's the actual subject matter of your photographs? all the technical know-how in the world doesn't make you a good photographer.

excellent write up, will be using it all when i fully get my head round it!
  • + 1
 Another though, it may be because you only have 11 friends, so only 11 people are getting a notification that you uploaded and the rest of your views are prob coming from people just browsing. So if you want lots of people to see them market yourself by becoming friends with lots of people...
  • + 2
 Exactly, people can only view your photos if they see them, and only your friends see your photos initially. Lots of friends equals lots of views for a good photo...
  • + 2
 Well, thanks for the advice. I probably should have more friends. Thanks.
  • + 2
 I'll be soaking all this up for sure! Encouraging and motivating! Thanks Ian!
  • + 1
 No problem, thanks every for the support, let me know if anyone has any photo related issues on Pinkbike.
  • + 1
 Will a feature ever be added to delete photos from your trash folder? I would think you could save a lot on hosting space costs if so... Even if you just did it as a batch purge from everyone's trash folder every month or so.
  • + 1
 Yes and then you forget to log out of Pinkbike somewhere and someone comes in and deletes all your photos, that's a great idea! It is something that I have thought about, but the more I think about it this system works. The few thousand or tens of thousands of images that get deleted really wouldn't make a big difference in storage costs... Having us do a batch purge every now and then is a different idea, something that might be worth thinking about...
  • + 2
 Very well written article Ian. Sure a lot of people will appreciate the effort.
  • + 1
 Awesome article Ian, and Great work to you and Radek, the proof is in the pudding!
  • + 1
 great article, thx Ian! It will actualy be helpful for my job! You got some good "hand" for writing and explaining Big Grin
  • + 1
 thanks, it took a bit of work to write and rewrite so that it was hopefully easy to understand...
  • + 1
 sorry i that have a life and no time to checkup all this photo crap..
i make a pic and upload it..you like it.. fine...
you dont like it.. fine too..
you dont like it cause its not picture perfect.. you should let yourself get mentally checked..
computers should make life easier.. to me it seems quite the opposite these days..
till now it all works fine imo.. even all the pics i made with my phone,, Salute
  • + 1
 I think it was more of a : if you do care, and you want the best out of your work when you post in on PB? - here's how you do it. I couldn't care less for PB uploads, but I'm sure there's plenty that do and thumbs up for them.

Thanks to Ian's article I can ALSO improve quality of my jpgs when printing them to PDFs, especially when changing file size and stuff for sending in emails Wink All he writes about is present in 99% of graphic programs with same nomenclature
  • + 0
 Cool, 1600 she will be. Ian where are all the Leica S2, and Phase One IQ 80 images? Sounds like a project for you and yes I am serious.
  • + 1
 That would be a good project... First I'd need to shoot with a Leica S2 or a Phase One so that I could have a point in the database to start at...
  • + 1
 A simple Gaussian blur before resizing can help reduce aliasing and makes scaled images look far more acceptable
  • + 2
 Yes, but that's a very complicated thing for most people to do. I usually only do it when dealing with an image that someone has sent me that's overly sharp to start with. With a properly edited image it doesn't really make much sense, I find I get far better results from a raw file just using Lightrooms image tools, and way less work.
  • + 1
 nice article! i will certainly appreciate more photo tutorials even though this is pink bike!
  • + 1
 Dayum, someone has been busy Razz

Is this all done with custom libraries or publicly available? and which language(s)?
  • + 1
 We use ImageMagick on the server...
  • + 2
 Yeah! i was looking for this long time ago,,,gotcha! thx ian!
  • + 1
 Thanks for the post man! excellent article
  • + 2
 You're very welcome!
  • + 1
 Excellent article, thanks Ian!
  • + 0
 Such a great explanation! helped me understand a lot Smile Now I just need facebook to take a bit of time looking at theirs.
  • + 1
 i saw their software rocks...
  • + 1
 wow...this is really really helpful!! thank you
  • + 2
 Awesome post Ian!
  • + 1
 great article!
  • + 1
 use the photoshops!

Post a Comment



You must login to Pinkbike.
Don't have an account? Sign up

Join Pinkbike  Login
Copyright © 2000 - 2017. Pinkbike.com. All rights reserved.
dv56 0.051426
Mobile Version of Website