How To Prepare An Image For Your Website Using Gimp

Overview

This tutorial is going to show you how to prepare your images for your website. We need to know what size we the image should be and then we’re going to crop it. In this walkthrough, I’ll show you:

Background Info

• Different image file types.
• Difference between DPI and Pixel Dimensions.

How To/Step By Step

• How to use Chrome developer tools to figure out the image size you need.
• How to crop your image to the size you need.
• How to save the image so that it is web-ready.

Different Image File Types

There are so many image file types out there, but which is the right image type for you? There are 2 image types that we are primarily concerned about: Jpeg and Tif. The others like PNG, Gif, PSD, Raw are all for special use and are not discussed here.

The Tif File – Use For Printing And Retouching

The tif file is the most versatile file type available because it doesn’t remove data when saved and compressed. This makes the file-type special because it allows you to enlarge the file sometimes up to 2 times its size without seeing much degradation of the image. This also means that it is the ideal file type for doing fancy Photoshop retouching work. This image can be used in layouts like Indesign where the end result is a print. The downside is that this is a large beefy file because it doesn’t remove any data when compressed & it’s just simply too big to use online.

The Jpeg Or Jpg – Use For Online Only

The jpeg is special because of its compression, meaning that it can give you a very small file. The only problem is that it is a destructive lossy compression, which means that it deletes and combines data in in the file to achieve a small file. This is just fine as long as you don’t put the image into a situation where it needs to enlarge. What happens when you enlarge a jpeg is that you start to get artifacting and the image basically starts to fall apart.

The jpeg is meant to be a destination file, which means once we convert an image like a tif to a jpeg that’s it. So we need to know what the final destination size is prior to making this conversion. Discovering this size in the next part of this tutorial.

DPI Is For Printing & Pixel Dimension Is For Web

By now you’ve probably noticed that an image is treated differently when we are talking about printing it vs using it online. That is because when we are printing something we are typically dealing with an actual measurement of length and with a screen the amount of pixels needs to be dynamic to fit different screens. Professionals that have a background in pre-press management particularly have a difficult time wrapping their head around this.

DPI means dots per inch, which refers to the amount of ink spots that are dropped by the printer onto the piece of paper within one inch. For example, an Epson inkjet printer drops roughly 300 dots per inch, thus 300 dpi. So if my image is 3000 pixels by 3000 pixels in size, then I can print a 10 inch x 10 inch print. A newspaper printing press typically prints at 150 dpi and a CMYK Press, the printer that prints your junk mail, is at about 200 dpi depending. Computer screens display images differently than this because they are not based in the physical world of inches.

We don’t need to use DPI when discussing image sizes for use online, we only need to discuss the pixel height and width. This gets confusing because it is standard practice to refer to web images as 72 dpi, but this is not necessary because an inch is not an inch on a screen. In the image below we can view a square image size in Photoshop.

Example: Pixel Dimensions Vs Document Size (DPI)

The Pixel Dimensions and the Document Size are two different ways of looking at the same thing. Notice that when we change the DPI from 300 dpi (print) to 72 dpi (web) the inches get bigger but the pixels stay the same. What this demonstrates is that when moving from one medium to another the Pixel Dimension remains the same. This is important because when a website is coded it deals with the pixel height and length of the image, and not its size in inches.

In short, when talking about web images we need to focus on the Pixel Dimensions on the website and not the DPI.

Helpful Resources on DPI:
http://graphicdesign.stackexchange.com/questions/13777/is-it-mandatory-to-keep-images-at-72dpi-for-web-design

How To Find Out What The Pixel Dimensions I Need On My Website?

We need to find out what are the pixel dimensions in “height and width” of the image placeholder that will hold our image on our website. We can do this by using Chrome’s Developer Tools when viewing our website. Oftentimes this data isn’t given to the user and so what I’m about to show you is a quick independent way of doing it.

Step 1

Go To The Webpage That You Want To Add An Image To.

In this example we’re going to use the POW Photography product page. We use Shopify to run our e-commerce site. It is best practice to crop your image to exactly the dimensions you need and then scale it to the maximum size you need it within those dimensions. This will keep your site loading quickly, and depending on how your site has been coded it may be required. Some sites like Shopify resize images for you, but it is still best to find out the dimensions, crop, and save your images to the correct size, and not rely on a bot to make decisions for you about image size.

Sometimes, you may want to do a roll over, zoom-in function on the product. In this case, double the size of the image before uploading.

Step 2

Right Click On The Image And Select “Inspect Element”

Hover over the image or placeholder you want to insert your image and right-click and choose inspect element.

Step 3

Read The Dimensions

Inspecting an element shows a ton of code stuff. The information we’re looking for is the Img size. You see that the blue shows an image size of 433px x 480px. This is the placeholder for the image and not the actual image itself. If we drag the image to the desktop, the image might be bigger or smaller because the code has possibly resized it to fit the placeholder.

