ITIS3135 Pictures Page

Everything Pictures

This page demonstrates how images behave across different formats, sizes, and proportions on the web. It explores the difference between a large, high-quality source photo and a personal photo taken on a phone, showing how each can be converted to different formats (JPG, GIF, greyscale, black and white), properly resized for the web, improperly stretched or squished, and improperly enlarged from a too-small source. The goal is to understand how image size and proportion choices affect load times, visual quality, and overall site performance.

Demonstrating Image Manipulation with an Underwater Manatee Photo from Pexels.com

I chose this photo because it fit the dive and snorkel theme of my course site perfectly, and the close-up framing and fine detail in the manatee's skin texture made it a great candidate for testing how different formats and sizes affect image quality. The photo was taken by photographer Jorge Luis Morales on Pexels, who has a number of other underwater wildlife photos in his portfolio. The original image is a JPG, 6000 x 4000 pixels, and approximately 1.56 MB in size.

Original Image

Click to open the image in its original JPG format: underwater-manatee-closeup-12237825@jorge-luis-morales_pexels.jpg

Original Image as a GIF

Click to open the image in GIF format: underwater-manatee-closeup-12237825@jorge-luis-morales_pexels.gif

Notice the loss of subtle color detail in the water due to GIF's limited 256-color palette.

Greyscale Version

Click to open the image in greyscale: underwater-manatee-closeup-12237825@jorge-luis-morales_pexels-greyscale.jpg

Black and White Version

Click to open the image in pure black and white: underwater-manatee-closeup-12237825@jorge-luis-morales_pexels-blackandwhite.jpg

This version was created using GIMP's Threshold tool, producing only pure black and white pixels.

Downsizing Images with CSS

Manatee image resized with CSS — The 600x400 image displayed at an even smaller size (480x320) using inline CSS, while keeping the same proportions.

Proper Reduction of Image with Editor

Manatee image properly resized in GIMP to 600 by 400 pixels — This image was actually resized in GIMP to 600x400, rather than just scaled with CSS, resulting in a much smaller file size for faster loading.

Improper Image Proportions with CSS

The following four images all started from the properly resized 600x400 image, but have been stretched or squished to incorrect proportions:

Manatee image squished vertically — Squished vertically to 600x268 (height reduced 33%).

Manatee image squished vertically further — Squished vertically even further to 600x180 (height reduced another 33%).

Manatee image squished horizontally — Squished horizontally to 402x400 (width reduced 33%).

Manatee image squished horizontally further — Squished horizontally even further to 269x400 (width reduced another 33%).

Improper Enlarging with CSS

Properly sized manatee image at 600x400 — Properly sized 600x400 image displayed at its native size.

Small manatee image enlarged with CSS, showing pixelation — A tiny 150x100 image forced up to 600x400 with CSS, showing clear pixelation and quality loss.

Demonstrating Image Manipulation with a Personal Photo of a Candle Lid

For my personal geometry photo, I chose a round candle lid from White Barn, held next to my hand for scale and proportion comparison. The photo was taken on my iPhone and shows my hands holding the lid in my living room. The original image is 4284 x 5712 pixels.

Original Image

Click to open the image in its original JPG format: candle-lid-with-hands@emametz.jpg

Original Image as a GIF

Click to open the image in GIF format: candle-lid-with-hands@emametz.gif

Notice the reduced color palette compared to the original JPG.

Greyscale Version

Click to open the image in greyscale: candle-lid-with-hands@emametz-greyscale.jpg

Black and White Version

Click to open the image in pure black and white: candle-lid-with-hands@emametz-blackandwhite.jpg

This version was created using GIMP's Threshold tool.

Downsizing Images with CSS

Candle lid image resized with CSS — The 600x800 image displayed at an even smaller size (360x480) using inline CSS, keeping the same proportions.

Proper Reduction of Image with Editor

Candle lid image properly resized in GIMP to 600 by 800 pixels — This image was actually resized in GIMP to 600x800, resulting in a much smaller file size for faster loading.

Improper Image Proportions with CSS

The following four images all started from the properly resized 600x800 image, but have been stretched or squished to incorrect proportions:

Candle lid image squished vertically — Squished vertically to 600x536 (height reduced 33%).

Candle lid image squished vertically further — Squished vertically even further to 600x359 (height reduced another 33%).

Candle lid image squished horizontally — Squished horizontally to 402x800 (width reduced 33%).

Candle lid image squished horizontally further — Squished horizontally even further to 269x800 (width reduced another 33%).

Improper Enlarging with CSS

Properly sized candle lid image at 600x800 — Properly sized 600x800 image displayed at a scaled-down size.

Small candle lid image enlarged with CSS, showing pixelation — A tiny 150x200 image forced up to 450x600 with CSS, showing clear pixelation and quality loss.

AI Usage and Reflection

I used Claude to help plan the structure of this page and to walk through the GIMP editing process step by step, including converting images to GIF, greyscale, and black and white, properly resizing images, and creating the improperly stretched and enlarged comparison versions.

My biggest challenge was keeping track of all the different exported file versions and making sure I always returned to a clean base image in GIMP before creating each new stretched version, rather than accidentally stacking edits on top of each other. I learned just how much of a difference proper resizing in an image editor makes compared to relying on CSS alone, both in visual quality and file size.