Given the nature of a photography forum, the ability to share one's photos and include technical illustrations is a very useful feature. However, since the dawn of online message boards, people have struggled with problems in doing so. This post is intended to give a few hints and solutions to common problems.
Due to the variety of platforms (phones, computers, tablets), operating systems, browsers and image editing tools people may use, this post is not intended to be a step-wise 'how to' guide. For something along those lines, I recommend using your favorite search engine and try something like "how do I resize photos on my iPhone for posting to a website" (etc.), and then follow whatever guide or video that works for you.
In order to keep image uploads, infrastructural costs and download times manageable, Photrio imposes limits on the size of photos that can be uploaded. Attempting to upload files that exceed these limits will result in an error and failure for the photo to upload.
General guidelines for controlling image file size
Images have to fit on whatever screen people are using to browse the site, and these files are stored on and transferred from a server so they can be displayed to visitors. The implication is that it's desirable to limit the size of these images to keep responsiveness (load times) of the pages reasonable and also to limit the infrastructural costs of running the site. When uploading images to Photrio, it's therefore recommended to resize them to dimensions suitable for web images.
Pixel dimensions
In practice, a good guideline is a longest dimension (width or height) of 800 to 1200 pixels, while keeping the aspect ratio of the original intact.
Sharpness
For resizing (sometimes called 'resampling') images, photo editing tools generally offer several settings. Experiment with these to get the results to your liking. In general, resampling/resizing/downscaling using 'cubic interpolation' gives good results. You may find that the resulting smaller images lack the sharpness or 'snap' of the original. This is a natural consequence of the downsizing process. Consider applying some subtle sharpening (e.g. 'unsharp mask') to make up for this effect.
DPI's don't matter
Note that in terms of image resolution, the only thing that really counts is the actual number of pixels. The "DPI's" don't mean much in an online environment. This means that resizing images should be done by actually adjusting the width and height of the image, and not merely changing the 'dpi setting' associated with the image. The latter results in no real change in file size, and is only relevant if the image is sent to a printer, so it knows how big it should end up on the paper. Hence, it doesn't matter or mean anything whether your photo is set to 72dpi, 300dpi or 3200dpi. What counts is the actual number of pixels in height and width of the image.
Compression and file type
Limiting file size can furthermore be done by applying compression. Compression is a mathematical approach to reducing file size by representing actual image data in a more compact format. Popular file formats that are suitable for web display and that offer compression are JPG (JPEG) and PNG. JPG offers 'lossy' compression, which means that some image quality is sacrificed in return for a smaller file size. PNG's compression can be set to be 'lossless', which is a little less effective (and may take longer to process), but it doesn't affect the quality of the image. Note that in both JPG and PNG, the aggressiveness of the compression can be set. Generally speaking, JPG is a safe bet since it's compatible with virtually all browsers and devices, and if its compression setting is kept limited (or the quality level is set to fairly high), output quality is by all means adequate for showing photos in a browser.
Bit depth
When editing photos, it's often opportune to do this in a high bit depth of 16 bits per color channel (or even more). However, for web display, 8 bit/channel is sufficient. When exporting your files in JPG format, bit depth is automatically limited to 8bit and you don't have to worry about this. When uploading PNG files, the bit depth can be more than 8bit/channel, resulting in an unnecessarily large file size for most purposes. Consider reducing the bit depth of the file in your favorite photo editor before exporting it for web use.
The resulting file size will vary according with image content, but it's safe to assume that a high-quality photo for web viewing does not need to exceed 750kb file size. In fact, reasonably big and good photos can usually remain limited to a 300-500kb range. If you find that the files you're producing for web display are much bigger than the sizes indicated, you can try and experiment a bit with export/resize settings in the photo editing tools of your choice to bring file size down, while retaining acceptable quality.
How to upload your photos to Photrio
There are two parts of the site where you can put your photos. (1) The gallery, and (2) within forum messages (including private messages). In all cases, ensure that the photos you're trying have been downscaled to a manageable size (see above) and are stored on your device (hard drive or internal memory).
1: Uploading to the gallery
To upload your photos, navigate to the Gallery and choose the option "Add media". You will be presented with a list of gallery categories in which you can place your photo(s). After choosing a suitable place, please choose the type of photo you're uploading (digital, analog, etc.) and hit the "Upload file" button. In the file picker dialog that appears now, navigate on your device to the photo you want to upload and confirm your choice. If all goes well, you will now see a form in which you can (optionally) provide additional information on the image. At the end of this process, click 'Save' at the bottom of the page. Your image should now be included in the gallery of your choice.
If you attempt to upload a file that's too large, you will receive an error instead of the form with image details. The likely cause is that the choices you've made while saving the image were not well suited for web viewing. Refer to the section above for guidelines.
2: Including images in a forum post
Sometimes, it's desirable to include one or more images in a forum post by means of illustration (or just to proudly show off your work). There are (at the time of writing) several ways to do this:
(a) Using the copy/paste functionality of your device
(b) By uploading the image as an attachment to the message
(c) By linking to the image which is publicly accessible elsewhere on the internet
(d) By linking to the image that was previously uploaded to the Photrio Gallery
2a: copy-paste method
This method of posting illustrations and photos is particularly useful when posting screenshots or snippets. Please use your favorite search engine to find out how you can make screen shots, screen grabs or snippets on your device, as the approach varies wildly across platforms. It is also (often) possible to copy image data in a photo editing program, choosing the 'copy' option and then 'pasting' into a Photrio post. However, this approach is relatively space-inefficient, and attempting to copy image data from some software programs may not work well or at all. In these cases, refer to one of the other methods mentioned below.
2b: image attachments
When entering a forum post, the toolbar at the top of the post editing window contains a small landscape photo icon
. By clicking this, you open a dialog that allows you to drag & drop a photo into the dialog from a file explorer window on your computer, or you can alternatively hit the "click here" tag to open a file picker dialog and use that to locate the photo on your device. After confirming your input, the image is automatically included in your post at the location of the text entry cursor.
2c: linking images from elsewhere
In the dialog that opens when clicking the photo icon mentioned above in (2b)
, you can choose the link tab
instead of uploading a new file. Use a different browser tab/window to navigate to the online location of the photo, and copy the full web address (https://...etc.). Then paste this into the link field in the image insertion dialog. After clicking OK, the image will be included in your post, but it will be fetched from its original location every time it is displayed. Note that if the image is (re)moved, the link breaks, and the image will no longer be included in your forum post. Future visitors tend to find this very annoying, so consider instead uploading your images to Photrio, where they will be included in regular site backups, and will 'survive' forum software upgrades, migrations etc.
2d: linking images from the Photro Gallery
This works in the same way as (2c) above.
You can remove an image from your post, also during initial editing, by deleting it just like you'd delete text. If you're inserting the image as an attachment and you change your mind and want to delete it, you also have to click the trashcan icon at the top right of the image, which is displayed at the bottom of your post in the attachment area. This removes the file from the Photrio server entirely.
Common problems / FAQs
Useful tools
A full list of photo editing tools is beyond the scope of this post. Here is a brief list of suggestions of tools that I have found useful myself:
Due to the variety of platforms (phones, computers, tablets), operating systems, browsers and image editing tools people may use, this post is not intended to be a step-wise 'how to' guide. For something along those lines, I recommend using your favorite search engine and try something like "how do I resize photos on my iPhone for posting to a website" (etc.), and then follow whatever guide or video that works for you.
In order to keep image uploads, infrastructural costs and download times manageable, Photrio imposes limits on the size of photos that can be uploaded. Attempting to upload files that exceed these limits will result in an error and failure for the photo to upload.
General guidelines for controlling image file size
Images have to fit on whatever screen people are using to browse the site, and these files are stored on and transferred from a server so they can be displayed to visitors. The implication is that it's desirable to limit the size of these images to keep responsiveness (load times) of the pages reasonable and also to limit the infrastructural costs of running the site. When uploading images to Photrio, it's therefore recommended to resize them to dimensions suitable for web images.
Pixel dimensions
In practice, a good guideline is a longest dimension (width or height) of 800 to 1200 pixels, while keeping the aspect ratio of the original intact.
Sharpness
For resizing (sometimes called 'resampling') images, photo editing tools generally offer several settings. Experiment with these to get the results to your liking. In general, resampling/resizing/downscaling using 'cubic interpolation' gives good results. You may find that the resulting smaller images lack the sharpness or 'snap' of the original. This is a natural consequence of the downsizing process. Consider applying some subtle sharpening (e.g. 'unsharp mask') to make up for this effect.
DPI's don't matter
Note that in terms of image resolution, the only thing that really counts is the actual number of pixels. The "DPI's" don't mean much in an online environment. This means that resizing images should be done by actually adjusting the width and height of the image, and not merely changing the 'dpi setting' associated with the image. The latter results in no real change in file size, and is only relevant if the image is sent to a printer, so it knows how big it should end up on the paper. Hence, it doesn't matter or mean anything whether your photo is set to 72dpi, 300dpi or 3200dpi. What counts is the actual number of pixels in height and width of the image.
Compression and file type
Limiting file size can furthermore be done by applying compression. Compression is a mathematical approach to reducing file size by representing actual image data in a more compact format. Popular file formats that are suitable for web display and that offer compression are JPG (JPEG) and PNG. JPG offers 'lossy' compression, which means that some image quality is sacrificed in return for a smaller file size. PNG's compression can be set to be 'lossless', which is a little less effective (and may take longer to process), but it doesn't affect the quality of the image. Note that in both JPG and PNG, the aggressiveness of the compression can be set. Generally speaking, JPG is a safe bet since it's compatible with virtually all browsers and devices, and if its compression setting is kept limited (or the quality level is set to fairly high), output quality is by all means adequate for showing photos in a browser.
Bit depth
When editing photos, it's often opportune to do this in a high bit depth of 16 bits per color channel (or even more). However, for web display, 8 bit/channel is sufficient. When exporting your files in JPG format, bit depth is automatically limited to 8bit and you don't have to worry about this. When uploading PNG files, the bit depth can be more than 8bit/channel, resulting in an unnecessarily large file size for most purposes. Consider reducing the bit depth of the file in your favorite photo editor before exporting it for web use.
The resulting file size will vary according with image content, but it's safe to assume that a high-quality photo for web viewing does not need to exceed 750kb file size. In fact, reasonably big and good photos can usually remain limited to a 300-500kb range. If you find that the files you're producing for web display are much bigger than the sizes indicated, you can try and experiment a bit with export/resize settings in the photo editing tools of your choice to bring file size down, while retaining acceptable quality.
How to upload your photos to Photrio
There are two parts of the site where you can put your photos. (1) The gallery, and (2) within forum messages (including private messages). In all cases, ensure that the photos you're trying have been downscaled to a manageable size (see above) and are stored on your device (hard drive or internal memory).
1: Uploading to the gallery
To upload your photos, navigate to the Gallery and choose the option "Add media". You will be presented with a list of gallery categories in which you can place your photo(s). After choosing a suitable place, please choose the type of photo you're uploading (digital, analog, etc.) and hit the "Upload file" button. In the file picker dialog that appears now, navigate on your device to the photo you want to upload and confirm your choice. If all goes well, you will now see a form in which you can (optionally) provide additional information on the image. At the end of this process, click 'Save' at the bottom of the page. Your image should now be included in the gallery of your choice.
If you attempt to upload a file that's too large, you will receive an error instead of the form with image details. The likely cause is that the choices you've made while saving the image were not well suited for web viewing. Refer to the section above for guidelines.
2: Including images in a forum post
Sometimes, it's desirable to include one or more images in a forum post by means of illustration (or just to proudly show off your work). There are (at the time of writing) several ways to do this:
(a) Using the copy/paste functionality of your device
(b) By uploading the image as an attachment to the message
(c) By linking to the image which is publicly accessible elsewhere on the internet
(d) By linking to the image that was previously uploaded to the Photrio Gallery
2a: copy-paste method
This method of posting illustrations and photos is particularly useful when posting screenshots or snippets. Please use your favorite search engine to find out how you can make screen shots, screen grabs or snippets on your device, as the approach varies wildly across platforms. It is also (often) possible to copy image data in a photo editing program, choosing the 'copy' option and then 'pasting' into a Photrio post. However, this approach is relatively space-inefficient, and attempting to copy image data from some software programs may not work well or at all. In these cases, refer to one of the other methods mentioned below.
2b: image attachments
When entering a forum post, the toolbar at the top of the post editing window contains a small landscape photo icon
2c: linking images from elsewhere
In the dialog that opens when clicking the photo icon mentioned above in (2b)
, you can choose the link tab 2d: linking images from the Photro Gallery
This works in the same way as (2c) above.
You can remove an image from your post, also during initial editing, by deleting it just like you'd delete text. If you're inserting the image as an attachment and you change your mind and want to delete it, you also have to click the trashcan icon at the top right of the image, which is displayed at the bottom of your post in the attachment area. This removes the file from the Photrio server entirely.
Common problems / FAQs
- Upon uploading, you receive an error that the file is too large. Refer to the first section of this post above and reduce the pixel dimensions of your post, and save the image as JPG or PNG.
- Upon uploading, you receive an error that the type of file is not supported. When sharing photos online, use preferably JPEG/JPG file format or optionally PNG. Other types and in particular digital camera RAW files may not be supported. Convert these using an image editing program or a RAW converter into either JPG or PNG format.
- The image looks fuzzy/unsharp after uploading. Within the Photrio Gallery, especially larger images are automatically downsized for inclusion in gallery overviews etc. Verify if your photo does look sharp if you click to view the original file. If so, then the lack of sharpness is simply due to the somewhat primitive approaches to downsizing that's used by virtually all websites. There's not much you can do about this except uploading a smaller image in the first place, so the forum sofware doesn't downsize it as aggressively. If the original upload image also looks fuzzy (but the photo you started out with was sharp), then consider applying some sharpening to the photo after resizing it for web display. It's normal that some apparent sharpness is lost during resizing.
- The image shows up too big/too small after uploading. Verify that the zoom setting on your browser is set to 100%. If this is the case and the photo still shows too big/too small, consider uploading a new version that's sized down a little further/less.
Useful tools
A full list of photo editing tools is beyond the scope of this post. Here is a brief list of suggestions of tools that I have found useful myself:
- GIMP (Windows/Mac/Linux): free/open source image editing software with comparable functionality as Photoshop.
- Snapseed (Android/iPhone): free to use and feature-rich image editing app for mobile devices.
- RawTherapee (Windows/Mac/Linux): free/open source digital camera RAW converter tool, alternative to e.g. Adobe Camera Raw or Capture One.
- IrfanView (Windows): free to use image viewer with basic editing features including resample & sharpen.
