Updated 28-Jun-2024
This Document Part of a Complete Set of Style Guides
Purpose of an Image Style Guide
This Image Style Guide is for all visual communication including photographs, drawings and the like on websites, social media, static images in video, as well as all printed material.
Here are some guidelines that should help photographers and photo editors, as well as webmasters and website editors. If the photographer or editor does not understand or has any questions about these, please contact me. This will help us quite a bit as these guidelines will help ensure a sufficient level of quality, usability, and effectiveness regarding images for websites, printed material including books, as well as display advertisements. This should mean more customers, and more satisfaction.
Image Sizing (Mainly for the Web)
All images should be set to standard sizes and have an original (which may or may not be larger than the large size. Here are the widths. Height is less of an issue, though there are:
- a range of preferred height dimensions with medium
- small images will have text wrapping issues if much larger than the preferred size
- required width dimension with thumbnails, though height is not fixed (can be 4:3 in landscape or 3:4 in portrait for best aesthetics (e.g., 160 x 120px or 160 x 213px). The main issue is consistency, and so following preferred dimensions will allow for future-proofing mix-and-match of images in galleries.
Example Image Display
Thumbnails with Lightbox for Large Version
Hover the mouse over the image to see the magnifying glass icon, then click to see a larger version of the image (and continue clicking through all images that have a larger version available).
Code to generate that
[{.img-thumb}]
(/images/mcneill/2016/future-of-the-desktop/intel-compute-stick-l.jpg)
[{.img-thumb}]
(/images/mcneill/2016/future-of-the-desktop/intel-compute-stick-l.jpg)
[{.img-thumb}]
(/images/mcneill/2016/future-of-the-desktop/intel-compute-stick-l.jpg)
[{.img-thumb}]
(/images/mcneill/2016/future-of-the-desktop/intel-compute-stick-l.jpg)
Small Image, Left Aligned with Text Wrap
Note that text will wrap around to the opposite side quite nicely, though on small devices it fits the width of the screen (except on iPhone 6P where it has a gap, but does not have wrapping).
Code to generate that
{.img-left}
Note that text will wrap around to the opposite side quite nicely, though on small devices it fits the width of the screen (except on iPhone 6P where it has a gap, but does not have wrapping).
- Github Issue: Can fix this with an upscaling media query for this size, with overrides to the .img-left and .img-right.
Small Image, Right Aligned with Text Wrap
Note that text will wrap around to the opposite side quite nicely, though on small devices it fits the width of the screen (except on iPhone 6P where it has a gap, but does not have wrapping).
Code to generate that
{.img-right}
Note that text will wrap around to the opposite side quite nicely, though on small devices it fits the width of the screen (except on iPhone 6P where it has a gap, but does not have wrapping).
Medium Image
Code to generate that
{.img-full}
Thumbnail Size Image Dimensions
- 160px width - thumb -t.jpg (preferred 4:3 120px height)
- Thumbnail sets of images are 160x120px wide and landscape (we crop for portrait images)
Note: we use media queries to get the thumbnails and full width images to work out well on about 10 different sizes (portrait and landscape of a variety of devices) so the thumbnails have to be 160px in width to get that to work. All other sizes are generally more flexible in terms of exact width.
Small Size Image Dimensions
- 320px width - small -s.jpg (preferred 4:3 240px height)
- Small images are left or right aligned with text wrapping around them, are 320x240px wide and landscape, cropping as well if an original portrait image
Medium Size Image Dimensions
- 680px width - medium -m.jpg
- Preferred 680x960px < 60kb, 680x480px < 30kb, (or anything in between, actually). The two sizes mentioned work best for ebooks, for half-page, and full-page images.
- 4:3 is 510px, 16:9 is 382.5px
- One reason we don't simply do 640px width is that we want the image to be wider than the page width, and also the smaller images, along with space between them should be the same width as a full-width image on a web page.
Large Size Image Dimensions
- 980px width - large -l.jpg
- Large images can be any height.
HD Image Dimensions
- 1920px width - hd -h.jpg
- HD images are 1920x1080px and are used as images in HD video. Though the image is large, it can't use small text or image elements, because video is played from very small to very large screens.
- Treat the image as viewable on an iphone 5 landscape of 568px and still maintain legibility.
- While everything we have as standard, though other aspects are not prohibited, is 4:3 aspect ratio, while 1080p is 16:9 (widescreen), so it has to be cropped differently than our thumbnails and small images.
4K Image Dimensions
- 4096px width - 4k -k.jpg
- Not currently using this image size
Original and Modified Image Names
- original width - original -o.jpg (which may be any size)
- modified original -modified -x.jpg (again, any size)
An intermediary file -x.jpg is created so that no operations (beyond copy and rename) are done on the -o.jpg original.
Sometimes it is useful to have some images with size naming conventions, that are not fully that size, e.g., even if the largest image version is 680px, having a large size image file (which is identical to the medium size file, but with a different name) will allow for the lightbox effect without it breaking, and without having to treat the image differently in terms of markdown markup.
It is also important to note that depending upon the original size, the scripts for generating various sizes out of originals may be upscaling rather than downscaling. That is, the script will try and resize from a smaller to a larger version. This usually means using a filter of some kind. We aren't dealing with that here just yet, which is why simply having a duplicate image with a larger file size name is currently recommended. - Github Issue
Image Directory Structure
For sanity, arranging a directory structure is important:
- archive - Archived images once in use but not currently, originals, possibly edited versions as well (in subdirectories). Should be organized, not just a dumping ground.
- draft - Draft images changes (this is where editing takes place).
- live - Images currently in use, this is mirrored on the web server.
- originals - Untouched originals, currently in use
- unused - Never used originals, possibly edited versions as well (in subdirectories), Should be organized, not just a dumping ground.
- working - Where intermediate files are kept, e.g., cropped/brightened or otherwise enhanced versions of originals (but not resized). Gimp .XCF and Inkscape .SVG files live here as well.
Note that this structure can be present in any given directory which is a repository of content (that is, single pages or small groups of pages). The idea is to have wide and shallow directory structure for various reasons, such as technical performance and usability.
In general, images should have their own root directory on a website, though if the wordpress installation is multisite, an intermediate folder name identifying the site or location, so that an aggregate of sites/images can be managed together.
Image file structure on developer machine for the home page
/images/sitename/home/archive
/images/sitename/home/draft
/images/sitename/home/live
/images/sitename/home/originals
/images/sitename/home/unused
/images/sitename/home/working
Image file structure on live site
/images/sitename/home/
Image file structure on developer machine for any given 2016 post
/images/sitename/2016/post-url/archive
/images/sitename/2016/post-url/draft
/images/sitename/2016/post-url/live
/images/sitename/2016/post-url/originals
/images/sitename/2016/post-url/unused
/images/sitename/2016/post-url/working
Image file structure on live site
/images/sitename/2016/post-url/
Styles for images
There are several styles we use for images.
- {.img-left} float left
- {.img-right} float right
- {.img-thumb} gallery thumbnails (160px landscape)
The gallery thumbnails use media queries, so that images are slightly resized for a better viewing experience on different devices, while able to maintain a single processed thumbnail width, and keeping the markdown markup extremely clean and easy to maintain.
- Note: we use floats and clears instead of inline-block which is not fully supported by all visitor's browsers
Workflow
- Initial crop and any color/brightness changes
- Crop for HD, for Large, and for Small/Thumbnail (which might be different, if image is portrait originally)
- For some systematic changes to groups of images, such as brightening a set of images, use ImageMagick Convert
- Automated resized versions through ImageMagick scripts
- Compression through ImageOptim
- Directory creation/upload to site
- Text generation for links
- Add links to page(s) on the website
Using ImageMagick Convert on the Command Line
There are copy and convert commands which are faster to process inside of a directory (bulk). Once cropping and any basic image processing, creating different size versions of images can be done with ImageMagick convert -resize scripts.
Increase brightness with -Modulate
If it is necessary to lighten or otherwise manipulate an image, make an intermediary, use the convert -modulate command. This is a bit slow (around 1 second per operation). To be able to test and choose between levels of lightness, generate several in 5% increments, such as:
set a 105%;
set b 110%;
set c 115%;
set d 120%;
set e 125%;
for light in a b c d e;
for file in *.png;
convert $file -modulate $$light (basename $file .png)$light.jpg;
end;
end
And for a given brightness:
for file in *o.jpg;
convert $file -modulate 110% (basename $file o.jpg)x.jpg;
end
Basic Compression with convert
This works in-place with fairly good results, without any resizing of the image:
for file in *.jpg;
convert -strip -interlace Plane -gaussian-blur 0.05 -quality 85% $file $file;
end
Note: remove the -gaussian-blur if there is text in the images, as it will render it less sharp and at small font size, illegible.
Generate different image dimensions with -resize
Note the code below uses a .png file source
set l 980;
set m 680;
set s 320;
set t 160;
for size in l m s t;
for file in *o.png;
convert $file -filter Lanczos -resize $$size (basename $file o.png)$size.png;
end;
end
Note if generating images from other images that have already been compressed, it is necessary to set the quality somewhere between 90-100%, after -resize $$size.
-quality 90
Generating Markdown Text for Images in a Directory
To generate the text for markdown markup of the images, use the command
for file in *t.png;
echo "[{.img-thumb}](/images/directory/"(basename $file t.png)l.png")";
end
Media Query Breakpoints
While not targeting devices, there should be some correlation between looking nice on multiple devices, and easy to manage code. I prefer some complexity in the CSS rather than editor (since the CSS is managed site-wide, vs. x number of articles).
People talk about three or a few more media query breakpoints but that is not at all reality. We have landscape and portrait, as well as fine points of screen widths. Since I don't want the images to actually resize dynamically (not in a row of images, in any case) I need to resize the images based on screen real estate availability. Here is how it works out these days, for a 160px thumbnail, and the desire to make as large as possible, while increasing number of images in a row when possible. The range of sizes is 127px to 160px.
Note these are initial empirical numbers using Chrome Dev Tools for simulation. This only works on a particular width and breakpoint theme.
| Break | Thumb | Full | Device | Orient |
|---|---|---|---|---|
| 320 | 130 | 270 | Iphone 5 | Portrait |
| 360 | 150 | 310 | Galaxy S5 | Portrait |
| 375 | 155 | 320 | Iphone 6 | Portrait |
| 411 | 113 | 360 | I6P,Nex5x | Portrait |
| 435 | 121 | 384 | Nexus 5x | Landscape |
| 568 | 122 | 517 | Iphone 5 | Landscape |
| 640 | 140 | 588 | Galaxy S5 | Landscape |
| 667 | 146 | 614 | Iphone 6 | Landscape |
| 736 | 128 | 680 | Iphone 6P | Landscape |
| 768 | 153 | 480 | Ipad/Desk | Portrait |
| 980 | 151 | 634 | Ipad/Desk | Landscape |
Even though this information is useful, here we are really only dealing with device widths and now browser widths. Devices match up to browsers for portrait mobile widths (to some degree), and amazingly don't often for the vertical dimension. However, when we are dealing with anything that can have windowed browsers, that concept goes away entirely. What is the use of pulling a device-width of 1920x1080px if the browser is resized to 700px? Completely useless. So what we need are actual browser widths in the wild and not theoretically popular potentials. Thankfully as of January 2016, Google has Browser Width as a variable to check. Otherwise some coding is in order.
Empirical Screen Resolution Popularity
| Break | Thumb | Full | Device | Orient |
|---|---|---|---|---|
| 1366 | 130 | 270 | Iphone 5 | Portrait |
| 360 | 150 | 310 | Galaxy S5 | Portrait |
| 1280 | 155 | 320 | Iphone 6 | Portrait |
| 1920 | 113 | 360 | I6P,Nex5x | Portrait |
| 435 | 121 | 384 | Nexus 5x | Landscape |
| 568 | 122 | 517 | Iphone 5 | Landscape |
| 640 | 140 | 588 | Galaxy S5 | Landscape |
| 667 | 146 | 614 | Iphone 6 | Landscape |
| 736 | 128 | 680 | Iphone 6P | Landscape |
| 768 | 153 | 480 | Ipad/Desk | Portrait |
| 980 | 151 | 634 | Ipad/Desk | Landscape |
WordPress Plugin and CSS Code
We currently use the Jquery Colorbox WordPress plugin, the Markdown Extra WordPress plugin, and a set of CSS directives for functionality.
CSS Code
img {
max-width: 100% !important;
max-height: 100% !important;
height: inherit !important;
border-radius: 10px !important; /* Nah, not really, but it makes the edges round */
float: left !important;
}
.img-left {
float: left !important;
margin: 5px 20px 10px 0px;
border-radius: 10px !important; /* for rounded corners */
}
.img-right {
float: right !important;
margin: 5px 0px 10px 20px;
border-radius: 10px !important; /* for rounded corners */
}
.img-thumb {
margin: 0px 10px 10px 0px !important; /* markup all thumbnails with this class */
}
@media only screen
and (min-width: 320px) {
.img-thumb {
max-width: 130px !important; /* iphone 5 portrait */
}
.img-full {
max-width: 270px !important; /* align width with thumbnails */
}
}
@media only screen
and (min-width: 360px) {
.img-thumb {
max-width: 150px !important; /* Galaxy S5 portrait */
}
.img-full {
max-width: 310px !important; /* align width with thumbnails */
}
}
@media only screen
and (min-width: 375px) {
.img-thumb {
max-width: 155px !important; /* iphone 6 portrait */
}
.img-full {
max-width: 320px !important; /* align width with thumbnails */
}
}
@media only screen
and (min-width: 411px) {
.img-thumb {
max-width: 113px !important; /* iphone 6p, Nexus 5x portrait */
}
.img-full {
max-width: 360px !important; /* align width with thumbnails */
}
}
@media only screen
and (min-width: 435px) {
.img-thumb {
max-width: 121px !important; /* nexus 5s landscape */
}
.img-full {
max-width: 384px !important; /* align width with thumbnails */
}
}
@media only screen
and (min-width: 568px) {
.img-thumb {
max-width: 122px !important; /* iphone 5 landscape */
margin: 0px 10px 10px 0px !important; /* reset the margin to standard */
}
.img-full {
max-width: 517px !important; /* align width with thumbnails */
}
}
@media only screen
and (min-width: 640px) {
.img-thumb {
max-width: 140px !important; /* Galaxy S5 landscape */
}
.img-full {
max-width: 588px !important; /* align width with thumbnails */
}
}
@media only screen
and (min-width: 667px) {
.img-thumb {
max-width: 146px !important; /* iphone 6 landscape */
}
.img-full {
max-width: 614px !important; /* align width with thumbnails */
}
}
@media only screen
and (min-width: 736px) {
.img-thumb {
max-width: 128px !important; /* iphone 6p landscape */
}
.img-full {
max-width: 680px !important; /* align width with thumbnails */
}
}
@media only screen
and (min-width: 768px) {
.img-thumb {
max-width: 153px !important; /* ipad portrait + standard desktop */
}
.img-full {
max-width: 480px !important; /* align width with thumbnails */
}
}
@media only screen
and (min-width: 980px) {
.img-thumb {
max-width: 151px !important; /* ipad landscape + wide desktop */
}
.img-full {
max-width: 634px !important; /* align width with thumbnails */
}
}
ImageOptim CLI Image Compression
ImageOptim (which I have found is actually fine on it's own, without ImageAlpha or JpegMini) has a command line interface, the aptly named ImageOptimCLI. To be honest, the drag and drop part works pretty well with ImageOptim on its own. Note there are various versions and other options for the Non OSX temperment.
Photo Shooting Guidelines
- We want Landscape photos (longer in width than in height). These are predominantly what we use so a lot of portrait shots are not useful. We can always crop portraits for interesting Thumbnail sized portrait images on the website. Shoot Landscape.
- Use HDR when possible. Good HDR helps a lot especially with outside shots that have bright sun or both light and shadow. It is better to use HDR in-camera instead of trying to do corrections. Of course HDR can have a problem with speed, especially moving subjects. HDR can help make photos better before editing. However, HDR is not best on every occasion, so use judgement or take two photos (the iPhone 5 can automatically shoot an HDR and a non-HDR at the same time).
- RAW is not necessary (and can slow down the photographer, especially when trying to use HDR. There has never been a point when we are making images for the web and for books, when RAW actually helps. RAW images are much larger and can require additional editing. In most cases, shooting RAW is simply a waste of time and energy. Good, large JPG images are fine, and that is what we want.
- Smiling, laughing people are the goal. People show happiness by smiling and laughing. These kinds of images are very useful. Frowns and neutral faces do not encourage people to buy. Sometimes people smile with their eyes.
- Images need to be in focus. Blurry faces are not usable (unless done on purpose, though if anonymity is required, shoot with the face occluded by hair, hat, some part of the setting, etc.).
- Images should have a good straight, head-on view of the subjects. Shoot at the same level as the subjects, especially heads and faces. Do not shoot or angle the camera lens below them or above them. Shoot straight across the horizon rather than at an angle away from the subjects. Have the camera frame in line with the horizon so the image does not need to be rotated.
- Do not shoot subjects who have a shadow pattern across their face, or bright sun in their face. Use a reflector to project soft light, or filter sun. Squinting eyes from too much sun, or a face in shadow does not look good and we prefer not to use it.
- Have photos with a mix of subjects, many people in the picture. It is best to have both boys and girls together, men and women together. Photos with a group of people interacting or hanging out in the same place, both local and foreign people together is best.
- Photos showing authentic activity are much, much better than staged/posed photos. Some staged photos are fine, especially showing a group together, but action photos, activity photos are more in need. We need both, but more action/activity photos.
- Photos of locations should have people in them, not empty rooms and buildings. For example, a photo of a classroom should have at least one person in that room. A photo of a bedroom or kitchen should have staff. Photos of bathrooms do not need people, but it is best to put down the toilet seat (if there is one).
- Include nature in photos when possible. Besides plants, animals, trees, birds, etc.
- Do not shoot to the edges of the camera frame. In many cases we crop inside the image, so leave room on all sides to be cropped.
- Shoot at the highest resolution of the camera. Make sure as many pixels are being used as possible.
- Share images using a USB or SDCard if more than 10mb of files. Or better, use Google Drive or similar.
Color Profiles and Monitor Calibration
- Always use Adobe RGB Color Profile, in all editing and format changes. We have a 100% RGB workflow even for our print.
- Calibrate monitor before editing
- Basic overview/guide to calibrating a monitor
- Microsoft's guide on monitor calibration
- There are images on the web that can be used to help calibrate/test by eye
Also, I highly recommend optimizing ClearType first, before calibration. And then repeat the optimization of ClearType after the calibration. That should be optimal. The main issues are to get the gamma correct, and of course have the colors be accurate.
Website
- Header image (full width) should be 980x200px (1:4.9) jpg, < 50kb
- Images in the body can be 680x480px for a good landscape jpg that should resize nicely, at < 75kb
- Thumbnails can be as small as 260x370px portrait or 260x185px landscape jpg, at < 20kb / 10kb
- Logo image should be 980x200 (1:4.9) png w/o transparency, at < 50kb (Inkscape/SVG file)
- Large versions of photos/images should also be produced for inclusion in video (e.g., 1920x1080px)
- Sidebar house ads should be 260x86px png w/o transparency, at .png
- GIMP (photos): .xcf to .jpg
Website Images
- Header image (full width) should be 980x200px (1:4.9) to 980x326px (1:sqrt2) jpg, < 50kb
- Images in the body can be 680x480px for a good landscape jpg that should resize nicely, at < 75kb
- Thumbnails can be as small as 260x370px portrait or 260x185px landscape jpg, at < 20kb / 10kb
- Logo image should be 980x200 (1:4.9) png w/o transparency, at < 50kb
- Maps should fit the body
- Optimize all images within the GIMP/Inkscape editors and compress with external tools
Sprites
Note: Sprites also have limitations on mobile. - Sprites for social media (e.g., Galactic Social and Friend/Connect/Follow) - Sprite optimization for flags in the flag switcher of WPML and also this sprite hack
For all Social Media profile images, use a 500x500px png with no transparency, ensure the profile image can support rounded corners (YouTube/Facebook) as well as a complete circular mask (G+). In some cases it is useful to create different profile images, optimizing for each social media platform. - Facebook header 851x315px (1:2.70) - Twitter header 1500x500px (1:3) but with less usable - Google Plus header 1080x608px (1:1.78) can be larger but this is better for smaller
App Icons
This Document Part of a Complete Set of Style Guides