Improve performance of placeholder images (#1325)

* Don't include updatedAt field when fetching album art placeholder. This will allow browers to cache the place holder

* Apply resizing to placeholder image

* Fix issues discovered by CI linter and prettier

* Updates from PR review

core/artwork.go

@@ -8,6 +8,7 @@ import (
 	"image"
 	_ "image/gif"
 	"image/jpeg"
+	"image/png"
 	_ "image/png"
 	"io"
 	"os"
@@ -127,6 +128,12 @@ func (a *artwork) getArtwork(ctx context.Context, id string, path string, size i
 		if err != nil {
 			log.Warn(ctx, "Error extracting image", "path", path, "size", size, err)
 			reader, err = resources.FS.Open(consts.PlaceholderAlbumArt)
+
+			if size != 0 && err == nil {
+				var r io.ReadCloser
+				r, err = resources.FS.Open(consts.PlaceholderAlbumArt)
+				reader, err = resizeImage(r, size, true)
+			}
 		}
 	}()
 
@@ -149,13 +156,13 @@ func (a *artwork) getArtwork(ctx context.Context, id string, path string, size i
 			return
 		}
 		defer r.Close()
-		reader, err = resizeImage(r, size)
+		reader, err = resizeImage(r, size, false)
 	}
 
 	return
 }
 
-func resizeImage(reader io.Reader, size int) (io.ReadCloser, error) {
+func resizeImage(reader io.Reader, size int, usePng bool) (io.ReadCloser, error) {
 	img, _, err := image.Decode(reader)
 	if err != nil {
 		return nil, err
@@ -171,7 +178,11 @@ func resizeImage(reader io.Reader, size int) (io.ReadCloser, error) {
 	}
 
 	buf := new(bytes.Buffer)
+	if usePng {
+		err = png.Encode(buf, m)
+	} else {
 		err = jpeg.Encode(buf, m, &jpeg.Options{Quality: conf.Server.CoverJpegQuality})
+	}
 	return io.NopCloser(buf), err
 }
 

ui/src/subsonic/index.js

@@ -49,7 +49,11 @@ const getCoverArtUrl = (record, size) => {
     ...(record.updatedAt && { _: record.updatedAt }),
     ...(size && { size }),
   }
-  return baseUrl(url('getCoverArt', record.coverArtId || 'not_found', options))
+  if (record.coverArtId) {
+    return baseUrl(url('getCoverArt', record.coverArtId, options))
+  } else {
+    return baseUrl(url('getCoverArt', 'not_found', size && { size }))
+  }
 }
 
 const streamUrl = (id) => {