Examples of physical sizes - Images for the web - Web Team - University of Canterbury - New Zealand

Examples of physical sizes - pixels (px)

Thumbnails


75 x 75

100 x 75

75 x 106

Single image on Home Page


600 x 150 (max 630 wide)

People (staff photos and student profiles)


80 x 120
Staff thumbnail

 


160 x 240
Individual staff page


125 x 160
Student Profile

 

General images (use where text wraps around the image)

The examples below use randomly generated Lorem Ipsum text to illustrate how different image widths look on a page. The first three examples suggest image widths that work on UC pages. Example 4 shows the maximum width to use and example 5 illustrates what your page will look like if the image is too wide.

The size of the image width you use depends on several factors:

  • amount of text on the page
  • context - what the image shows and how important it is in relation to the text
  • amount of detail the reader needs to see in the image
  • how many images are on the page - each image added means the page will take longer to download
  • overall layout of the page

Example 1: Smaller image sizes suited to a page with lots of text and several images

Blandit, in, augue at tincidunt wisi duis elit amet feugiat laoreet. Autem nisl tincidunt aliquip eu minim quis feugait accumsan magna eros, feugait vulputate in aliquam erat duis ea, illum consequat at, exerci, tation consequat, iriure.


A left-aligned 200px W image
Enim iusto facilisis molestie vulputate wisi enim ex te nulla vel, et qui nisl, eum in. Illum qui et lobortis tation veniam et duis ut commodo sit minim zzril augue enim molestie.

Ullamcorper eum ut diam aliquam duis ea blandit adipiscing praesent, dolore delenit. Te ad delenit aliquam, eros, dolore consequat autem velit nostrud euismod wisi commodo enim, exerci veniam veniam dolore dignissim velit augue, sed et vel eros dolor. Nostrud dolore esse aliquip autem feugiat commodo dignissim, facilisi eros quis duis magna consectetuer ut aliquip eu exerci dolor odio zzril, nisl. In volutpat lobortis ut nulla laoreet vulputate ea in in sed, autem ut nulla minim, et enim molestie accumsan in consectetuer vel commodo accumsan zzril. Nisl aliquip dignissim vero, in augue nibh, vulputate autem nibh aliquip ea delenit esse dolore minim veniam odio. Euismod delenit nulla quis iriure, vero vel eum in velit veniam.

 A right aligned 180px image

Exerci ad consequat te vel, dolore nisl te commodo elit qui aliquam. Nulla ex iriure vero ullamcorper nostrud lorem, ipsum laoreet erat ex ut vel in. Ea wisi quis consequat in autem ut suscipit, amet vel erat, at duis, minim in, molestie duis minim.

Vero eu et praesent enim euismod consectetuer, feugait augue in veniam eros, eum ad veniam hendrerit aliquip magna qui delenit. Lorem consequat diam nulla dolore exerci, exerci iusto hendrerit accumsan tation esse commodo ut velit aliquip odio eu velit eros. Ut, lobortis lobortis hendrerit sed dignissim, nisl illum nulla ad consequat commodo praesent at vel, enim, volutpat aliquip delenit velit, nibh exerci delenit ut. Diam et ut vel lobortis, duis feugiat quis ad. Iusto, dolore nibh laoreet lobortis te commodo iriure qui aliquam enim aliquip iriure ea, ullamcorper nostrud, nulla commodo ut, eu ex, ut autem in luptatum ut. Duis consequat consectetuer autem praesent dignissim autem, vel aliquam facilisis dolore vero dolor esse consequat eros tation nulla, sed ipsum.


A left-aligned 200px W image

Luptatum minim veniam iusto volutpat zzril nulla et eum vero tation vel ad vulputate minim consequat nostrud ea. Veniam nulla molestie minim, nonummy laoreet dolore tincidunt vel dolore ex lorem ea ut at qui blandit suscipit accumsan eu, vel praesent elit, dolor. Velit, elit suscipit nisl blandit hendrerit zzril ut wisi et dolore blandit, illum

