Skip to content

Instantly share code, notes, and snippets.

@killshot13

killshot13/benchmarks.md

Last active June 29, 2021 02:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save killshot13/a8f7dbca53e5ee26169f7ac624a314fa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save killshot13/a8f7dbca53e5ee26169f7ac624a314fa to your computer and use it in GitHub Desktop.
Download ZIP
Reference Guide for Responsive Images on Websites
Raw
benchmarks.md

Responsive Image Benchmarks

Compression

No image should exceed 500 KB (.5MB) in overall size.

  • JPEG Compression -- 60-70% of original image quality is the target range. Tolerance allows for adjustments as needed for your specific .jpg/.jpeg files.

  • Be sure to compare at realistic sizing and maintain correct L <-> W ratio.

  • PNG/GIF/SVG for graphics, icons, thumbnails, and logos.

  • JPG/JPEG/WEBP for photographs and detailed images.

WordPress

Custom WP Image Defaults

1). Thumbnails should be the size of the largest static grid image. 2). Large should be the size of your template width. (1200-1300px). 3). Medium should exist in a comfortable central area between these two.

Filenames

Image File Naming Conventions

(for multiple sizes of the same image/graphic)

Example 1: DASH + size name

alaska-northern-lights-small.jpg alaska-northern-lights-medium.jpg alaska-northern-lights-large.jpg

Example 2: DASH + size in pixels

alaska-northern-lights-300px.jpg alaska-northern-lights-800px.jpg alaska-northern-lights-1500px.jpg

Example 3: DASH + @ symbol + size modifier

alaska-northern-lights.jpg (original) [email protected] (half smaller version) [email protected] (double version for retina screens)

Raw
sizes.md

Responsive Web Image Sizing Guide

Image Benchmarks

Serves as a quick reference to view/copypasta generally recommended sizes for images in the browser and on mobile. The content of this gist is based almost exclusively on Alex Vita's recently updated guide on this very subject.

full-width slideshows

panoramic site headers

  • 2560px

NOTES: As a rule, with images this large, never use 2x for retina. The 2560px value will cover monitor screens <= 30 inches wide.

majority-width slideshows

headers in containers spanning most of the page width

  • 1800-2000px

NOTES: For more consistent sizing, use percentages based on how much of the visible screen the image will span.

horizontally viewable gallery images

thumbnails which magnify or render in a lightbox onHover or onClick

  • 1500px

NOTES: Optional to push up to 2000px but 1500px is plenty even on mobile "retina" screens.

vertically oriented portrait images

vertical or square thumbnails rendered with lightboxes

  • 1200px (height)

NOTES: 2:3 or 3:4 ratio is best for vertical images, so 800x1200 or 900x1200 works great.

static images rendered as post headers or in featured gallery w/o lightbox option

  • 520x348 (small)

  • 1200x825 (large)

NOTES: For static images, you should use 2x for retina. Still, try to keep the longest edge near the 1200px target.

In some instances, you may need to push as high as 1650px to maintain aspect ratio, but images at this size cost more to load.

The (small, large) values above already have the 2x for retina calculated in based on actual viewports of 260x174 and 600x412.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment