Photography on the web
Just a starter’s hint, this is not a blog about taking photos (technicalities), I will write about it in some later blog.
In these modern times, we can see that photography hasn’t lost an inch of its rightful place as a crowning representation of an individual, be it a photographer itself, company, freelancer, community, tourist attraction or anything else you can think of.
However, when deciding on how a photography should be placed on your website, how it should be used as a representation, we all need to consider some basic methodology, so our website wouldn’t be disrupted by its size, number or location. A lot of freelance photographers emerged nowadays which are quite talented, everyone born with the photo instinct. But not everyone has the website that represents their talent and themselves, and, of course, not everyone needs the same website. The same rule applies to any branch, a proper photography deserves its rightful place on almost every web and the idea is that every photography can and will be used against you if you have done it wrong. You hate when you look at some photos on the web and they are smudged or pixelated, or when opacity totally misses the point, don’t you?
First and most important part of the process is selecting images that will suit the site and grant visual identity purpose. Often, when thinking of photos used for sites, you need to consider atmosphere that your photo will cause. You need to always consider embellishing the photo to achieve that goal. For example, a good idea for the web is to mix in photography with some generic pattern and thusly express the idea of what the site represents. Blending these two can make an awesome impact, as we can see the example below. A little PhotoShop magic and ta-da!
This simple example above shows you how blending two pictures can create an atmospheric sensation, which can be used for background purpose because of its subtle, see-through effect. This is particularly useful if you want to create a vintage effect on your site. Of course, you have all the freedom in the world, you can combine three or even 150 layers, but that requires more PhotoShop experience and time.
Of course, you don’t want to disrupt the website with enormous images. Even if it’s only one picture, you should always make sure that you are using adjusted images. The probable maximum width you would ever need for your site is 1000 px. Some argue that 500px is sufficient enough for all needs. Personally, I prefer the golden middle, a.k.a. 750px. It does not lose any quality and it is readable by all monitors and devices without time loss. Which format should I use for my photographies or images, in particular, you ask? There are no right or wrong answers. Depending on your needs I will put down best solutions, so find which suits your needs best:
- GIF – Best used for few colors logo, simple drawings or animations. Not suitable for gradients or blends. Usable for images which are intended to display using the transparent background.
- PNG – GIF on steroids, in other words, a very useful format which handles the transparent background best, and has the ability to retain the best quality in photos. Most popular format with designers, also it has one (relative) flaw, it is not well supported by IE6 or earlier versions, but who uses it still, right?
- JPEG – For a long time now favorite for full-color photographies, the most versatile format, and easy to export and import. The only flaw is that JPEG does not support transparent background, or at least not that I know of.
Moving on. You might find yourself in a situation where you have the problem with wanting to have a high-res photo for desktop, and smaller images for mobile and tablet devices. What should you do then? There are plenty of ways you can adapt your photos for responsiveness if you dig the internet you can find a million solutions, but I will give you the simplest one, not necessarily the best. There is no best solution for anything, but there are common practices, ways to ease the process etc.
So, the easiest practice – use srcset attribute on <img>. For example, this is the code fragment you should use:
< img src = „mobile.png“ scrset „tablet.png 800, desktop.png 1500w“ >
This little code leaves all the work for the user’s machine to figure out which of the three images is best for their device. Of course, smartphones should download mobile.png, tablet devices should download tablet.png, and desktop monitors should ideally download desktop.png.
There you go. Few tips, I hope useful, as always. More designer tips coming soon on our blog. Stay tuned and have a nice summer 🙂