diff --git a/src/codecs/browser-jpeg/encoder-meta.ts b/src/codecs/browser-jpeg/encoder-meta.ts
index 0d43204e..ae47407a 100644
--- a/src/codecs/browser-jpeg/encoder-meta.ts
+++ b/src/codecs/browser-jpeg/encoder-meta.ts
@@ -5,4 +5,4 @@ export const type = 'browser-jpeg';
 export const label = 'Browser JPEG';
 export const mimeType = 'image/jpeg';
 export const extension = 'jpg';
-export const defaultOptions: EncodeOptions = { quality: 0.5 };
+export const defaultOptions: EncodeOptions = { quality: 0.75 };
diff --git a/src/codecs/browser-jpeg/options.ts b/src/codecs/browser-jpeg/options.ts
index 678e5a9e..61a7817c 100644
--- a/src/codecs/browser-jpeg/options.ts
+++ b/src/codecs/browser-jpeg/options.ts
@@ -1,3 +1,3 @@
 import qualityOption from '../generic/quality-option';
 
-export default qualityOption({ min: 0, max: 1, step: 0 });
+export default qualityOption({ min: 0, max: 1, step: 0.01 });
diff --git a/src/codecs/browser-webp/encoder-meta.ts b/src/codecs/browser-webp/encoder-meta.ts
index d7780687..03971198 100644
--- a/src/codecs/browser-webp/encoder-meta.ts
+++ b/src/codecs/browser-webp/encoder-meta.ts
@@ -7,5 +7,5 @@ export const type = 'browser-webp';
 export const label = 'Browser WebP';
 export const mimeType = 'image/webp';
 export const extension = 'webp';
-export const defaultOptions: EncodeOptions = { quality: 0.5 };
+export const defaultOptions: EncodeOptions = { quality: 0.75 };
 export const featureTest = () => canvasEncodeTest(mimeType);
diff --git a/src/codecs/browser-webp/options.ts b/src/codecs/browser-webp/options.ts
index 678e5a9e..61a7817c 100644
--- a/src/codecs/browser-webp/options.ts
+++ b/src/codecs/browser-webp/options.ts
@@ -1,3 +1,3 @@
 import qualityOption from '../generic/quality-option';
 
-export default qualityOption({ min: 0, max: 1, step: 0 });
+export default qualityOption({ min: 0, max: 1, step: 0.01 });
diff --git a/src/codecs/generic/quality-option.tsx b/src/codecs/generic/quality-option.tsx
index 373bc2a2..8bbc15ed 100644
--- a/src/codecs/generic/quality-option.tsx
+++ b/src/codecs/generic/quality-option.tsx
@@ -1,6 +1,7 @@
 import { h, Component } from 'preact';
 import { bind } from '../../lib/initial-util';
-import '../../custom-els/RangeInput';
+import * as style from '../../components/options/style.scss';
+import Range from '../../components/range';
 
 interface EncodeOptions {
   quality: number;
@@ -33,18 +34,19 @@ export default function qualityOption(opts: QualityOptionArg = {}) {
 
     render({ options }: Props) {
       return (
-        <div>
-          <label>
-            Quality:
-            <range-input
+        <div class={style.optionsSection}>
+          <div class={style.optionOneCell}>
+            <Range
               name="quality"
               min={min}
               max={max}
               step={step || 'any'}
-              value={'' + options.quality}
-              onChange={this.onChange}
-            />
-          </label>
+              value={options.quality}
+              onInput={this.onChange}
+            >
+              Quality:
+            </Range>
+          </div>
         </div>
       );
     }