Skip to main content

Image Manipulation with imgproxy

imgproxy is a fast and secure standalone server for resizing and converting remote images. With this tutorial you'll deploy the open-source imgproxy container from DockerHub to enable low-latency image manipulation close to your end users.

note

Before starting, create a new CloudFlow Project and then delete the default Deployment and ingress-upstream Service to prepare the project for your new deployment.

Create a Deployment for imgproxy​

Create the deployment for imgproxy as imgproxy-deployment.yaml. This will direct CloudFlow to run the imgproxy open source container.

imgproxy-deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: imgproxy
  name: imgproxy
spec:
  replicas: 1
  selector:
    matchLabels:
      app: imgproxy
  template:
    metadata:
      labels:
        app: imgproxy
    spec:
      containers:
      - image: darthsim/imgproxy:latest
        imagePullPolicy: Always
        name: imgproxy
        resources:
          requests:
            memory: ".5Gi"
            cpu: "500m"
          limits:
            memory: ".5Gi"
            cpu: "500m"

Apply this deployment resource to your Project with either the Kubernetes dashboard or kubectl apply -f imgproxy-deployment.yaml.

Expose imgproxy on the Internet​

We want to expose the imgproxy on the Internet so that it can serve image manipulation requests. Create ingress-upstream.yaml as defined below.

ingress-upstream.yaml
apiVersion: v1
kind: Service
metadata:
  labels:
    app: ingress-upstream
  name: ingress-upstream
spec:
  ports:
  - name: 80-80
    port: 80
    protocol: TCP
    targetPort: 8080
  selector:
    app: imgproxy
  sessionAffinity: None
  type: ClusterIP

Apply this service resource to your Project with either the Kubernetes dashboard or kubectl apply -f ingress-upstream.yaml.

See the pods running on CloudFlow's network using kubectl get pods -o wide.

The -o wide switch shows where your container is running according to the default AEE location optimization strategy. Your container will be optimally deployed according to traffic.

imgproxy pods

Experiment with imgproxy​

Now, you can start using imgproxy. To resize the following image:

https://m.media-amazon.com/images/M/MV5BMmQ3ZmY4NzYtY2VmYi00ZDRmLTgyODAtZWYzZjhlNzk1NzU2XkEyXkFqcGdeQXVyNTc3MjUzNTI@.jpg

You use the following URL:

http://YOUR_ENVIRONMENT_HOSTNAME.section.app/insecure/rs:fill:300:400/g:sm/aHR0cHM6Ly9tLm1l/ZGlhLWFtYXpvbi5j/b20vaW1hZ2VzL00v/TVY1Qk1tUTNabVk0/TnpZdFkyVm1ZaTAw/WkRSbUxUZ3lPREF0/WldZelpqaGxOemsx/TnpVMlhrRXlYa0Zx/Y0dkZVFYVnlOVGMz/TWpVek5USUAuanBn.jpg

Using the URL above, imgproxy is instructed to resize it to fill an area of 300x400 size with “smart” gravity. “Smart” means that imgproxy chooses the most “interesting” part of the image.

Original​

Original

imgproxy result​

imgproxy result