Image Size Ranges for WebDev

README.md

Image Organization

Full

• Unedited version of the image

Large

• 2500px wide
  • for images that span the whole width of the browser
• 1800px-2000px wide
  • Images that take up most of the page
• 1500px wide
  • images that will be opened up in a fullscreen view. (can go up to 2000px)

Medium

• 800px wide
  • Great for situations where you have a tall picture (like 800px by 1200px). 2:3 or 3:4 image ratios are good for portrait orientation images.
• 800px - 1500px wide
  • good general medium width size
  • choose width depending on the aspect ratio and height

Small

• 500px - 750px wide
  • small image size
• 75px to 200px
  • good thumbnail size

Directory Structure

• Organize your assets directory like this.
• Use a logical img naming system
• be consistent across size versions
• use the above guide to determine the sizes of images

assets/ | - images/ | | - full/ | | | - img-1.jpg | | | - img-2.jpg | | - lg/ | | | - img-1.jpg | | | - img-2.jpg | | - md/ | | | - img-1.jpg | | | - img-2.jpg | | - sm/ | | | - img-1.jpg | | | - img-2.jpg | - css/ | | - fonts.css | | - reset.css | | - style.css