Skip to content

Image Processing

Jump to bottom
Thipok Cholsaipant edited this page Jul 2, 2020 · 29 revisions

images.uwdesignshow.com · Advance · Optional · Powered by Heroku x Cloudflare x images.weserv.nl

You can decide to use this image processing or not. The system is complex, however the implementation is really simple. It is used in the 2020 website to improve the user's experience with slow internet connection.

🛠 Usage

WeServ Documentation Page

  1. See images.webserv.nl on how to use the service.
  2. Use images.uwdesignshow.com instead of images.weserv.nl. Every request must be accompanied by 🔑 auth=uw token.
  3. ⚠️Pre-cache the images by simply loading images and pages before hand ⚠️
  4. If you need to clear cache, go to Cloudflare. Use custom purge, do not purge all cache. 🚨 This will slow down the other sites.

You can also use this with lazy loading and responsive images by using LazySize

⚠️ Limitations

  • Pre-caching is limited 700 images per 3 minutes. (Overusage - blocked for an hour ⏱)
  • 70 million pixels max.

To overcome Blocking, precache your images before the site goes live or use images.weserv.nl directly (the same image limit still applies per user IP).

📖 Explanation

The Image Processing Journey

☁️ Our CloudFlare ⇌ ⚙️ Heroku Reverse Proxy ⇌ ☁️ Weserv's Cloudflare ⇌ 📸 images.weserve.nl

  1. User requests an image at images.uwdesignshow.com
  2. ☁️ Our CloudFlare near user's location will check for auth=uw token and serve cached image from the local datacenter.
  3. If CloudFlare can't find the cache it will request an image from ⚙️ Heroku Reverse Proxy
  4. ⚙️ Heroku Reverse Proxy then relay the images request to nearby ☁️ Weserv's Cloudflare, which if you pre-cached the image CloudFlare should be able to quickly serve it!
  5. If CloudFlare can't find the cache it will request an image from 📸 images.weserve.nl (Counts towards Image Processing Limit)

FAQs

  • Why are we performing image processing? because it improve site speed and responsiveness.
  • Why don't we just use image.weserv.nl? because users might be blocked from loading more than 700 images in 3 minutes. We use Heroku Reverse Proxy and Cloudflare for multi-layer cache to reduce the number of calls to weserv.nl.
  • Why are we using 2 Cloudflare layers? because we want to maximize the use of cache as much as possible. Image processing are slow! Plus, we can analyze the traffic from our CloudFlare or LogFlare!

🛠 Technical

  • Nginx Docker is used to relay requests to weserv.nl
  • uwdesign/images store source code of weserv.nl just in case the service shuts down
  • the Heroku branch of uwdesign/images contains the Heroku and Nginx config, which deploys through a pipeline when there is a new push.

Clone this wiki locally