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.
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.
(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) alaska-northern-lights@0.5x.jpg (half smaller version) alaska-northern-lights@2x.jpg (double version for retina screens)