how to

prepare images

for use
on the web
by Geoff Powell
www.photografica.com.au
photografica
Images are a crucial part of good web design, and are
ubiquitous on virtually all websites, but technically, are so
often one of the main reasons for slow loading sites. To add
images and other graphics to websites effectively, a small
amount of knowledge goes a long way. Here’s what you
need to know.
If you are a small business owner and managing your own website, it’s likely you
use a visual interface or page builder to build, maintain and add new content. In
short, the code part will be largely invisible to you, and be assured, you don’t need
to be a code guru to get by. But you do need to know what size and type of images
you are uploading. Like many other environments, the GIGO (Garbage In; Garbage
Out) principle applies. But if you apply some basic principles in preparing your
images (size, format and best-practice saving options) your site will perform better
and you will sleep easier. Surely a job worth doing is worth doing well?

In this guide, I want to show you the basics of how to prepare images for the web:
what size they need to be, what format they need to be, and how to save them so
they look good but don’t take a long time to download.

So, let’s get started.

photografica.com.au: How to prepare images for use on the web 1

The basics—file formats
The images we use on the web are typically in one of three formats:

●● JPG—used for photos,

●● PNG—mostly used for logos or files where transparency is needed, and

●● GIF—now on the way out, but still useful for animations.

Most of the time though, when we are uploading normal images, we are going to
be using jpgs.

The following chart shows a summary of the technical differences:

JPG PNG GIF

24-bit RGB 24-bit RGB 8-bit RGB
Uses lossy Uses lossless Uses lossless LZW
compression compression compression
Transparency capable
Transparency incapable Transparency capable
(with limitations)
Animation capable
Animation incapable Animation capable
(though not widely used)
Can be compressed Can be compressed Can be compressed
to a small file size to a reasonable file size to a very small file size
Internet usage (image
Internet usage Internet usage
quality in contrast to
(transparency) (animation)
its file size)

Source: http://theydiffer.com/difference-between-gif-png-and-jpg/

photografica.com.au: How to prepare images for use on the web 2

Image size
So how big should images be when we upload them to the web? And what are we
actually talking about when we say big? There are, in fact, two ways to indicate size
with images—one is the physical dimensions of the image, measured in pixels, and
the other is file size, measured in kilobytes or megabytes. We need to understand
both to get the best out of using images on the web.

Pixel dimensions
The best way to think of pixel dimensions is that they indicate the physical size of
the image.

It doesn’t help that pixels don’t have a fixed size, and this is why images of the
same pixel dimensions can be different sizes on different screens. How big it looks
on a screen is dependent on the number of pixels the screen displays. Two similarly
sized screens side by side might have completely different screen resolutions and
the image will be different sizes on each. This muddies the waters somewhat, but
it’s something easily catered for in preparing your images.

The resolution of the actual image (known as ppi—pixels per inch, or incorrectly as
dpi—dots per inch) has absolutely NO impact on how big the image is displayed
on the screen. It is only the pixel dimensions and the screen resolution that matter.

PPI is only relevant when printing images, and there is a widespread but mistaken
belief that images for the web should be saved at 72ppi. This is an old chestnut
that is hard to kill, but it is simply not true and totally irrelevant. A browser totally
ignores the ppi of an image, as the only thing it needs to know are the pixel
dimensions—how many pixels wide and how many pixels high the image is.

So back to screen resolution—let’s take as our example an image that is 1200px

800px. If you have a 15” laptop with a resolution of 1366 x 768px (the most
common screen resolution in the world at this point), then this image will almost
fit the width of the screen and will more than fill the height (by how much will
depend on any bookmark bars, and the size of website header content etc.)

photografica.com.au: How to prepare images for use on the web 3

It would look roughly like this:

IMAGE 1: This image is 1200px wide on a screen 1366px in width

If we look at the same page on a full HD monitor with a resolution of 1920 x 1200px,
then the image will fill much less of the width and more of the height (see Image 2).
It’s still displaying at 1200 x 800px, but now there is more screen space. See the
connection between the screen and how big the image is displayed?

IMAGE 2: This is the same 1200px wide image now displayed on a screen, 1920px wide.

photografica.com.au: How to prepare images for use on the web 4

There are other constraints that are also determined by the design software used
to build most websites. For example, most WordPress websites have a content
width of around 1100–1200px. So, in the above example, where the content
width is also 1200px, it means that the content only uses 1200px. If the screen
resolution is bigger than that, then only empty space (or a background image) will
be displayed on the sides. This is also why the logo and the menu don’t extend
beyond 1200px in width.

IMAGE 3: Note how on the laptop (front right), which has a 1366px resolution width,
the 1200px content width almost fills the entire screen, while on the desktop which has a
resolution of 1920px width (centre back), there is more white space on either side. With
smaller resolution devices—tablets and phones (front left), the responsive layout kicks in
and elements are re-arranged to fit the smaller dimensions and aspect ratio of the screen.

Pixel size?
To determine how big, in terms of pixel size, your images should be for use in your
website, you need to know how and where you want to use them.

The starting point is to understand how wide your content area is. Most websites
are currently using around 1100 or 1200px as a standard width because there are
still many devices which only have a screen resolution of 1366px. If the content
width was wider, the content would not fit the screen and we would have to scroll
to see it, or the site would have to go into responsive mode.

photografica.com.au: How to prepare images for use on the web 5