enim consequat, feugiat velit consequat iriure in wisi. Enim, minim nisl vel duis in, wisi adipiscing illum molestie diam ipsum molestie, duis duis ut, ullamcorper, nulla nostrud iusto nostrud at, dolore vero odio amet. Qui nisl sit nostrud consequat iusto, eum, suscipit autem erat wisi euismod exerci tincidunt erat ex magna.


A right-aligned 200px W image

Nulla veniam consequat consectetuer autem praesent dignissim autem, vel aliquam facilisis. In vero dolor esse consequat eros tation nulla, sed ipsum augue luptatum, dolor dolor, facilisis et facilisi et. Eum suscipit eu et praesent enim euismod consectetuer, feugait. Ea in veniam eros, eum ad veniam hendrerit aliquip magna qui delenit quis consequat diam nulla dolore exerci.

Luptatum, vel nulla dolore lobortis nulla, odio, elit vulputate ipsum dolore duis sed minim eum aliquip minim tation suscipit dignissim accumsan nonummy, erat, consequat vero nisl. Iusto luptatum duis commodo augue odio ea vero et. Praesent dolore vel, esse consequat tincidunt in consequat ad, consequat blandit.


Example 2: Larger image sizes suited to a page with limited of text and one or two images


A left-aligned 300 px W image

Feugait, illum sit, qui ut, tation enim dolore tincidunt iusto ad lorem. Eum wisi iriure accumsan nisl ut adipiscing luptatum minim praesent, quis eu vel quis. Vulputate sit dolor eros hendrerit dignissim ea commodo in, consequat, iusto delenit. Accumsan at, feugiat ullamcorper ullamcorper dolor veniam iusto esse luptatum te vel molestie eu qui, te praesent duis ea nisl luptatum in tation hendrerit nibh.

Ut quis nulla qui delenit commodo molestie exerci magna quis amet dolor te ut nulla amet wisi dolor suscipit, ut veniam blandit accumsan at vulputate. Feugait ex volutpat ullamcorper in, suscipit ex ut ut et, duis feugiat wisi dolore zzril eros praesent nibh consequat consectetuer nulla iriure vulputate iusto. Esse dolore, exerci blandit ut in minim ut enim eum et ea, nonummy duis. Ad, autem feugait exerci autem, wisi odio ad feugiat.


A right-aligned 400 px W image

Illum iusto ad lorem vel wisi iriure accumsan nisl ut. Zzril luptatum minim praesent, quis eu vel quis nostrud. Ipsum dolor eros hendrerit dignissim ea commodo in, consequat. Suscipit delenit dignissim at, feugiat ullamcorper ullamcorper dolor veniam iusto esse luptatum te vel molestie eu qui. Volutpat praesent duis ea nisl luptatum in tation hendrerit nibh lobortis ut dolor suscipit facilisis velit consequat, augue iriure, autem augue duis exerci lobortis velit laoreet. Wisi vero, adipiscing aliquip, ut vel vel aliquip in dolor feugait, dolore lobortis.

 

 

 


Example 3: One large image with text (text is not wrapped around image because the space available is too narrow)

Vel, suscipit ex ut ut et, duis feugiat wisi dolore zzril eros praesent nibh consequat consectetuer nulla iriure vulputate iusto hendrerit dolore. Nostrud blandit ut in minim ut enim eum et ea, nonummy duis ipsum, autem feugait exerci autem, wisi odio ad. Dolore in illum, dolore magna velit, eum nostrud nisl, zzril ullamcorper at zzril, vel nulla dolore lobortis nulla, odio, elit vulputate ipsum dolore duis. Dignissim minim eum aliquip minim tation suscipit dignissim accumsan nonummy. Ullamcorper, consequat vero nisl elit luptatum duis commodo augue odio ea.


A left-aligned 600 px W image

Example 4: Maximum width image - 750 px

This diagram fits neatly within the 'body' part of the page.

Example 5: 1000 px width diagram

This image is too wide and extends to the right of the 'body' area of the page. Readers will need to scroll horizontally to view the image. The maximum image width to use is 750px.