post-handling images

… and other variables in web design.

On the web, pretty much everything is about appearance – also when it comes to content. If visual content on the web is not what it appears to be, few think twice about it. No-one expects to find unmanipulated images anymore for instance, as we all apply at least some manipulation to those images we present – even if it is just the camera settings that affect the outcome.

Many regular photos on this site are quite sharp – sharper than in real life that is. This is of course intentional, as I want details to stand out. So, I sharpen them as part of the post-processing I apply to all images on site.

Some times I also intentionally overdo the sharpening of whole or parts of an image to create an effect, which may make it look a bit unreal. All as part of how I choose to present content on a particular page.

As I quit using PhotoShop years ago, all image post-handling is done in GIMP nowadays. GIMP is supposedly lacking some “advanced” features compared to PhotoShop, but none that I have been missing so far.

My idea is to try to optimize otherwise good, natural, photos for the web, which means I don't apply much in the way of “artistic effects”. It is all about trying to “tell a story” in pictures and text, so actual “image distortion” doesn't do much for me.

pretty basic…

I always set cameras for max image-resolution (not using raw). Gives me maximum to work with during post-processing.
For my Canon EOS 400D, max-res is: 3888px by 2592px. For the other cameras I sometimes use, max-res is a little less but at least twice of what I use on the web.

“standard” image post-processing procedure:

Checking and correcting image-rotation – also small deviations of less than a degree.
Cropping image, if necessary.
Resizing image for its intended place and “max-size” on a page.
(Some images are saved in several sizes, so I can “pick and choose” later and/or use them in several places on various pages.)
Checking and correcting light / contrast – a little goes a long way.
Adding edge-sharpening - several small steps until I'm happy with it.
Checking and correcting color-saturation.
Save in dedicated folder: I often use date in file-names so I know when they were snapped without including metadata.

May take from a couple of minutes, to maybe 15 minutes, to process each photo in a series, following the “standard” procedure listed above. Nearly all photos I have taken myself fall into this “rather easy” category, but there are of course exceptions…

“non-standard” procedures for special cases:

Blurring and smearing of details, followed by careful re-sharpening.
Partial deconstruction and/or reconstruction of objects, px by px and layer by layer if neccesary.

Nothing special in the “non-standard” procedures. But, as I like to fine-tune the details until everything looks “just right” to me, it may take hours, even days, to get a single image ready for launch. Many attempts may be reversed, or deleted, in the process.

lining up and resizing on-line…

Of course, launching an image is just half the work. In fluid design (what some call “responsive”), all images on a page have to work in context on any screen-size from the largest to the smallest.

I do not often switch, or replace, images to go with variations in screen-width or screen-resolution between devices. In most cases the gain is minimal with switching, and often the actual download size/time increases with such techniques.

For resizing of images to go with the variable page-width – compressing them that is, max-width is the most used tool. Several examples on this page, and all images that should stay smaller than the width of their containers are given their own classes for specific max-width.

Note: I am reusing one variant of the image above, for all examples on this page.

1: line-up basics…

Here I am using basic float and compression techniques, to line up two images on the right side in a paragraph, and scale them at fixed percentages of the width of that paragraph.

Compressing images for large screens to fit on small screens, doesn't increase actual resolution. It does increase “available resolution” though, and works well for all but very special images.

The images used (again) are the same, with one given a max-width of 45%, and the other a max-width of 20%. Their inherent width is equal to 100% of the container's width on the widest screens, which is the max-width they will default to if no class for max-width is applied to them. The method is really that simple.

Note that I usually do not compress images initially. Images should ideally be no wider than the chosen initial size on widest screens, to prevent or avoid initial compression. Thus, when sizing images in GIMP I have already decided where those images go in a particular page and what initial size they should have there.

(FYI: max image-width in main column on this site is 670px. It is 460px in side-notes, and 1200px in addendum. Most images are sized smaller than those max-values in GIMP, and max-width is then declared – classed in – to let images stay at inherent size as long as possible during down-sizing of browser-window.)

2: arranging images…

For image-overlapping and over-the-edge arrangement on pages, margin-offsets on floating images are used a lot on my sites.

Several examples of that too on this page, but the same image-lineup with negative margin-right added on both images, shows how it works in its simplest form.

By having classes for margin-offsets on floats both in px and %, and combining them with classes for relative-offsets both in px and %, pretty much any form for image-overlapping and over-the-edge positioning, that will behave as intended in fluid designs, can be achieved.

To repeat: having images auto-size with their containers, and floating images pulled and pushed around by their margins, is what I have found to be the most cross-browser reliable image lineup and positioning methods for responsive designs.

In that respect nothing much has changed over the last decade or so, apart from that browser-support for these techniques has improved. Again, a set of very simple but under-utilized techniques, that are supported to perfection by all major browsers today.

3: layering elements…

Lastly, I may want to control image-shadows for such an image-overlapping, to keep shadows from covering up anything. In this example the small image shall be in front of the larger one, but the shadow on the smaller image shall stay behind that of the larger image.

This is of course achieved by transferring all image-styles onto an element containing the image, and manipulating the z-index.
It is otherwise the same old margin manipulation technique at play, and it works just as well now as it did in the past.

Some front-end coders seem to regard use of negative margins in this way, as hacks that are to be avoided. Well, the method is based on W3C standards, so what's “hacky” about it?

Anyway, the above is a small set of the many techniques I have for controlling images on web pages, and all my methods are based on standard.

recycling old news.

After having been in web design for about 15 years, I have found that most “new” in web standards is about improving or replacing the methods by which we can achieve the same layouts / designs that we attempted all those years ago.

