Unit 2.2 Data Compression, Images
Lab will perform alterations on images, manipulate RGB values, and reduce the number of pixels. College Board requires you to learn about Lossy and Lossless compression.
- Enumerate "Data" Big Idea from College Board
- Image Files and Size
- Displaying images in Python Jupyter notebook
- Reading and Encoding Images (2 implementations follow)
- Data Structures, Imperative Programming Style, and working with Images
- Data Structures and OOP
- Additionally, review all the imports in these three demos. Create a definition of their purpose, specifically these ...
- Hacks
Enumerate "Data" Big Idea from College Board
Some of the big ideas and vocab that you observe, talk about it with a partner ...
- "Data compression is the reduction of the number of bits needed to represent data"
- "Data compression is used to save transmission time and storage space."
- "lossy data can reduce data but the original data is not recovered"
- "lossless data lets you restore and recover"
The Image Lab Project contains a plethora of College Board Unit 2 data concepts. Working with Images provides many opportunities for compression and analyzing size.
Image Files and Size
Here are some Images Files. Download these files, load them into
imagesdirectory under _notebooks in your Blog.
Describe some of the meta data and considerations when managing Image files. Describe how these relate to Data Compression ...
- File Type, PNG and JPG are two types used in this lab
- Different types of images have different compression methods in order to store data in either more or less detail. JPG images have lossy compression, meaning that when they are compressed they lose quality, leading to worse image quality the more they are compressed. PNG has lossless image quality, meaning that when they are compressed, they don't lose image quality, having better data at a smaller image size. Other types of image formats include SVGs and TIFF files, both of which have a lot better image quality than JPG and PNG. SVG files can be infinitely scaled electronically and the image quality would still be very clear.
- Size, height and width, number of pixels
- These determine how large the image is, making the file larger or smaller depending on the amount of data stored in the image. More pixels lead to a larger image, meaning that the image will have more detail.
- Visual perception, lossy compression
- Some data that repeats multiple times in a file can be compressed, leading to a smaller file size. The lossy compression is where parts of the data is lost with compression. This is used for pictures and videos for people to view images and videos without having to wait for everything to load.
Displaying images in Python Jupyter notebook
Python Libraries and Concepts used for Jupyter and Files/Directories
IPython
Support visualization of data in Jupyter notebooks. Visualization is specific to View, for the web visualization needs to be converted to HTML.
pathlib
File paths are different on Windows versus Mac and Linux. This can cause problems in a project as you work and deploy on different Operating Systems (OS's), pathlib is a solution to this problem.
- What are commands you use in terminal to access files?
- In terminal I use
cdto access folders andlsto show the files and folders in the directory. There are other commands likecatandstrings,catused for printing the file contents andstringslisting strings. to access files inside the terminal,nano,vim, andgeditcan be used to edit the terminal files.
-
What are the command you use in Windows terminal to access files?
- In the Windows terminal,
diris used to list the directories and files,treeis used to list the subdirectories of the directories in the file,cdis used to change the directory, and there are also many other different types of commands used to access and select files.
- In the Windows terminal,
-
What are some of the major differences?
- Some major differences between the commands of different operating systems is the syntax, or the way commands are entered into the system. The operating system then takes the command and translates differently based on the different operating systems.
Provide what you observed, struggled with, or leaned while playing with this code.
-
Why is path a big deal when working with images?
- Path is important when dealing with images because they are needed to find the files that are requested based on a file path. This is essential to finding the files and later displaying them onto the user interface. There are two different file paths, absolute and relative paths. Absolute paths need to know the full path of a file while a relative path only need the general position of the file, such as in a folder.
-
How does the meta data source and label relate to Unit 5 topics?
- In Unit 5, we talked about cybersecurity of personal information and how the data can be protected. Meta data is similar to the information stored in security, where there could be sensitive information that may need to stay hidden from the public and is important to protect.
-
Look up IPython, describe why this is interesting in Jupyter Notebooks for both Pandas and Images?
- IPython is a python library that is made to enhance the python interactive shell experience. It allows us to render images, diagrams, and datasets in order to be able to view them.
from IPython.display import Image, display
from pathlib import Path # https://medium.com/@ageitgey/python-3-quick-tip-the-easy-way-to-deal-with-file-paths-on-windows-mac-and-linux-11a072b58d5f
# prepares a series of images
def image_data(path=Path("images/"), images=None): # path of static images is defaulted
if images is None: # default image
images = [
{'source': "Peter Carolin", 'label': "Clouds Impression", 'file': "clouds-impression.png"},
{'source': "Peter Carolin", 'label': "Lassen Volcano", 'file': "lassen-volcano.jpg"},
{'source': "David", 'label': "smile", 'file': "Smiley.png"}
]
for image in images:
# File to open
image['filename'] = path / image['file'] # file with path
return images
def image_display(images):
for image in images:
display(Image(filename=image['filename']))
# Run this as standalone tester to see sample data printed in Jupyter terminal
if __name__ == "__main__":
# print parameter supplied image
orange_square = image_data(images=[{'source': "Internet", 'label': "orange Square", 'file': "orange-square-16.png"}])
image_display(orange_square)
# display default images from image_data()
default_images = image_data()
image_display(default_images)
Reading and Encoding Images (2 implementations follow)
PIL (Python Image Library)
Pillow or PIL provides the ability to work with images in Python. Geeks for Geeks shows some ideas on working with images.
base64
Image formats (JPG, PNG) are often called *Binary File formats, it is difficult to pass these over HTTP. Thus, base64 converts binary encoded data (8-bit, ASCII/Unicode) into a text encoded scheme (24 bits, 6-bit Base64 digits). Thus base64 is used to transport and embed binary images into textual assets such as HTML and CSS.- How is Base64 similar or different to Binary and Hexadecimal?
- Base64 is similar to binary and hexidecimal as it is another way to display numerical data. Binary operates in powers of 2, hexidecimal in 16, and Base64 in powers of 64, meaning that it is useful in storing large amounts of data.
-
Translate first 3 letters of your name to Base64.
- Translating into binary:
D = 068 = 01000100A = 065 = 01000001V = 086 = 01010110DAV = 068 065 086 = 01000100 01000001 01010110 - Splitting into 6 bit chunks:
010001 000100 000101 010110 - Translating result:
010001 = 17 = R000100 = 4 = E000101 = 5 = F010110 = 22 = W - Final:
REFW
- Translating into binary:
numpy
Numpy is described as "The fundamental package for scientific computing with Python". In the Image Lab, a Numpy array is created from the image data in order to simplify access and change to the RGB values of the pixels, converting pixels to grey scale.
io, BytesIO
Input and Output (I/O) is a fundamental of all Computer Programming. Input/output (I/O) buffering is a technique used to optimize I/O operations. In large quantities of data, how many frames of input the server currently has queued is the buffer. In this example, there is a very large picture that lags.
- Where have you been a consumer of buffering?
- Some times when I watch youtube videos, I might experience some buffering problems when the next frames of the video are being rendered to prepare a smoother viewing experience.
-
From your consumer experience, what effects have you experienced from buffering?
- Typically the video will play with a "studder", with occasional pauses and such to tender the future frames.
-
How do these effects apply to images?
- Sometimes, when my browser tries to render a high definition image, it will render each pixel or row of pixels individually one at a time, until the full image has been rendered.
Data Structures, Imperative Programming Style, and working with Images
Introduction to creating meta data and manipulating images. Look at each procedure and explain the the purpose and results of this program. Add any insights or challenges as you explored this program.
- Does this code seem like a series of steps are being performed?
- Yes, there is a series of steps being performed in this code. From a cursory glance, the program includes functions to load up image paths, scaling images, and conversions to base 64. However, the core of the program lies in the
image_management()andimage_management_add_html_grey()functions.
-
Describe Grey Scale algorithm in English or Pseudo code?
- For each pixel in the image, the algorithm will take the average of the values in each color channel for red, blue and orange. By taking the average, the algorith now has a singular value to assign to the black and white channel to describe an image in terms of black and white.
-
Describe scale image? What is before and after on pixels in three images?
- The scaling of an image is done by calculating a ratio between the original image and a set base width. After the ratio is calculated, we would calculate a scale tuple to plug into the
resize()method provided by the pillow library
- The scaling of an image is done by calculating a ratio between the original image and a set base width. After the ratio is calculated, we would calculate a scale tuple to plug into the
-
Is scale image a type of compression? If so, line it up with College Board terms described?
- This scale image is a type of compression, as we are essentially melding the pixels with their neighbors to reduce the size of the image. In collegeboard terms, this would be known as lossy compression, as it would be nigh dificult to attempt to reconstruct the original color values of the image from an average.
from IPython.display import HTML, display
from pathlib import Path # https://medium.com/@ageitgey/python-3-quick-tip-the-easy-way-to-deal-with-file-paths-on-windows-mac-and-linux-11a072b58d5f
from PIL import Image as pilImage # as pilImage is used to avoid conflicts
from io import BytesIO
import base64
import numpy as np
# prepares a series of images
def image_data(path=Path("images/"), images=None): # path of static images is defaulted
if images is None: # default image
images = [
{'source': "Internet", 'label': "orange Square", 'file': "green-square-16.png"},
{'source': "Peter Carolin", 'label': "Clouds Impression", 'file': "clouds-impression.png"},
{'source': "Peter Carolin", 'label': "Lassen Volcano", 'file': "lassen-volcano.jpg"}
]
for image in images:
# File to open
image['filename'] = path / image['file'] # file with path
return images
# Large image scaled to baseWidth of 320
def scale_image(img):
baseWidth = 320
scalePercent = (baseWidth/float(img.size[0]))
scaleHeight = int((float(img.size[1])*float(scalePercent)))
scale = (baseWidth, scaleHeight)
return img.resize(scale)
# PIL image converted to base64
def image_to_base64(img, format):
with BytesIO() as buffer:
img.save(buffer, format)
return base64.b64encode(buffer.getvalue()).decode()
# Set Properties of Image, Scale, and convert to Base64
def image_management(image): # path of static images is defaulted
# Image open return PIL image object
img = pilImage.open(image['filename'])
# Python Image Library operations
image['format'] = img.format
image['mode'] = img.mode
image['size'] = img.size
# Scale the Image
img = scale_image(img)
image['pil'] = img
image['scaled_size'] = img.size
# Scaled HTML
image['html'] = '<img src="data:image/png;base64,%s">' % image_to_base64(image['pil'], image['format'])
# Create Grey Scale Base64 representation of Image
def image_management_add_html_grey(image):
# Image open return PIL image object
img = image['pil']
format = image['format']
img_data = img.getdata() # Reference https://www.geeksforgeeks.org/python-pil-image-getdata/
image['data'] = np.array(img_data) # PIL image to numpy array
image['gray_data'] = [] # key/value for data converted to gray scale
# 'data' is a list of RGB data, the list is traversed and hex and binary lists are calculated and formatted
for pixel in image['data']:
# create gray scale of image, ref: https://www.geeksforgeeks.org/convert-a-numpy-array-to-an-image/
average = (pixel[0] + pixel[1] + pixel[2]) // 3 # average pixel values and use // for integer division
if len(pixel) > 3:
image['gray_data'].append((average, average, average, pixel[3])) # PNG format
else:
image['gray_data'].append((average, average, average))
# end for loop for pixels
img.putdata(image['gray_data'])
image['html_grey'] = '<img src="data:image/png;base64,%s">' % image_to_base64(img, format)
# Jupyter Notebook Visualization of Images
if __name__ == "__main__":
# Use numpy to concatenate two arrays
images = image_data()
# Display meta data, scaled view, and grey scale for each image
for image in images:
image_management(image)
print("---- meta data -----")
print(image['label'])
print(image['source'])
print(image['format'])
print(image['mode'])
print("Original size: ", image['size'])
print("Scaled size: ", image['scaled_size'])
print("-- original image --")
display(HTML(image['html']))
print("--- grey image ----")
image_management_add_html_grey(image)
display(HTML(image['html_grey']))
print()
Data Structures and OOP
Most data structures classes require Object Oriented Programming (OOP). Since this class is lined up with a College Course, OOP will be talked about often. Functionality in remainder of this Blog is the same as the prior implementation. Highlight some of the key difference you see between imperative and oop styles.
- Read imperative and object-oriented programming on Wikipedia
- Consider how data is organized in two examples, in relations to procedures
- Look at Parameters in Imperative and Self in OOP
Additionally, review all the imports in these three demos. Create a definition of their purpose, specifically these ...
- PIL - This is the Pillow Library, which is mainly used for image manipulations and opertaions in Python. It allows us to edit and control our images in a way that would be best fit for our program
- numpy - This is a library priarily used to represent numerical data in vectors. This library is especially useful as it allows us to perform vector and matrix operations on much of our data, and also grainting access to higher level operations such as cross and dot products that normal arrays don't support
- base64 - This is a character encoding format where binary bytes could be abstracted into a reprsentation of base-64 values and data.
from IPython.display import HTML, display
from pathlib import Path # https://medium.com/@ageitgey/python-3-quick-tip-the-easy-way-to-deal-with-file-paths-on-windows-mac-and-linux-11a072b58d5f
from PIL import Image as pilImage # as pilImage is used to avoid conflicts
from io import BytesIO
import base64
import numpy as np
class Image_Data:
def __init__(self, source, label, file, path, baseWidth=320):
self._source = source # variables with self prefix become part of the object,
self._label = label
self._file = file
self._filename = path / file # file with path
self._baseWidth = baseWidth
# Open image and scale to needs
self._img = pilImage.open(self._filename)
self._format = self._img.format
self._mode = self._img.mode
self._originalSize = self.img.size
self.scale_image()
self._html = self.image_to_html(self._img)
self._html_grey = self.image_to_html_grey()
@property
def source(self):
return self._source
@property
def label(self):
return self._label
@property
def file(self):
return self._file
@property
def filename(self):
return self._filename
@property
def img(self):
return self._img
@property
def format(self):
return self._format
@property
def mode(self):
return self._mode
@property
def originalSize(self):
return self._originalSize
@property
def size(self):
return self._img.size
@property
def html(self):
return self._html
@property
def html_grey(self):
return self._html_grey
# Large image scaled to baseWidth of 320
def scale_image(self):
scalePercent = (self._baseWidth/float(self._img.size[0]))
scaleHeight = int((float(self._img.size[1])*float(scalePercent)))
scale = (self._baseWidth, scaleHeight)
self._img = self._img.resize(scale)
# PIL image converted to base64
def image_to_html(self, img):
with BytesIO() as buffer:
img.save(buffer, self._format)
return '<img src="data:image/png;base64,%s">' % base64.b64encode(buffer.getvalue()).decode()
# Create Grey Scale Base64 representation of Image
def image_to_html_grey(self):
img_grey = self._img
numpy = np.array(self._img.getdata()) # PIL image to numpy array
grey_data = [] # key/value for data converted to gray scale
# 'data' is a list of RGB data, the list is traversed and hex and binary lists are calculated and formatted
for pixel in numpy:
# create gray scale of image, ref: https://www.geeksforgeeks.org/convert-a-numpy-array-to-an-image/
average = (pixel[0] + pixel[1] + pixel[2]) // 3 # average pixel values and use // for integer division
if len(pixel) > 3:
grey_data.append((average, average, average, pixel[3])) # PNG format
else:
grey_data.append((average, average, average))
# end for loop for pixels
img_grey.putdata(grey_data)
return self.image_to_html(img_grey)
# prepares a series of images, provides expectation for required contents
def image_data(path=Path("images/"), images=None): # path of static images is defaulted
if images is None: # default image
images = [
{'source': "Internet", 'label': "Green Square", 'file': "green-square-16.png"},
{'source': "Peter Carolin", 'label': "Clouds Impression", 'file': "clouds-impression.png"},
{'source': "Peter Carolin", 'label': "Lassen Volcano", 'file': "lassen-volcano.jpg"}
]
return path, images
# turns data into objects
def image_objects():
id_Objects = []
path, images = image_data()
for image in images:
id_Objects.append(Image_Data(source=image['source'],
label=image['label'],
file=image['file'],
path=path,
))
return id_Objects
# Jupyter Notebook Visualization of Images
if __name__ == "__main__":
for ido in image_objects(): # ido is an Imaged Data Object
print("---- meta data -----")
print(ido.label)
print(ido.source)
print(ido.file)
print(ido.format)
print(ido.mode)
print("Original size: ", ido.originalSize)
print("Scaled size: ", ido.size)
print("-- scaled image --")
display(HTML(ido.html))
print("--- grey image ---")
display(HTML(ido.html_grey))
print()
Hacks
Early Seed award
- Add this Blog to you own Blogging site.
- In the Blog add a Happy Face image.
- Have Happy Face Image open when Tech Talk starts, running on localhost. Don't tell anyone. Show to Teacher.
AP Prep
- In the Blog add notes and observations on each code cell that request an answer.
- In blog add College Board practice problems for 2.3
- Choose 2 images, one that will more likely result in lossy data compression and one that is more likely to result in lossless data compression. Explain.
Project Addition
- If your project has images in it, try to implement an image change that has a purpose. (Ex. An item that has been sold out could become gray scale)
Pick a programming paradigm and solve some of the following ...
- Numpy, manipulating pixels. As opposed to Grey Scale treatment, pick a couple of other types like red scale, green scale, or blue scale. We want you to be manipulating pixels in the image.
- Binary and Hexadecimal reports. Convert and produce pixels in binary and Hexadecimal and display.
- Compression and Sizing of images. Look for insights into compression Lossy and Lossless. Look at PIL library and see if there are other things that can be done.
- There are many effects you can do as well with PIL. Blur the image or write Meta Data on screen, aka Title, Author and Image size.
from IPython.display import HTML, display
from pathlib import Path
from PIL import Image as pilImage
from PIL import ImageFilter
from io import BytesIO
import base64
import numpy as np
def image_data(path=Path("images/"), images=None): # path of static images is defaulted
if images is None: # default image
images = [
{'source': "Internet", 'label': "Smile", 'file': "Smiley.png"}
]
for image in images:
image['filename'] = path / image['file']
return images
def scale_image(img):
baseWidth = 250
scalePercent = (baseWidth/float(img.size[0]))
scaleHeight = int((float(img.size[1])*float(scalePercent)))
scale = (baseWidth, scaleHeight)
return img.resize(scale)
def image_to_base64(img, format):
with BytesIO() as buffer:
img.save(buffer, format)
return base64.b64encode(buffer.getvalue()).decode()
def image_management(image):
img = pilImage.open(image['filename'])
image['format'] = img.format
image['mode'] = img.mode
image['size'] = img.size
img = scale_image(img)
image['pil'] = img
image['scaled_size'] = img.size
image['html'] = '<img src="data:image/png;base64,%s">' % image_to_base64(image['pil'], image['format'])
def image_management_add_html_orange(image):
img = image['pil']
format = image['format']
img_data = img.getdata()
image['data'] = np.array(img_data)
image['orange_data'] = []
for pixel in image['data']:
if len(pixel) > 3:
image['orange_data'].append((pixel[1], pixel[0], pixel[0], pixel[3]))
else:
image['orange_data'].append((pixel[2], pixel[0], pixel[0]))
img.putdata(image['orange_data'])
image['html_color'] = '<img src="data:image/png;base64,%s">' % image_to_base64(img, format)
if __name__ == "__main__":
images = image_data()
for image in images:
image_management(image)
print("---- meta data -----")
print(image['label'])
print(image['source'])
print(image['format'])
print(image['mode'])
print("Original size: ", image['size'])
print("Scaled size: ", image['scaled_size'])
print("-- original image --")
display(HTML(image['html']))
print("--- white image ----")
image_management_add_html_orange(image)
display(HTML(image['html_color']))
print()
from IPython.display import HTML, display
from pathlib import Path
from PIL import Image as pilImage
from PIL import ImageFilter
from io import BytesIO
import base64
import numpy as np
def image_data(path=Path("images/"), images=None): # path of static images is defaulted
if images is None: # default image
images = [
{'source': "Internet", 'label': "Smile", 'file': "Smiley.png"}
]
for image in images:
image['filename'] = path / image['file']
return images
def scale_image(img):
baseWidth = 250
scalePercent = (baseWidth/float(img.size[0]))
scaleHeight = int((float(img.size[1])*float(scalePercent)))
scale = (baseWidth, scaleHeight)
return img.resize(scale)
def image_to_base64(img, format):
with BytesIO() as buffer:
img.save(buffer, format)
return base64.b64encode(buffer.getvalue()).decode()
def image_management(image):
img = pilImage.open(image['filename'])
image['format'] = img.format
image['mode'] = img.mode
image['size'] = img.size
img = scale_image(img)
image['pil'] = img
image['scaled_size'] = img.size
image['html'] = '<img src="data:image/png;base64,%s">' % image_to_base64(image['pil'], image['format'])
def image_management_add_html_orange(image):
img = image['pil']
format = image['format']
img_data = img.getdata()
image['data'] = np.array(img_data)
image['orange_data'] = []
for pixel in image['data']:
if len(pixel) > 3:
image['orange_data'].append((min(int(round(pixel[0]*5)), 255), min(int(round(pixel[1]*5)), 255), min(int(round(pixel[2]*5)), 255), pixel[2]))
else:
image['orange_data'].append((min(int(round(pixel[0]*5)), 255), min(int(round(pixel[1]*5)), 255), min(int(round(pixel[2]*5)), 255)))
img.putdata(image['orange_data'])
image['html_color'] = '<img src="data:image/png;base64,%s">' % image_to_base64(img, format)
if __name__ == "__main__":
images = image_data()
for image in images:
image_management(image)
print("---- meta data -----")
print(image['label'])
print(image['source'])
print(image['format'])
print(image['mode'])
print("Original size: ", image['size'])
print("Scaled size: ", image['scaled_size'])
print("-- original image --")
display(HTML(image['html']))
print("--- gradient image ----")
image_management_add_html_orange(image)
display(HTML(image['html_color']))
print()
