too big and bad quality image uploads from react-native expo

Question

I am building an app where employees should be able to upload pictures for a product catalog for a website. The application is built with expo react-native and the camera library is ImagePicker and the library used for compression and resizing is ImageManipulator.

Inspecting some sites that also displays product catalogs I see images around 500x300 that looks crisp even when zoomed in 200% with file sizes around 40kb reference. I use an iphone XR for testing and it's camera takes images in 4032x3024, when I resize it to something remotely similar to 500x300 it looks horrendous even without compression and the file sizes are upwards of 250kb with compression. my image, download link

Could it be due to the large resolution scaling, bad compression or am I completely missing something?

We are uploading the images to three seperate AWS buckets based on the resolution of the images. (For code context)

export default ({ takePictureCb, clothingId }) => {
  const dispatch = useDispatch();
  const { toast } = useToast();
  const quality = useSelector(selectQuality);

  const launchCamera = async () => {
    const image = await ImagePicker.launchCameraAsync({
      aspect: [1, 1],
      allowsEditing: true
    });
    if (image.cancelled === true) {
      return;
    }
    dispatch(setLoading(true));
    const resizedImages = await getResizedImages(image, [720, 500, 300]);
    Promise.all(resizedImages.map(resizedImage => sendImage(resizedImage)))
      .then(() => {
        toast({
          message: `The images are uploaded`,
          ...successProps
        });
      })
      .catch(error => {
        console.error(error);
        toast({
          message: `Something went wrong!`,
          ...errorProps
        });
      })
      .finally(() => {
        dispatch(setLoading(false));
        dispatch(removeClothing(clothingId));
        takePictureCb();
      });
  };

  const getResizedImages = async (image, pixels: number[]) => {
    const promises = pixels.map(pixels =>
      ImageManipulator.manipulateAsync(image.uri, [
        { resize: { height: pixels, width: pixels }, compress: quality }
      ])
    );
    return Promise.all(promises);
  };

  const sendImage = async image => {
    await uploadImage(clothingId, image.uri);
  };

  return <Button title="Open camera" onPress={launchCamera} />;
};

Answer 1

let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.All, allowsEditing: true, aspect: [4, 3], quality: 1, });