Optimizing Your Website For All Screens

How to Create 1x, 2x, and 3x Images with Mass Image Compressor

Have you seen your website on iPad? Does the images look blurry? Web developers often encounter the challenge of making images look sharp on screens with varying resolutions. This is especially important in today’s world of retina displays and high-DPI devices. Here’s where 1x, 2x, and 3x images come into play.

• What Are 1x, 2x, and 3x Images?
  These represent different versions of the same image at varying resolutions:
  • 1x: Designed for standard screens. A 100x100px image is displayed at its natural size.
  • 2x: Double the resolution of 1x for high-DPI screens (e.g., most modern smartphones and laptops).
  • 3x: Triple the resolution for ultra-high-DPI displays (e.g., newer iPhones and some premium tablets).

If you are interested to know how images work on high-DPI devices, checkout Apple’s developer guide about Images on Apple devices.

When you serve these images appropriately, devices can select the best resolution to match their screen capabilities. For example, a 2x or 3x image ensures sharp visuals on high-resolution displays, while a 1x image saves bandwidth for standard screens.

Why Are Multiple Resolutions Important?

Imagine a website with a button image that’s 100x100px:

• On a high-resolution retina screen, a standard 1x image might look blurry because the screen has more pixels per inch than the image provides.
• A 2x or 3x image provides the extra pixel density, ensuring sharpness and clarity.

Failing to provide high-resolution images can lead to:

• Blurry visuals: Poor user experience on modern devices.
• Inconsistent branding: Low-quality images can harm a website’s professional appeal.

By generating 1x, 2x, and 3x versions, you ensure that every user sees crisp, well-rendered images, regardless of their device.

With this clear understanding, let’s explore how Mass Image Compressor makes creating these image variations simple and efficient.

Step by Step Guide to Create 1x, 2x, and 3x Images using Mass Image Compressor

Step 1: Start with a 3x Image

To ensure the highest quality, always begin with the largest resolution required—typically the 3x version of the image. Request the artist to provide the image at three times the base size. For example:

• If your design needs a 100x100px image (1x), ask for a 300x300px image (3x).
• All animated images should be either in WebP or animated PNG, and not in GIF format. GIF is very old format and good only for basic emojis and clip arts.
• Note that you may not be converting all images to 1x/2x/3x. It’s only where you know you have fixed image dimension. It’s better to name such files appropriately. You can ask artist to name such images with file name ending with ‘@3x‘ suhc as abc@3x.jpeg
• This naming convention will help you select only those images via Mass Image Compressor > Show Filters > Include Only > File Name > *@3x.* > Apply Filter (this will select all …@3x…. for further processing)
• Why this approach works: Your website doesn’t need all the images to be 3x sized. Some images (such as screenshots) will be left as big as possible. You can just process the images which are name with @3x suffix to create @1x and @2x.

Step 2: Optimize 3X Images

Some artists do not like to optimize their images, you don’t have to listen to their argument how pixel perfect the image has to look that they created with a lot of efforts. As a web developer, your job is to provide a clear image in least number of bytes and rang good on user experience as well as on SEO.

1. Open Mass Image Compressor.
2. Drag and drop entire image directory in Mass Image Compressor, filter all the images that ends with @3x. Filter value should be ‘*@3x.*, here * is important to indicate characters before and after @3x, and ‘.’ adds assurance that it is suffix.
3. Do not forget to toggle the “Include Sub-folders” option to process all sub-folders as well.
4. Keep “Same Dimension” as we want to just optimize those 3x images.
5. You can preview one of the image from image gallery adjust the quality parameter. Generally, 60% quality would (especially with WebP image format) work but if the image is important you can keep the quality to 80%.
6. If your artists has provided images in older (JPEG/PNG/GIF) then you can select WebP as Image Format (know why).
7. Do not copy any metadata to compress image.
8. You can select “Replace Original Files” if the images are already placed in their designated folders and you are just optimizing the images.
9. Compress all images.

Step 3: Resize for 1x and 2x

Once you have compressed

1. Apply filter to select only @3x images.
2. Navigate to the Compression Settings Panel.
3. Set the “Shrink by %” option (Mass Image Compressor creates exactly 2x image in stead of rounding to 66% so your image looks crystal clear. Same for 1x.):
   • For 2x: Click on 2x/66% size shortcut to reduce the image size proportionally.
   • For 1x: Enter use 1x/33%
4. Use ‘Replace’ feature to replace @3x in filename to @2x or @1x (see screenshot below).
5. You can select “Keep in Same Folder” option so the new images will be created just beside original image in all folder and subfolders.
6. Preview the resized dimensions in real-time to see if quality needs adjustment

Step 4: Deliver Images Using srcset

Once you’ve generated 1x, 2x, and 3x images, integrate them into your project using the srcset attribute. Your can refer Mozilla web docs for the detailed usage in code. Example:

<img 
  src="image-name@1x.png" 
  srcset="image-name@2x.png 2x, image-name@3x.png 3x" 
  alt="Responsive Example">

This ensures that browsers automatically select the appropriate image based on the device’s pixel density. You are good to go!

Why Choose Mass Image Compressor?

• Batch Processing: Handles thousands of images in one go, saving time.
• Customizable Dimensions: Tailor images for exact specifications like retina displays.
• Filter Settings: Regex like filter to select and process images that needs processing based on file name convention of your choice.
• Compression Without Visible Quality Loss: Optimize for fast load times while preserving visual fidelity.
• Developer-Friendly Output Settings: Automate naming conventions and manage folder structures effortlessly.
• Exact size: Unlike other resizers, Mass Image Compressor (MIC) is created for such workflow in mind, so if you select “1x/33%” shortcut, MIC will take care and create 300×300 image as 100×100 and not 99×99 like other compressors.

Best Practices for Developers

• Start with the Largest Image: Always request a 3x image from artists for flexibility and quality.
• Name the files to target for multi-res: Fix a naming conventions to name the images that will be targeted for multi resolution.
• Optimize All Resolutions: Use MIC to compress each version for web performance.
• Maintain Naming Conventions: Consistent file naming like @1x, @2x, and @3x simplifies integration.