The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

ffmpeg Still Image Quality Setting Comparisons

TODO: Pull subtitle into page object
Code
ffmpeg -i "input.mp4" -q:v 5 "output.mp4"

I'll write up more about that in another post. For now, we can look at the quality of the images.

These are sample images with different quality settings for single frame output from ffmpeg. The source is a 1920x1080 video. The images are the same size but will resize down to your browser if it's smaller.

PNG - 279K

JPG - (Quality 1 - With -qmin 1) 49.3K

This is the code I used to produce the image:

Code
#!/bin/bash

cd "/Users/alan/workshop/alanwsmith.com/content/images/ffmpeg-quality-examples"

CLIPNUM=1
CLIPTIME=54
WIDTH=700

# Make PNG
ffmpeg -ss $CLIPTIME -i /Users/alan/Desktop/input.webm \
-frames:v 1 -filter:v "crop=1840:2160:1000:0,scale=$WIDTH:-2" \
-y "ffmpeg-image-quality--clip-$CLIPNUM--png--%02d.png"

# Make quality 1 with qmin 1 jpg
ffmpeg -ss $CLIPTIME -i /Users/alan/Desktop/input.webm \
-frames:v 1 -filter:v "crop=1840:2160:1000:0,scale=$WIDTH:-2" -q:v 1 -qmin 1 \
-y "ffmpeg-image-quality--clip-$CLIPNUM--jpg-q1--w-qmin1--%02d.jpg"

# Make quality 1 without qmin jpg
ffmpeg -ss $CLIPTIME -i /Users/alan/Desktop/input.webm \
-frames:v 1 -filter:v "crop=1840:2160:1000:0,scale=$WIDTH:-2" -q:v 1 \
-y "ffmpeg-image-quality--clip-$CLIPNUM--jpg-q1--wo-qmin1--%02d.jpg"

# Maker quality 2-32 jpgs
for i in {2..31}
do 
ffmpeg -ss $CLIPTIME -i /Users/alan/Desktop/input.webm \
-frames:v 1 -filter:v "crop=1840:2160:1000:0,scale=$WIDTH:-2" -q:v $i \
-y "ffmpeg-image-quality--clip-$CLIPNUM--jpg-q$i--%02d.jpg"
done


Notes

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

ffmpeg Still Image Quality Setting Comparisons

