In order to publish your photos in the right format on the web, you need to know what they are about. This fifth article in the publication pack brings together some tips to help you see more clearly. You can read the whole dossier here.
Be careful, this subject may seem complex to you, although I’ll summarize the essentials. If you are angry with the technique, take a step back and read it several times.
Publish your photos in the right format: file type
RAW, JPG, TIFF, PSD, … there are several photo formats. On the web, the most standard format to publish a photo is JPG. It is often the only one allowed. It is called “Allowed” because it is the only format that a web browser can display. I leave aside the PNG and GIF formats which are not photo formats in the first sense of the term.
The RAW is not readable by a browser. Forget it, it’s not a “photo format”. The Tiff is not readable either (except without Safari, and again). The PSD, Photoshop’s native format, is not the right candidate either.
So you need to convert your photos to JPG.
Here we are talking about the size of a photo in pixels. A 24 Mp camera produces photos of 6,000 x 4,000 pixels. That’s their definition.
For the web, you need to reduce the definition to fit the definition of the screen that will be used to view the photos. The problem is that there are many different screens and each one has its own definition.
Computer screens, tablets, smartphones or TV screens have different definitions, among which (non-exhaustive list) :
- 1280 x 800 (13″)
- 1366 x 768 (15″)
- 1440 x 900 (19″)
- 1920 x 1080 (HDTV 1080)
- 1920 x 1200 (24″)
- 2560 x 1440 (several sizes)
- 3840 x 2160 (several sizes)
It is impossible to choose a definition in advance because you cannot know whether your photos will be viewed on a computer screen of 24″ (inches) or on a smartphone screen. Moreover, recent smartphones have the same definition as an HD TV (1920 x 1080), you see the problem?
Also be aware that the higher the resolution of the published image, the more it can be reused. If the photo is “stolen” from you, it can be reused on the web or on paper more easily!
So you have to make a personal choice. On my site, I publish with a definition of 800 pixels (for the largest side). This prevents me from managing too large files (the more pixels there are, the larger the file size). If I want to show more details, I publish in 1024 pixels.
This reduced definition helps the image loading time. It’s good for SEO. It’s also faster to load on smartphones when the 4G is … 2G.
Too often confused with definition, the resolution of a photo is the number of pixels per inch it contains. The inch is the unit of length that is worth 2.54 centimetres.
The resolution is expressed in “dots per inch” (DPI) or “dots per inch” (PPP). The higher the resolution of a photo, the more information it contains. Resolution has nothing to do with the JPG compression ratio.
I warned you, it can be a headache.
The definition is an absolute value (number of pixels).
Resolution is a relative value (number of pixels per inch).
The resolution of a photo defines the size of the printout when it is printed. On a screen, the resolution does not matter, in fact an image pixel is displayed on a screen pixel. A printer can more or less “squeeze” the ink drops, a screen cannot “squeeze” the pixels.
When you convert your photo to JPG, you should therefore consider the definition and not the resolution:
- 1024 pixels or 800 pixels,
- but not “72 dpi” or “300 dpi”.
In practice also take into account the size of the file and its definition, this is more important than the resolution that we make fun of for a screen.
In other words, a photo of 1024 x 683 pixels “weighs” 2 MB, whether its resolution is 72 dpi or 300 :
1024 x 683 pixels in RGB (3 layers) = 699.392 x 3 = 2 MB to within a few bytes.
Are you still following?
Another question arises when you publish your photos: should you publish them in landscape or portrait format?
The answer is not scientific: you do what you want. These are your photos.
If you have made portraits in portrait format, post them in portrait format. If you made landscapes in landscape format, post them in landscape. But if you want to do the opposite, you can do so.
However, a few precautions must be taken. You now know that the definition of an image is an absolute value, 1024 pixels for example for the largest side. If you choose the landscape format, the photo will occupy 1024 pixels in width on the screen. In portrait, it will occupy 1024 pixels in height.
The question of ease of viewing arises.
A landscape format requires a larger screen width.
A portrait format requires a higher screen height.
On a computer screen, wider than it is tall, the scenery looks great.
On a smartphone screen, higher than it is wide, the portrait looks great.
So you need to know if your visitors are consulting your site from a computer or rather from a smartphone. No one being a fortune-teller, you must refer to the statistics of your site’s traffic (use Google Analytics). As an example, on my personal photo site here is what I see:
- 59% of visits are made from a computer,
- 34% from a cell phone,
- 7% from a tablet.
These are average values on the web, if you don’t have data for your site, you can take them into account. I can’t draw any conclusions from these values, but since I’m more interested in landscape format than portrait, I publish in landscape format.
You should also know that on a smartphone screen, the landscape format occupies the entire width, its height is reduced. Very detailed images are difficult to read. Hence the success of minimalist photos on Instagram, which favours a visit from a mobile phone. The square format is king, the portrait format goes very well (although you have to crop in 4:5).
What do you do when you publish your photos in the right format?
These few notions should allow you to see more clearly. If not, here is a summary.
If you post your photos on your site or your gallery :
- prefer the JPG of 800 or 1024 pixels,
- Reduce the size of the photos so that they do not exceed 150 KB with 800 pixels (use the JPG compression rate),
- forget the resolution,
- choose what you like for the format.
You will then have “correct” files for the web.
If you post your photos on a sharing site :
If you post (again …) your photos on Facebook :
- Facebook decides for you and compresses your files as much as possible,
- Don’t worry, just avoid definitions that are too high to limit the risk of reuse.
If you post your photos on Instagram :
- Same with the exception that the smartphone screen is small,
- prefer photos in vertical 4:5 or square format.
Which I don’t do because I hate having rules imposed on me.
We’ve got three things left to do to wrap this up:
- social networks,
- the right to the image,
- photo protection.
They are the subject of other publications, you can consult the complete file by clicking here.
Any questions on this subject? Remarks? Use comments.