Easy Screenshots for Web Work

Jan 26, 2024 | Blog, UI, Images
A

While reworking my portfolio, I needed a 300 X 400 image of websites that I’ve worked on. This is a tedious task, but I found chrome dev tools to be the simplest approach.

Steps:

  1. Visit your site and open chrome dev tools.
  2. Click the ‘toggle device toolbar’ icon or press CTRL + SHFT + M
  3. Select Dimensions > Responsive (This is the default.)
  4. Enter your desired dimensions.
  5. Click the 3 dots for more options
  6. Click ‘Capture Screenshot’

This even names the file for you based upon the URL.