You can adjust the quality of jpg images produces
from FFmpeg with the `-q:v`` flag. Like:

-- code
-- shell

ffmpeg -i "input.mp4" -q:v 5 "output.mp4"


-- p

I'll write up more about that in another post. 
For now, we can look at the quality of the images. 


These are sample images with different quality 
settings for single frame output from ffmpeg. The 
source is a 1920x1080 video. The images are the same
size but will resize down to your browser if it's
smaller. 


-- todo

[] add file sizes


-- html

<div class="compare_item">
  <h2 id="compare_title_a">PNG - 279K</h2>
  <div id="compare_content_a"><img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--png--01.png"></div>
  <div id="compare_description_a"></div>
  <div id="compare_buttons_a"></div>
</div>

<div class="compare_item">
  <h2 id="compare_title_b">JPG - (Quality 1 - With -qmin 1) 49.3K</h2>
  <div id="compare_content_b"><img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q1--w-qmin1--01.jpg"></div>
  <div id="compare_description_b"></div>
  <div id="compare_buttons_b"></div>
</div>




-- script

const examples = [
  {
    title: `PNG - 279K`, 
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--png--01.png" width="500" height="586">`,
    description: "Size: ",
  }, 
  {
    title: `JPG - (Quality 1 - With -qmin 1) - 49.3K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q1--w-qmin1--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 1 - Without -qmin 1) - 30.9K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q1--wo-qmin1--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 2) - 30.9K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q2--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 3) - 23.3K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q3--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 4) - 19.3K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q4--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 5) - 17.0K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q5--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 6) - 15.1K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q6--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 7) - 13.8K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q7--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 8) - 12.7K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q8--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 9) - 12.0K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q9--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 10) - 11.3K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q10--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 11) - 10.7K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q11--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 12) - 10.2K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q12--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 13) - 9.8K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q13--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 14) - 9.4K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q14--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 15) - 9.2K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q15--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 16) - 9.0K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q16--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 17) - 8.7K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q17--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 18) - 8.5K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q18--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 19) - 8.2K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q19--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 20) - 8.1K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q20--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 21) - 7.9K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q21--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 22) - 7.7K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q22--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 23) - 7.6K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q23--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 24) - 7.5K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q24--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 25) - 7.4K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q25--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 26) - 7.3K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q26--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 27) - 7.1K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q27--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 28) - 7.0K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q28--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 29) - 7.0K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q29--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 30) - 6.9K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q30--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
  {
    title: `JPG - (Quality 31) - 6.8K`,
    content: `<img src="/images/ffmpeg-quality-examples/ffmpeg-image-quality--clip-1--jpg-q31--01.jpg" width="500" height="586">`,
    description: "Size: ",
  },
]


const make_buttons = () => {
  console.log("make buttons")
  var a_buttons = ""
  var b_buttons = ""
  for (var i=0; i<examples.length; i++) {
    a_buttons += `<button id="a_${i}">${examples[i].title}</button>`
    b_buttons += `<button id="b_${i}">${examples[i].title}</button>`
  }
  compare_buttons_a.innerHTML = a_buttons
  compare_buttons_b.innerHTML = b_buttons
}

const checkit = (event) => {
if (event.target.id) {
    const parts = event.target.id.split("_")
    const key = parts[0]
    const num = parts[1]
    if (key === "a") {
      compare_title_a.innerHTML = examples[num].title
      compare_content_a.innerHTML = examples[num].content
    }
    if (key === "b") {
      compare_title_b.innerHTML = examples[num].title
      compare_content_b.innerHTML = examples[num].content
    }
  }
}


document.addEventListener("DOMContentLoaded", make_buttons)
document.addEventListener("click", checkit)

-- p


This is the code I used to produce the image:

-- code
-- shell


#!/bin/bash

cd "/Users/alan/workshop/alanwsmith.com/content/images/ffmpeg-quality-examples"

CLIPNUM=1
CLIPTIME=54
WIDTH=700

# Make PNG
ffmpeg -ss $CLIPTIME -i /Users/alan/Desktop/input.webm \
-frames:v 1 -filter:v "crop=1840:2160:1000:0,scale=$WIDTH:-2" \
-y "ffmpeg-image-quality--clip-$CLIPNUM--png--%02d.png"

# Make quality 1 with qmin 1 jpg
ffmpeg -ss $CLIPTIME -i /Users/alan/Desktop/input.webm \
-frames:v 1 -filter:v "crop=1840:2160:1000:0,scale=$WIDTH:-2" -q:v 1 -qmin 1 \
-y "ffmpeg-image-quality--clip-$CLIPNUM--jpg-q1--w-qmin1--%02d.jpg"

# Make quality 1 without qmin jpg
ffmpeg -ss $CLIPTIME -i /Users/alan/Desktop/input.webm \
-frames:v 1 -filter:v "crop=1840:2160:1000:0,scale=$WIDTH:-2" -q:v 1 \
-y "ffmpeg-image-quality--clip-$CLIPNUM--jpg-q1--wo-qmin1--%02d.jpg"

# Maker quality 2-32 jpgs
for i in {2..31}
do 
ffmpeg -ss $CLIPTIME -i /Users/alan/Desktop/input.webm \
-frames:v 1 -filter:v "crop=1840:2160:1000:0,scale=$WIDTH:-2" -q:v $i \
-y "ffmpeg-image-quality--clip-$CLIPNUM--jpg-q$i--%02d.jpg"
done




-- notes

- The `%01d` sets a sequence number that isn't really
needed but ffmpeg complains if it's not there. 


-- css

body {
  background-color: black;
  color: #555;
}


-- ref 
-- title: ffmpeg image2 muxer documentation
-- url: https://ffmpeg.org/ffmpeg-formats.html#image2-2

-- ref
-- title: SO Answer on getting a high quality image
-- url: https://stackoverflow.com/a/10234065/102401

-- ref
-- url: https://ffmpeg.org/ffmpeg-formats.html#image2-2



-- categories
-- ffmpeg

-- metadata
-- date: 2023-07-13 02:11:30
-- id: 2svphsuw
-- site: aws
-- type: css-experiment
-- status: published