Progressive thumbs, webp

app/api/imageuploads.py

@@ -125,7 +125,7 @@ class Thumbnail(TaskNestedView):
             
             img.thumbnail((thumb_size, thumb_size))
             output = io.BytesIO()
-            img.save(output, format='JPEG', quality=quality)
+            img.save(output, format='JPEG', quality=quality, progressive=True)
 
             res = HttpResponse(content_type="image/jpeg")
             res['Content-Disposition'] = 'inline'

app/api/tasks.py

@@ -437,15 +437,8 @@ class TaskThumbnail(TaskNestedView):
         if orthophoto_path is None:
             raise exceptions.NotFound()
 
-        try:
         thumb_size = int(self.request.query_params.get('size', 512))
         if thumb_size < 1 or thumb_size > 2048:
-                raise ValueError()
-
-            quality = int(self.request.query_params.get('quality', 75))
-            if quality < 0 or quality > 100:
-                raise ValueError()
-        except ValueError:
             raise exceptions.ValidationError("Invalid query parameters")            
 
         with rasterio.open(orthophoto_path, "r") as raster:
@@ -495,9 +488,14 @@ class TaskThumbnail(TaskNestedView):
 
         img = Image.fromarray(img)
         output = io.BytesIO()
-        img.save(output, format='PNG', quality=quality)
 
+        if 'image/webp' in request.META.get('HTTP_ACCEPT', ''):
+            img.save(output, format='WEBP')
+            res = HttpResponse(content_type="image/webp")
+        else:
+            img.save(output, format='PNG')
             res = HttpResponse(content_type="image/png")
+
         res['Content-Disposition'] = 'inline'
         res.write(output.getvalue())
         output.close()

app/static/app/js/components/TaskListItem.jsx

@@ -434,10 +434,6 @@ class TaskListItem extends React.Component {
     this.setState({thumbLoadFailed: true});
   }
 
-  handleThumbLoad = e => {
-    console.log("LOADED")
-  }
-
   render() {
     const task = this.state.task;
     const name = task.name !== null ? task.name : interpolate(_("Task #%(number)s"), { number: task.id });
@@ -622,7 +618,7 @@ class TaskListItem extends React.Component {
               {!this.state.thumbLoadFailed && task.status === statusCodes.COMPLETED ? 
               <div className="col-md-3 col-sm-2 text-center">
                 <a href={`/map/project/${task.project}/task/${task.id}/`}>
-                  <img onLoad={this.handleThumbLoad} onError={this.handleThumbError} className="task-thumbnail" src={this.thumbnailUrl()} alt={_("Thumbnail")}/>
+                  <img onError={this.handleThumbError} className="task-thumbnail" src={this.thumbnailUrl()} alt={_("Thumbnail")}/>
                 </a>
               </div> : ""}
               

app/static/app/js/css/TaskListItem.scss

@@ -158,7 +158,11 @@
     }
 
     .task-thumbnail{
+        width: 156px;
+        height: 156px;
         max-width: 100%;
+        max-height: 156px;
+        overflow: hidden;
         &:hover{
             opacity: 0.9;
         }