Not much that is actually “new and useful” in more recent web standards, that has been given broad support across browser-land. It is a slow process, and there isn't much that can be done from my end to speed it up.

Be that as it may: as long as I personally have a good insight into how the various browsers actually handle the techniques that are available to me today, the slow progress doesn't cause me any real problems.

sincerely georg; sign

Weeki Wachee 07.may.2015
last rev: 10.oct.2020

side notes.

what we can apply to images while designing…

We can do quite a bit via CSS to make images line up and appear as we want in our designs.

make images behave as inline elements (default)
display images as block elements
display images as inline-block elements
float images
put margin on images
push/pull images around, and control how they interact with their surroundings, using margin
control width, max-width and min-width on images
absolute and relative position images
combine position, margin and padding for improved image-positioning
put border on images
put shadow on images
put :hover effects on images
transform images
filter images

The above is of course far from being an exhaustive list of possibilities when it comes to styling images, which is the point I'm making here. There is in fact not much you can not style on image elements.

Images, same as with most empty and self-closing elements, can not be styled with…

generated content: ::before and ::after

… which is a pity. Generated content can of course be attached to an image-wrapping element or the image's neighbor, so this limitation is not a real problem.

thoughts on appearance…

Some designers try to carefully balance colors in images, to make them appear in a certain way or to match them with other elements on a page. That's fine, but at some point it doesn't make much sense to continue fine-tuning colors, or anything else, regarding images.

No matter how much improved the screens and software have become in later years, deviations in color reproduction is large. Also, all this depends very much on end-user settings, over which we designers have absolutely no control.

I do for instance use a piece of software that changes color-temp and light / contrast on my screens depending on whether it is day or night where I am. This to reduce strain on my eyes from looking at those screens.
I am of course perfectly aware that these screen changes throw off some “fine-tuning” for images, but it is my choice to make as end-user.

As web designer I turn off these automatic screen-changes while preparing and styling images. But, I do take such potential deviations at the user-end into account, by focusing more on contrast and clarity in images than actual color-balance and minute details.

thoughts on distractions…

Personally I do not like distractions while I'm checking out content on web pages, and turn off as much as I possible can. A couple of add-blockers in my main browser take care of most, and stuff delivered as “Flash” gets blocked out unless, or until, I choose to open it.

I do not feel that I am losing out on anything important by blocking out distractions on web pages, and will continue to run these blockers regardless of what some site-owners may think about such end-user strategies. It is my browser, on my screen, and I do as I like.

As web designer I try to avoid putting unnecessary distractions into web pages in the first place. If I don't like distractions, why should visitors to my sites have to endure any.

Ways can be found to distribute “exciting stuff and adds” to those visitors who want access to it. Most visitors have developed a form for blindness regarding distractions on web pages anyway – they ignore it, because there is so much of it anywhere.

All I want to deliver via web pages, can be delivered as main and related content. If something doesn't seem to fit in on one page because it distracts from main content, it can usually be delivered as regular content on another page. If it doesn't seem to fit in anywhere, it may as well be left out altogether.

What I'm saying here is that the “Wow” factor has pretty much gone out of all things web a long time ago.

Ordinary folks have for the most part lost interest in web site design as such. They just want pages/sites to appear familiar – be easy to use, and be appealing in the way they present content.
Only web designers may now and then be impressed by something they see in a web design, at least when they encounter it for the first time. Not much left to “see for the first time” on the web today though.

The above does not mean that web design is dead, nor does it mean that the creation of good web design is any less important today than it was before – quite the opposite. Focusing on the creation of designs that meet the expectations of the targeted group of potential visitors, is more important than ever.

designing for our visitors…

A design is there to serve the content, and should ideally serve it well. Whatever the content is all about, a good design is one that is shaped and formed to serve that particular content.

When designing for a limited group of visitors that someone wants to target, one should figure out and define what appeals to that particular group, and design accordingly. Unusual or “smart” solutions may work well, but they may also backfire. Success depends very much on whether a design meets the “familiar” and “appealing” criteria for the targeted group, or not.

One may want to design in agnostic ways in order to please as many as possible. But, then one should keep in mind that it is impossible to please everyone, no matter what.
One has to narrow the target enough to be able to define what may please the majority of a group, even if one wants to reach people beyond the target-group. Again: web designs have to meet the “familiar” and “appealing” criteria, to have a fair chance of hitting their targets.

I personally see the design as an extension of the content, in that the design is shaped and formed in and around the content, controls the presentation, and lifts the content up to the surface.

thoughts on decorations…

To me “decoration” is all the extra foreground and background stuff that fills out and complements the page in and around the content. If well implemented it aids the content.

Design details may come in to support the content, for instance by dividing up content and make it easier to focus on parts.

I try to decorate discretely in the background and around the content, but may be a bit bolder in the content itself. I am not always all that happy with my use of individual page content-decoration, but usually it serves its purpose well enough for comfort.

thoughts on me as designer…

I am definitely not everybody's “designer”, as I tend to go my own ways and not worry about trends or what others may think about my designs. I am like that in most other walks of life too, so nothing special when it comes to web design.

I don't “sweat the small stuff” when it comes to visual design. It matters a lot more to me that a layout works well, than that all details are “perfect”. I do in fact have quite small thoughts about visual perfection, as “perfect visual web designs” tend to show serious weaknesses when put under stress.

I often refer to visual web designs as “building castles in thin air” – need a solid structure in order to hold its own when the wind blows. Thus, I focus on structure before visual appearance, to make sure my work holds up well enough under stress for comfort and peace of mind.
I'm happy with that.