So if you wanted an image to fill the entire content width, it would make sense
for it to be 1200px. But if you want your image to be small—say to fill a ¼ page
column, it need only be 300px wide. If you were going to put an image in a ½ page
column, you might resize it to 600px.

The guiding principle is to size your images for roughly the pixel dimensions they
will fill in your layout.

It makes no sense to use larger images, as they will be much larger in size (kilobytes)
and therefore take longer to load, while still displaying as smaller on screen.
Let’s look at a diagram to simplify the concepts.

IMAGE 4: Note here how if the content width is 1200px, it makes no sense for an image
that will only fill half of that space to be any bigger than 600px. Unless you are going to
allow people to click on it to open it in a lightbox, and then, depending on the theme,
you might either add a bigger size image for the pop up, or just add a bigger image in
the half container. That way, a 1000px image would display as approximately 600px,
but when opened in a popup would show at its true size.

photografica.com.au: How to prepare images for use on the web 6

What if we want our image to be “full screen” and break out of the content width?
In this case, we must then consider the full resolution width of the target screen.

With this method, the full screen image will fill the full width of the screen, regardless
of the physical dimensions of the image and the resolution of the screen. To achieve
this, the browser ‘squashes’ or ‘stretches’ the image to make it fit the browser width.
So it makes sense to use an image that is large enough for the largest screen
resolution that is likely. It is important to note that an image looks fine if it is reduced
in size, but it can’t be enlarged too much before pixilation occurs.

Higher resolution screens are becoming increasingly popular, but this creates
tension in preparing images for display as we want the best display, but at the
smallest file size (bytes). If we use an image that is around 2000px in width, it will
fill the screen of a full HD or smaller resolution monitor without issue, and if it’s
displayed on a larger screen, for example a 27” iMac which has a resolution of
2560px, then it will be slightly stretched, but not enough to cause obvious image
deterioration through pixilation.

With the advent of 5K and even 8K monitors, we start to run into issues and the only
real solution is to use larger images for those screens. We can only hope that internet
speeds will keep pace as images get larger (pixels) and require more bandwidth for
the resultant files (bytes). At this point, however, it appears to be mostly common
practice to use images around 2000px in width and allow them to stretch.

As a rough guide, if your template content width is 1200px, you could think of
these sizes as appropriate.

●● Full screen image width: 2000px

●● Full content-width image width: 1200px

●● Half column image width: 600px

●● One-third column image width: 400px

●● One-quarter column image width: 300px

●● Full column width on page with one third sidebar: 900px

●● Sidebar image: 300px

photografica.com.au: How to prepare images for use on the web 7

As you can see, for all but the full screen images (or images that will pop up in a
‘lightbox’), the starting point is the content width determined in your template.
If you want your images to pop-up in a lightbox, they can break out of the 1200px
content width constraint, and then it’s back to overall screen resolution to make
your decision.

More information generally on screen resolution can be found here:

https://en.wikipedia.org/wiki/Display_resolution, and the most common
screen resolutions can be found here: http://www.w3schools.com/browsers/
browsers_display.asp.

It is interesting to note that as of January 2016, resolutions of 1920px and upward

counted for almost 50% of the market. This figure changes rapidly, so it is advisable
to keep current with trends in the technology.

Image file size

File size is all about the bytes or amount of memory your image takes up and NOT
its physical dimension. It is here we need to talk about compression. As you can see
from the chart on page 1, pngs and gifs use lossless compression, while jpgs use
lossy compression. Compression is basically a way of saving the file by looking for
redundancies to enable smaller file sizes. See here for a more detailed explanation:
https://en.wikipedia.org/wiki/Image_compression.

Simply put, a 1200 x 800px image might be 600kb+ saved without compression,
but with compression it might be at little as 60kb, with no discernible loss in
quality. That’s a massive difference in file size, which will noticeably reduce the
time for a page to fully load.

604kb 68kb

IMAGE 5: No compression Compression applied (40 in photoshop)

photografica.com.au: How to prepare images for use on the web 8

So not only do you need to resize images to the correct dimensions, you need to
ensure that appropriate compression is applied to reduce file size.

I use Adobe Photoshop to save images for web use, and apply compression
to all files after I resize them. But image compression can be achieved with
almost all image editing software including Lightroom (http://www.adobe.com/
au/products/photoshop-lightroom.html), the free GIMP program
(https://www.gimp.org/), as well as many web-based applications.

PNGS do not compress as readily as jpgs, but there are some great online tools as
well as WordPress plugins to help you with compression and managing file size. Two
great online tools used before uploading include Tiny PNG (http://tinypng.org/)
and Caesium (https://saerasoft.com/caesium/), while WP Smush
(https://wordpress.org/plugins/wp-smushit/) and EWWW Image Optimizer
(https://wordpress.org/plugins/ewww-image-optimizer/) are examples of
WordPress plugins to help you optimise images at the server level.

If you have done your job well before uploading, those tools will have very little
to do.

Conclusion
There is much more to the subject of preparing your images for web, including the
topic of Retina and the complications caused by high resolution screens, as well as
the various tools within WordPress for adding SEO and other value to the images
you upload. These more advanced topics will be the subject of other Photografica
guides in the near future, so watch this space.

Hopefully you have enough information here to understand the concepts at play
and to help you begin sizing and saving your images at appropriate dimensions and
compression so they look great and keep your web page load time to a minimum.

Your feedback is always welcome at [email protected]

Geoff

photografica

photografica.com.au: How to prepare images for use on the web 9