Wow! On May 20, 2013, Flickr had a major update and redesign with a mobile friendly layout. As a result, I went to checkout Flickr and noticed a new generic cover photo and an increased space for the profile photo. The new layout looked great, but the CANbike profile image and cover photo needed to be updated.
The Short Version
- Flickr scales the cover photo to the width of the window and then crops it to a height of 234px.
- Optimal cover photo size is 2048×492.
The Long Version
- Profile Photo – 300×300
- Flickr Cover Photo Dimensions – 2048×492
- Flickr Cover Photo – Upload File From Computer
- Flickr Cover Photo – Dimension Changes! 2048×234 – 2048×492
- Flickr Cover Photo – Algorithm for Dimensions
- Flickr Cover Photo – Smaller then Window
Profile Photo – 300×300
The first thing to change was the profile photo. When clicked to update, a page with guidelines appeared. It suggested photos up to 300×300. No problem. The upload button was clicked and a higher resolution image was uploaded. From there a square region could be selected, or the whole image could be used.
Once the region was confirmed a notice stated that it may take a few minutes to update the profile image. Okay, after a few minutes and a click of the refresh button, the new profile image appeared.
Flickr Cover Photo Dimensions – 2048×492
Now the cover photo is a new thing for Flickr. As per instruction, the Edit Cover Photo button was clicked. Alas, no suggested dimensions were given about the new cover photo.
The only options were to pick recent photos from the photostream as a cover photo. Moreover, when an image was selected a warning popped up. Apparently, the selected images were too low in resolution. Of course, the cancel button was selected.
Fear not though! After experimenting around it was discovered that images of dimension 2048×492 will fill the space reserved for cover photos. Great! With a known image size, a cover photo was made with Gimp.
However, there was a catch. When selecting Upload a Photo, it uploads the image to the photostream. This is not like the profile image update.
The goal was to upload an image from a file and not have it appear in the photostream. After experimenting around, a solution was found.
Flickr Cover Photo – Upload File From Computer
- Click Edit Cover Photo
- Click Upload a Photo
- Select the photo
- Go to the photostream
- Click Edit Cover Photo, again
- Select the first file, which should be the cover photo
- The new cover photo should appear
- Go to the photostream, again
- Click on the first photo in the photostream to edit it
- In the right hand corner, click “. . .” and select delete this photo
- Go to photostream, again
Now the image disappears from the photostream, but remains as a cover photo! Yay!
Flickr Cover Photo – Dimension Changes! 2048×234 – 2048×492
Depending on the window size or device (desktop, mobile, etc), the cover photo is dynamically scaled and cropped.
- Widest optimal mode: 2048×234 dimensions
- Narrowest mode: 2048×492 dimensions
Flickr Cover Photo – Algorithm for Dimensions
It’s very simple and the cover photo is displayed as follows:
- Flickr scales the cover photo to the width of the window
- Window has a minimum width of 975px
- The scaled cover photo is then cropped to a height of 234px
Okay, the smallest window (narrowest cover photo) will have a cover photo dimension of 975×234. Therefore the height of a 2048px wide image should be 2048*234/975 = 492.52. Rounding that up to the nearest pixel is 492. Hence the 2048×492 dimensions.
Flickr Cover Photo – Smaller then Window
Q: What happens if the window width is larger then the width of the cover photo?
A: As per the algorithm, Flickr will scale the image to the larger window dimension and then crop the height to 234px. It will have the effect of enlarging a photo and looking at it from a close distance.
Given the 2048×492 cover photo, it will look great up to a window with a width of 2048px.
As the window width increases beyond 2048px, the cover photo will be enlarged and start to look blurry and zoomed in. However, 1080p monitors have a resolution of 1920×1080px. At full screen, the window width will be less than 1920px with the addition of windows decoration and scrollbars. Hence the recommendation of a 2048×492 cover photo.