Story 2383: Image reduction for Upload Post Images

[jlchilders11]

Issue: #2383

Summary & Context

Adds a helper function to allow for downscaling of uploaded images if they are over the size threshold.

Changes

• Adds downsize_uploaded_image to news/utils.py, which accepts an uploaded image, downscales it, and returns it for consumption
• Adds three values to settings values which control this downsizing: DOWNSCALED_HEIGHT, DOWNSCALED_WIDTH, DOWNSCALE_THRESHOLD
• Adds a test to ensure that the downscaling is reaching our established thresholds.

Self-review Checklist

• Tag at least one team member from each team to review this PR
• Link this PR to the related GitHub Project ticket

[julhoang]

Hi @jlchilders11 , please see a couple of change requests below 🙏

[julhoang]

Hi @jlchilders11 ! I've just discovered Pillow has a handy thumbnail method for us to leverage, please see more below.

[julhoang]

Suggested change

	if root:
	file_name = root
	file_name += ".webp"
	width, height = im.size
	p_width, p_height = None, None # Preferred output image width and height
	s_width, s_height = (
	settings.DOWNSCALED_IMAGE_WIDTH,
	settings.DOWNSCALED_IMAGE_HEIGHT,
	) # Settings based preferred width and height
	# Scale the preferred width and height in a proportional manner, to not skew the image
	# Scale based on the dimension that is further off from preferred dimensions
	if width - s_width >= height - s_height:
	p_width = s_width
	p_height = math.floor((p_width / width) * height)
	else:
	p_height = s_height
	p_width = math.floor((p_height / height) * width)
	r_image = im.resize((p_width, p_height))
	# Save to a BytesIO, actual file system saving will be handled by the form calling this function
	img = BytesIO()
	r_image.save(img, format="webp")
	img.seek(0)
	if root:
	file_name = root + ".webp"
	# Bake EXIF orientation into pixels so portrait phone photos don't end up sideways
	im = ImageOps.exif_transpose(im)
	# Fits within the bounding box, preserves aspect ratio, never upscales
	im.thumbnail(
	(settings.DOWNSCALED_IMAGE_WIDTH, settings.DOWNSCALED_IMAGE_HEIGHT),
	PImage.Resampling.LANCZOS,
	)
	# Save to a BytesIO, actual file system saving will be handled by the form calling this function
	img = BytesIO()
	im.save(img, format="webp")
	img.seek(0)

It seems like Pillow offers a handy .thumbnail() method that can handles the math for us – but more important it will not upscale the image like our approach currently permits. The suggested code also adds orientations and resampling. Can we consider using this instead?

[jlchilders11]

Good call. I saw the thumbnail function, but didn't actually realize all the edge cases it pre covered for me. Thanks!

[julhoang]

Can we add a few more tests here as well? Some cases to consider:

• Portrait image stays portrait
• Ratio is preserved
• Small image doesn't get upscaled
• New downscale images is smaller than the width and height values that we set in the config.
• Test png_test.png file gets renamed to png_test.webp

[jlchilders11]

Implemented!

[julhoang]

The fix for the CI test is now available on develop – would you mind doing a rebase to remove this change from your branch? 😄🙏

[jlchilders11]

Can do.

[julhoang]

This looks great! Thank you for the updates @jlchilders11 ! 🙌

[kattyode]

QA Approved