如何处理高分辨率图像？

Question

I have a profile page and I also have profil image that is to be downloaded from server and then put in image view. Every time I open profil page this process repeats itself. When image is below 500 kb or around, everything is okay but when I put 6mb image on it, the page is not smoothly working. I mean when scrolling or doing anything everything takes time. It is like running high graphic game on weak computer. After undergoing this process, I tried to compress image and was able to reduce the size to 2 MB by this library https://github.com/zetbaitsu/Compressor . Nothing less. Why does this problem occurs.

I am doing this upload process on Async task.

Upload method

public void upload() {
    if (filePath != null) {
        Bitmap compressedImage = null;
        try {
            compressedImage = new Compressor(context).compressToBitmap(new File(filePath.getPath()));
        } catch (IOException e) {
            e.printStackTrace();
            try {
                compressedImage = MediaStore.Images.Media.getBitmap(context.getContentResolver(), filePath);
            } catch (IOException e1) {
                e1.printStackTrace();
            }
        }

        ByteArrayOutputStream bytes = new ByteArrayOutputStream();
        compressedImage.compress(Bitmap.CompressFormat.JPEG, 100, bytes);
        final String path = MediaStore.Images.Media.insertImage(context.getContentResolver(), compressedImage, "Title", null);

        StorageReference sRef = storageReference.child("images/" + name);
        sRef.putFile(Uri.parse(path))
                .addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
                    @Override
                    public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                        if (ımageView != null)
                            ımageView.setImageURI(Uri.parse(filePath.getPath()));
                    }
                })
                .addOnFailureListener(new OnFailureListener() {
                    @Override
                    public void onFailure(@NonNull Exception exception) {
                        Log.i("resultUpload", exception.getLocalizedMessage());
                    }
                })
                .addOnProgressListener(new OnProgressListener<UploadTask.TaskSnapshot>() {
                    @Override
                    public void onProgress(UploadTask.TaskSnapshot taskSnapshot) {

                    }
                });
    } else {

    }
}

My download image method

public void download(final ImageView ımageView) {
    StorageReference sRef = storageReference.child("images/" + name);
    sRef.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
        @Override
        public void onSuccess(Uri uri) {
            Picasso.get().load(uri).into(ımageView, new Callback() {
                @Override
                public void onSuccess() {

                }

                @Override
                public void onError(Exception e) {

                }
            });
        }
    }).addOnFailureListener(new OnFailureListener() {
        @Override
        public void onFailure(@NonNull Exception e) {
            Log.i("resultDownload", e.getLocalizedMessage());
        }
    });
}

Answer 1

What you can do, as Milan said, is to get the image from a URL online and then set that image to your imageView . First, you will have to make sure that you have internet permission with :

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

Then you can do the following to set an image into the imageView :

Bitmap bitmap = BitmapFactory.decodeStream((InputStream)new URL("Your image URL comes here".getContent());
imageView.setImageBitmap(bitmap); 

This should work by getting a bitmap of the image located at the URL that you have specified. It will then set the imageView to that bitmap.

---

OR , what you can do is use Picasso. Add this to your app/build.gradle :

implementation 'com.squareup.picasso:picasso:2.5.2'

Then use this Java code to set the image into the imageView :

String imageUri = "Your image URL";
Picasso.with(getApplicationContext()).load(imageUri).into(imageView);

This uses Picasso to get the image from the URL into the imageView . I hoped this helped.

Answer 2

This is not a Java problem. Irrespective of language or platform you need to do certain things to properly display an image on the web. So, instead of recommending any Java library (I'm sure you'll get many open source libraries in every language), I'm going to enumerate the basic steps you need to follow:

1. You need to resize (not cropping) the image for multiple devices. No decent website downloads 6MB image. Never! Not even 2MB image. My Facebook profile image, which I captured on my 8MP mobile camera, is 160 KB in size after uploading. Try to bring down the image size to around 100 - 150 KB. These are some usual image dimensions.

2. You'd create resized image for mobile, tablet and laptop. For mobile, it's usually 640 x 480. For tablet, it's usually 800 x 600. For Laptop, it's usually, 1024 x 768

3. Then compress the image as you did. Make sure that the final image is progressive jpeg/jpg. Progressive jpeg is compressed in layers. The browsers that support progressive images display a hazy preview when the image is being downloaded. This improves user experience. For the browsers that do not support progressive image, some work-arounds are used. For eg you can create a low quality version of your image (approx. 1KB in size) with opacity: 1; filter: blur(20px); opacity: 1; filter: blur(20px); . Thus a blurred version of the image will be displayed as the higher quality image is being downloaded. Initially you set the opacity of the higher quality image to 0. Once the higher quality image download is complete, you set the opacity of the lower-quality image to 0 and the higher-quality image to 1. You can test whether your image is progressive or not here and can create compressed progressive image here . You'd probably do these things programmatically, but these resources may serve as a reference.

4. Ensure that your server supports HTTP/2 which is fully multiplexed. You can see the multiplexing here. Thus the resources can get downloaded parallely.

5. Ensure your server supports gzip or compression. Thus the resources are transferred over the network in gzipped format and extracted automatically by the browser. This ensures fast download.

6. Use proper cache-control headers, so that the browser caches the images eliminating the need to download the image for every visit.

7. If possible a mobile first design should be used, so that for mobile the performance gets better.