WHY DO WE PREPARE IMAGES SPECIFICALLY FOR ONLINE USE?
It’s very important we prepare our images properly before we publish them online. In summary, this has to do with reducing the file size and yet retaining its quality. This deliberate act of ours helps to optimise the loading time of our websites and ensures that whatever file we prepare, the quality is maintained after publishing.
The following image formats are considered while preparing files for online use.
This could either be lossy or lossless. When an image undergoes lossy compression, it means that the resultant image size is reduced and retains the same quality as the original copy and is seen at close range. This makes it ideal for web use.
For lossless compression, the resultant image retains the same quality as the original but with a larger file size which makes it not so suitable for web use.
There are three major image file types used for web purposes; they are the JPEG, GIF and PNG. They all have their advantages and disadvantages.
This is the most preferred image file type used on the web. It’s perfect for photographs because it provides a huge colour palette to play with. You can use it to store images that contain gradients, millions of colours, HDR, etc. It’s a lossy format and is stored in any quality (low, medium, high) but they don’t have support for transparency.
This is another popular image file type used on the web. it’s a lossless file format and there are two types namely PNG-8 and PNG-24. PNG-8 can store up to 256 colours while PNG-24 can store millions of colours but with a larger file size. The primary advantage of the PNG file type over the JPEG file type is that it supports transparency.
This is a lossless file format. It can save up to 256 colours. The format is a bitmap which means it consists of tiny pixel squares. A GIF image may contain more than one frame so it could be animated. This file format was later re-packaged and re-introduced as PNG
Images have a file size measured in kilobytes (KB) or megabytes (MB) and a file dimension measured in width and height (in pixels). You can think of them as the weight and size of the image.
SAVING IMAGES FOR THE WEB
There are so many applications that could be used to produce this but we’ll narrow our focus down to just a few important ones that concern us as photographers.
- Adobe Photoshop Lightroom
This is a popular image editor used by professional photographers and amateurs as well. It has a user-friendly interface and it’s very functional. After launching the software, you go to your top left corner and select File>Export or use the keyboard shortcut Ctrl+Shift+E and the export dialog box pops up which displays two columns. The process begins with the options on the right column.
This helps us define the location/file path to which exported images are saved. We could even choose a location anywhere on our internal hard drive or an external path.
This row gives us the option of re-naming our files during export. There are a couple of options in the drop-down menu you could as well choose from.
This area allows us to specify the file format to be applied, for this purpose, we’ll stick with JPEG. The quality should be between 75% and 100%. The colour space for web is sRGB. We also have an option of setting a definite file size which could always come in handy.
Majority of the smartphones that are manufactured these days come with a standard screen resolution of 1920 x 1080 pixels so I’ll want to select the Resize to fit option and choose long edge; set the size to 1080 pixels and resolution to 72 pixels per inch (this is what the web sees. Anything greater than this is a waste).
In this option, I leave it at sharpen for screen. The Amount is set to standard. In some cases, you may decide not to sharpen depending on your post-production workflow or use a higher amount of sharpening.
For Online use, I usually include all metadata. There are other options you could choose from when you click the drop-down menu.
It’s always advisable to use some form of watermarking on your images before sharing them online. This could be in form of a text or a logo. Using watermarks are good and its use is also a matter of personal preference. Some photographers use this while some don’t. We’ll be discussing this in detail in a future editorial.
This row allows us to tell the application what to do after exporting the images. I usually leave it at Show in Explorer. This ensures that the export folder where the images are stored opens up for me to view my job after exporting.
Having gone through the process of exporting images for the web using the Adobe Lightroom desktop application, we can go ahead and save these settings as a preset so we use it subsequently when the need arises. To do that, we’ll go to the left column and click the Add button below. This brings up a dialog box to enable you to save the name of the preset and under your preferred folder. When you’re done with that, you click Create and it’s saved.
The cool thing about this is that you can apply it to a huge number of images at once as it executes this command during export.
This is pretty straight forward also. To prepare our files for web use, we go to the file tab at the top left corner of the application , when we click it, we go to the Export>Save for Web (legacy) option or just use the keyboard shortcut Alt+Shift+Ctrl+S; the export dialog box pops up and here we can control parameters like the Image type, Quality, Color space, Image size and Metadata info to be included. After putting in our desired parameters, we can now save.
In Photoshop this is easily done on a single image. Batch processing files in Photoshop isn’t as straightforward as it is in Lightroom but we’ll be covering that in detail in a future editorial.
That being said, I hope we’ve been able to learn something new from this Editorial. Have you been doing this? what other means have you been using?
Kindly share your thoughts in the comments section below.