Flutter - How should I determine the size of the image?

Question

How can I determine the size of an image? For example I will use an icon for bottom navigation. Should the size of the icon be 20x20? Or is it 25x25? How can i know this? or let's say I'm going to use a background image, what size should it be 400x800 or 600x1200. What should be the standard sizes to best optimize memory management and application size

The use of SVG is not supported by default. So I'm looking for a way to best optimize PNG or JPGs. I also separate the images as 1.5x,2.0x, 3.0x, 4.0x and original image. But I can't decide exactly what the size of the original image will be.

For example, the debug console gives an error like this:

════════ Exception caught by painting library ══════════════════════════════════
Image assets/images/2.0x/login_picture.png has a display size of 414×516 but a decode size of 828×707, which uses an additional 1936KB.

Consider resizing the asset ahead of time, supplying a cacheWidth parameter of 414, a cacheHeight parameter of 516, or using a ResizeImage.
════════════════════════════════════════════════════════════════════════════════

Answer 1

Well, it is a good practice to use 1.0x, 2.0x and 3.0x images, you should either ask your designer to give you images with those sizes in.png or go to figma or photoshop and export 2.0x and 3.0x assets

For the debug error you should use fit: BoxFit.fill like here

Scaffold(
  backgroundColor: AppColor.backgroundPrimaryColor,
  body: Container(
    margin: const EdgeInsets.only(top: 100),
    decoration: BoxDecoration(
      image: DecorationImage(
          fit: BoxFit.fill, //Important
          image: AssetImage(BackgroundImages.backgroundShapes)
      ),
    ),
  )
);