Our goal is to have images that look great, and load quickly.
As a web developer, your key job description may not include image preparation, but in reality the web developer is the person often responsible for the final format of images posted online
Basically we have three steps in the process of preparing images for the web:
We will start with images specifically for use as a hero image, or in an image carousel. The ‘hero image’ is a term used to refer to the primary image typically found out the top of a web page. This is a single, large image used to communicate what the website is all about.
We want images that are at least 1920px in width, or larger. It is better to start with images that are larger than necessary, then edit or trim these images. We can start with images smaller than what we need, but as we enlarge them, the quality suffers.
Our example website is based about pencils, so first let’s use Google images to find some images to use.
Google search for pencil wall paper images (you may use your own search terms)
Notice that as I place my cursor over the image, Google will indicate the size of the source image. I am going to click on the image. We want to view the original image. When we view the original image, we will be able to copy the URL, or Uniform Resource Locator. The URL is the web address for the image, and we will use this web address to load the image into the free online image editor, Pixlr.
Before we start editing our images, let’s talk about image ratios. The image ratios express the relationship between an image’s width, and the image’s height.
Let’s go to ratio.cs952.org.
On this page you can see how different image ratios compare.
We will start with the 1:1 format which is simply a square. The 4:3 format is also popular, the 4:3 format was the choice of computer monitors and televisions screens for years, thought the wider 3:2 is also a popular format with digital cameras.
The 16:9 format is one of the most common formats today. This is a widescreen format used for many film and video productions. Finally I have a custom ratio of 4:1. I used 4:1 for the example website. Not because 4:1 is necessarily a great ratio for a website, but because the more narrow the image is, the more vehicle content we can include on a screen. And for the purposes of learning web design, we are including a lot of content on the web page.
Now we will find and open Pixlr. I will search for Pixlr using Google. We will use Pixlr Express, which is the stream-lined image editor that does just about everything we will need.
Pixlr Free Online Image Editor
The first step is cropping our image. The crop section gives us a variety of image ratios to use.
Next we will resize the image. For our website, we are going to change the image width to 1920px. This will be wide enough to fill most computer monitors. We can make the image wider if we want, but right now we are trying to maximize both image quality, and load speed.
Generally speaking, the larger the image, the better the image looks, but the longer it will take to load. Remember, our goal is to have images that look great, and load quickly.
Now that we have cropped and reduced our image size to 1920 pixels, we are going to go one more step to optimize the image for fast loading. My favorite site for image optimization is tiny panda, or tiny png.
This is a free site where you an upload jpg or png files, and then compress them to their smallest size with a minimal loss of quality.
You can process one image at a time, or process up to 20 images at the same time.
Now that you have some images to use for your website, you will learn how to take an image, upload the image to Adobe Creative Color, and use the free, online Creative Color website to extract highlighted colors from your image.
This will create a color set of five colors, which can later be imported in to Dreamweaver. These colors can also be used to create suggested colors for your navigation bar.
Wayne Joness
West Los Angeles College, cs952
Fall