5 Easy Steps to Resizing an Image in GIMP 2.x

| Web Design

5 Easy Steps to Resizing an Image in GIMP 2.10.14

Sometimes a client complains that their photo-heavy site takes "forever" to load and that is a major issue for their users. The truth is that nearly 50% of web users expect a site to load in 2 seconds or less, and will usually leave a site that doesn’t load within 3 seconds max. That could equate to money lost, and no one is happy with that situation.

Other times, a client wants to be able to upload their own images, but has no clue why that 10 MB file errors out every time.  

You kindly explain that their image file sizes are too big and need to be made smaller in order to upload and have faster page loads. That even if they "shrink them down" using the WYSIWYG editor, that doesn't count. The site will still load slowly.  TIP: The optimum file size for pics uploaded to the web is 500 KB or less per image (the less the better).

This is usually followed by, "What does that mean?" Or, "How do I do that? I don't have Photoshop, and wouldn't know how to use it if I did."

And now is when you send the client a link to this blog post, because in 5 easy steps, we will show them how to resize and crop an image quickly... without having to buy any software! Let's get started....

Step #1: Download GIMP

A) Go to GIMP.org & download the latest version of GIMP.  (This tutorial used version 2.10.14) Select for either macOS or Microsoft Windows.  We suggest the ORANGE button - the download directly option. 

5 Easy Steps to Resizing an Image in GIMP 2.10.14

B) INSTALL the application by following the steps that pop up on the screen. 

C) OPEN the program.


Step #2: Open Image

A) CLICK File / Open / (navigate to specific file desired).

Screen Shot 2020 03 04 at 11.57.20 AM

B) CLICK Convert when prompted by the Import the image from a color profile popup.  Make no changes here.

Convert


Step #3: Crop Image - if needed.  (if not, skip this step!)

A) MAKE the image fit on the screen completely.  Go to bottom of screen and CHANGE percentage until you can see entire picture.

FitonScreen

B) SELECT the Crop Tool.

croptool

C) CLICK & DRAG the crop tool over image.  Adjust initial crop by clicking on corners or edges and dragging. The darkened areas will be "cut" away once crop is applied. 

clickDragCrop

D) CLICK in center of image to apply the crop.


Step #4: Scale Image

A) CLICK on Image/Scale Image.

scaleImage

B) CHANGE image Size.  Either type in a specific number or use the up/down arrow keys.  The Width and Height are linked by default, so entering a width will automatically change the height proportionately. If unsure of the width needed, check out these Standard Image Size charts.  As a reference, the image below is 700 px wide with the default resolution of 72 dpi.

1000width

C) CLICK Scale


Step #5: Export Image

A) CLICK File / Export As.

exportAS

B) CHANGE the name of the image and PICK a place on your computer to SAVE the image.

exportSCRN

 C) SELECT  a file type by CLICKING on the + sign next to Select File Type (By Extension). Scroll down until you see JPEG image and CLICK on that option.

filetype

D) CLICK Export.

E) SELECT the quality.  Anything from 60-80 will do nicely.  (The bigger the number, the larger the file size.)

quality

E) CLICK Export.


Results: From Megabytes (MB) to Kilobytes (KB)

The RESIZED Image is 1000 px wide; the original is 4432 px wide.beforeAFTER

 

For Reference:

2.5 MB version = ~14 seconds to load on a T1 connection

137 KB version = ~ less than 1 second to load on a T1 connection


About the author

Mikall has worked in the graphic art, marketing, and web world for over 25 years and is super excited to bring all of her experience to OSTraining. She's done everything from logo design to app UX / UI to magazine ads & covers. Aside from that, Mikall is also a photographer, videographer, and video editor. She loves sci-fi/fantasy adventure and happily lives in Houston, Tx!