How to define image/thumbnail size and dimension in your mobile app?

Image Size

How do we reduce image size?

The choice of method depends on your specific use case and the trade-off between image quality and file size. In many cases, a combination of these techniques may be used to optimize images for a website or application. Image compression is particularly valuable for balancing file size reduction with acceptable image quality.

1. Image Compression:

• Lossy Compression: This method reduces the image size by permanently removing some of the image data. It achieves high compression ratios but at the cost of some loss in image quality.
• Lossless Compression: This method reduces image size without any loss in quality. It works by finding and encoding patterns in the image data, resulting in a smaller file size.

2. Resizing:

• Resizing an image to smaller dimensions is a straightforward way to reduce its size. This method doesn't alter the image quality but may change the visual details.

3. Cropping:

• Cropping involves cutting out parts of an image. It's useful for reducing size when you want to focus on a specific area. Like resizing, cropping doesn't necessarily affect image quality.

4. Image Format Optimization:

• Using more efficient image formats like WebP or AVIF can provide smaller file sizes compared to traditional formats like JPEG or PNG. These formats may employ advanced compression techniques.

5. Image Optimization Tools:

• Various tools and libraries can automatically optimize images by applying both lossless and lossy compression techniques to reduce file size while preserving quality.

6. Lazy Loading:

• Lazy loading delays the loading of off-screen images until they are needed, which can reduce initial page load times.

7. Responsive Images:

• Providing different image sizes for different devices and screen resolutions ensures that you're not serving larger images than necessary.

8. Vector Graphics:

• For certain types of images, using vector graphics like SVG can result in very small file sizes as they are resolution-independent.

9. CSS Sprites:

• Combining multiple small images into a single image (sprite) and using CSS to display specific parts can reduce the number of HTTP requests and, in turn, reduce page load times.

Resolution/Dimensions

Some examples from apps you are using daily to help you define your app image dimensions.

again size could be very different depending on the resizing technique you are using so WhatsApp thumbnail could be a few kb and could be 100 kb.

Examples

Facebook profile photo: 170 x 170 pixels

Facebook post image size: 1080 x 1080 pixels

Instagram post size: 1080 x 1080 pixels

Instagram profile picture size: 110 x 110 pixels

The thumbnails that preview your uploads on your profile appear as 161 x 161 pixels.

Instagram Story size: 1080 x 1920 pixels

Instagram Reels size: 1080 x 1920 pixels

Instagram Reels are a full-screen video 1080 x 1920 pixels, or a 9:16 aspect ratio.

Pinterest profile image size: 165 x 165 pixels

Twitter profile photo size: 400 x 400 pixels

Twitter header photo size: 1500 x 500 pixels

Twitter Card (or shared link) image size: 1200 x 628 pixels

Twitter post photo size: 1600 x 900 pixels

YouTube profile image size: 800 x 800 pixels

YouTube video thumbnail image size: 1280 x 720 pixels

LinkedIn company profile photo size: 300 x 300 pixels

LinkedIn company banner photo size: 1128 x 191 pixels

LinkedIn post image size: 1200 x 1200 pixels

LinkedIn profile picture size: 400 x 400 pixels

Aspect ratios

In general, don’t go for wide and low aspect ratios. Go for these:

• 16:9
• 4:3
• 1:1

Resources

• https://cloudinary.com/blog/top_10_mistakes_in_handling_website_images_and_how_to_solve_them
• https://www.altamira.ai/blog/dimensions-resolution-for-ios-and-android-app-design/
• https://sproutsocial.com/insights/social-media-image-sizes-guide/
• https://medium.com/intelligentmachines/the-basics-of-android-ui-design-know-your-dimensions-935982e00216