title: Reduce size of headless puppeteer screenshot
body: <p>I'm using a lambda function to launch puppeteer with headless chrome. I'm able to take a picture and save it to an s3 bucket, but the image is way too big. I was originally setting the viewport to default, but the image was still coming out as 1520 X 1520.</p>
  <p>Here is my current code to launch the headless browser and take the screenshot.</p>
  <pre><code>const browser = await chromium.puppeteer.launch({
    executablePath: await chromium.executablePath,
    headless: chromium.headless,
    args: chromium.args,
    defaultViewport: { width: 800, height: 600, deviceScaleFactor: 2 },
    ignoreHTTPSErrors: true,
  });
      
  const body = isJson(event.data ? event.data : event.body);
      
  const timeStamp = Date.now();
  const HandleBars = require(&quot;handlebars&quot;);
  const bucketForTemplates = {
    Bucket: templateBucket,
    Key: `${body.template}.hbs`,
  };
  
  const file = await s3.getObject(bucketForTemplates).promise();
  
  const template = HandleBars.compile(file.Body.toString());
  const renderedPage = template(body);
  
  const page = await browser.newPage();
  
  await page.setViewport({ deviceScaleFactor: 2 });
  await page.setContent(renderedPage);
  
  //wait for page to load
  await page.waitForSelector(&quot;#image&quot;);
  const image = await page.$(&quot;#image&quot;);
  
  const box = await image.boundingBox();
  const x = box[&quot;x&quot;];
  const y = box[&quot;y&quot;];
  const w = box[&quot;width&quot;];
  const h = box[&quot;height&quot;];
  
  const buffer = await page.screenshot({
    type: &quot;jpeg&quot;,
    clip: { x: x, y: y, width: w, height: h },
  });
      
  await page.close();
  await browser.close();
  //save image to s3.
  </code></pre>
  <p>The div I am taking a picture of has a set width of 760px and height of 760px but the screenshot is 1520 X 1520.</p>
  <p>How do I reduce the size of the image to not be so big?</p>