We want to crop and resize our image to the exact placeholder so there’s no question how our image will be presented.

A Note On How Code Affects Images

In the above example we have a 433px X 480px placeholder. We can actually add an image that has 2x that resolution and the code (if coded correctly) will be able to shrink it down to fit that placeholder. So if we crop and resize our image to say 866px X 960px, then the code will shrink that image down to 433px X 480px. We would want to do something like this if we wanted to add a zoom feature to the product image.

Please note that the code to make this happen is not always standard and is sometimes not implemented on custom sites. If you upload an image and it’s stretched out or skewed then you should contact the person who made your site and they should be able to fix it with a few lines of CSS code.

How To Crop & Resize Your Image

Choose Your Editor:

Adobe Lightroom – $150

Even though it’s not talked about in this tutorial, I recommend that you use Adobe Lightroom for all of your image editing and organizing needs. You can download a free trial here but it normally costs $150. Lightroom is a pre-Photoshop editor and image organizer that’s basically a better built iPhoto. Here at POW, we do most of our work in Lightroom and only go into Photoshop for really high level retouching and clipping. The key benefit is that you can edit many photos at one time quickly, instead of Photoshop where you can only edit one at a time. As a small business you probably have many SKUs and images of those SKUs; Lightroom is a great way to manage all your images and make small adjustments if needed.

Gimp – Free Photoshop Clone

Gimp is a free open source Photoshop clone. The issue is that it’s a Photoshop clone and Photoshop is a complicated piece of software. Photoshop is great for editing one image at a time, unlike Lightroom which is good for editing many images at once. Since this software is free, this is the software we will use for the tutorial. https://www.gimp.org/downloads/

Pixlr Editor – Free Photoshop Clone Online

Another solution is Pixlr Editor, not to be confused with the desktop version. I actually prefer this over Gimp because it’s online and quick to load. It’s not as complex as the other 2 solutions, but it has everything you need for quick resizing. If you’re used to Photoshop, Gimp is your answer - if not, then this might be better. I did a little video on how to resize your images using Pixlr.

How to resize image using Pixlr: https://youtu.be/oZ0aTyiRN-Y

Crop Your Image Using Gimp

Step 1: Open Your Image In Gimp

You’ll see the image size in pixels in the top bar. In the example the image is currently 4346 pixels wide x 3260 pixels high. We need to crop the image to our website dimensions that we gathered from Inspect Element which was 433 pixels wide by 480 pixels high.

Step 2: Crop Tool

Choose the crop tool by either using the keyboard shortcut “shift – C” or going into the menu and choosing Tools > Transform Tools > Crop, or choose the tool in the toolbox menu that looks like an Exacto knife.

Step 3: Set Your Dimensions & Crop It

You have the choice of freely setting your crop or setting a fixed aspect ratio. You want to fix the aspect ratio to the 433:480. Do that by typing it into the text box below Fixed: Aspect Ratio. You will see in the top bar that the image dimensions are now 2144 x 3120, which is an aspect ratio of the 433 x 480.

Step 4: Scale Your Image Down (Optional)

This step is optional as most modern websites are coded in a way that will shrink your image down automatically. However, if you want to speed up your website (which is good for SEO and increasing website speed) you can actually shrink your image down to the exact size that you need it.

Simply go to Image > Scale Image

Under Image Size type in the width that you need which in this case is 433. If the chain is clicked it will automatically adjust the height to the aspect-ratio you set in the crop.

Step 5: Save To SRGB Color Profile (Only If Needed)

If you got your images from POW then everything is already set up as sRGB, which is what the Colorspace needs to be set to in order for it look correct on the web. Colorspace and color profiles are super complicated stuff, but to summarize it, it’s a little code embedded in the image that makes your color look correct. For web browsers it’s sRGB and for print it’s AdobeRGB or ProPhoto for an inkjet printer.

A symptom of using the wrong profile is the contrast looking like it’s really high when you upload it to your site.

Do this by going to Image > Mode > Assign Color Profile, and make sure it says sRGB.

If it is not go to both Assign and Convert To Color Profile and set it sRGB, you have to do both.

Step 6: Export As A Jpeg

It’s time to export your image as a Jpeg. Do this by going to File > Export as. Choose Jpeg in the lower right hand dialog box.

Now you’ll be given some options. As described above, jpeg compresses files by removing data. This is determined by the “Quality” scale. If you choose “Show Preview” and drag the slider to the left you can actually see the image start to deteriorate which begins to lower the file size. There is no standard for the quality bar, but I try and keep the file size around 100kb or less and I’m carefully watching the image as I lower it and stop before the image is damaged too much. In this example I choose a “Quality of 80”.