🔄 Topic

Using modern image formats and build scripts to keep the site fast and maintainable.

🎯 Goal

Understand why optimized images, responsive assets, and build automation matter for performance and reliability.

🛠 What I Did

I focused on the image pipeline and performance side of the Farina website. Agricultural websites are naturally visual: products, fields, pumpkins, firewood, and gallery photos all matter. But large images can destroy mobile performance. The project uses image-processing automation with Sharp to generate modern formats such as WebP and AVIF, plus responsive optimized assets. This turns image handling into a repeatable build process instead of manual guessing.

Main areas covered:

  • Sharp image processing
  • WebP output
  • AVIF output
  • responsive image assets
  • faster page loads
  • lower bandwidth use

🔗 Key Cybersecurity Connections

Performance matters to security because availability and user trust are affected by speed. Heavy pages can create poor reliability, higher bandwidth cost, and worse user experience under weak connections.

🔍 Investigation Questions

  • Are images optimized before deployment?
  • Are original heavy files accidentally shipped?
  • Does the build regenerate assets correctly?
  • Do images have useful alt text?
  • Does performance degrade after content updates?

🚨 Detection Opportunities

Potential monitoring ideas:

  • sudden asset size increase
  • large unoptimized images in deployment
  • build script failure
  • unexpected generated file changes
  • performance regression after image update

Example:

project=farina-farm-website
change_type=public_website_update
risk_area=repository_deployment_or_public_input
triage=review_change_intent_and_validate_build

🧭 MITRE ATT&CK Techniques

Possible mappings depending on confirmed behavior:

  • T1499 — Endpoint Denial of Service
  • T1498 — Network Denial of Service

🗺 Visual Investigation Diagram

Original photo
    ↓ Optimization script
    ↓ Modern formats
    ↓ Build output
    ↓ Faster public pages

⚠ Challenges

The challenge was avoiding manual image management. Manual processes are easy to forget and hard to repeat.

📚 What I Learned

I learned that performance work becomes safer when it is automated. The same script can be rerun whenever new images are added.

➡ Next Steps

  • Run image sync before build
  • Review generated assets
  • Keep alt text meaningful
  • Avoid uploading unnecessary huge files

🧠 Reflection

This was useful because it turned a real project into security-aware learning without pretending that every task was a pure cybersecurity lab.

🧩 Lessons Learned

What worked

Automating image optimization.

What broke

Treating images as just content.

Why it broke

Images affect performance, SEO, accessibility, and availability.

Fix / takeaway

Use repeatable image pipelines instead of manual compression.

📈 Skill Progression Context

This supports cybersecurity progression because operational reliability and automation are part of real infrastructure work.

😄 TL;DR

Heavy images can break a good website.