Mixing
Should I store different size's image for different Image component size to improve performance?
I am working in react native with Image component and I have to use same image at multiple locations with different size. Like user profile image at:
- In profile section, with a large circle of about half the device height - 600x600px,
- In others contact section in the list of the contacts as thumbnail image - 80x80px,
- In chatting section, sending an image to other user, image message will appear in a small box -200x200px.
My concern is should I create a small exact image size crop/compressed version for each sizes above or I must use the original size image like 1000x1000 everywhere, irrespective of the Image component size
- If I create a crop version of each image of perfect size than a lot of memory will be used on device and
- If I use the original image (downloaded off-course) then react-native Image component may need to do lot of efforts to crop it to perfect size. This may leads to performance issue.
Please help with the correct approach.
android html ios performance react-native asked Jan 1 at 2:50
Shubham1164Shubham1164
7317
add a comment |
I am working in react native with Image component and I have to use same image at multiple locations with different size. Like user profile image at:
- In profile section, with a large circle of about half the device height - 600x600px,
- In others contact section in the list of the contacts as thumbnail image - 80x80px,
- In chatting section, sending an image to other user, image message will appear in a small box -200x200px.
My concern is should I create a small exact image size crop/compressed version for each sizes above or I must use the original size image like 1000x1000 everywhere, irrespective of the Image component size
- If I create a crop version of each image of perfect size than a lot of memory will be used on device and
- If I use the original image (downloaded off-course) then react-native Image component may need to do lot of efforts to crop it to perfect size. This may leads to performance issue.
Please help with the correct approach.
android html ios performance react-native asked Jan 1 at 2:50
Shubham1164Shubham1164
7317
There is no "correct" approach. It's going to be based entirely on what you consider a reasonable tradeoff between complexity, performance and amount of data transferred.
– Robert Harvey♦
Jan 1 at 2:53
What is your preference between the 2 above approaches?
– Shubham1164
Jan 1 at 2:54
1
The one that most effectively meets my specific requirements.
– Robert Harvey♦
Jan 1 at 2:54
add a comment |
I am working in react native with Image component and I have to use same image at multiple locations with different size. Like user profile image at:
- In profile section, with a large circle of about half the device height - 600x600px,
- In others contact section in the list of the contacts as thumbnail image - 80x80px,
- In chatting section, sending an image to other user, image message will appear in a small box -200x200px.
My concern is should I create a small exact image size crop/compressed version for each sizes above or I must use the original size image like 1000x1000 everywhere, irrespective of the Image component size
- If I create a crop version of each image of perfect size than a lot of memory will be used on device and
- If I use the original image (downloaded off-course) then react-native Image component may need to do lot of efforts to crop it to perfect size. This may leads to performance issue.
Please help with the correct approach.
android html ios performance react-native asked Jan 1 at 2:50
Shubham1164Shubham1164
7317
I am working in react native with Image component and I have to use same image at multiple locations with different size. Like user profile image at:
- In profile section, with a large circle of about half the device height - 600x600px,
- In others contact section in the list of the contacts as thumbnail image - 80x80px,
- In chatting section, sending an image to other user, image message will appear in a small box -200x200px.
My concern is should I create a small exact image size crop/compressed version for each sizes above or I must use the original size image like 1000x1000 everywhere, irrespective of the Image component size
- If I create a crop version of each image of perfect size than a lot of memory will be used on device and
- If I use the original image (downloaded off-course) then react-native Image component may need to do lot of efforts to crop it to perfect size. This may leads to performance issue.
Please help with the correct approach.
android html ios performance react-native android html ios performance react-native asked Jan 1 at 2:50
Shubham1164Shubham1164
7317
asked Jan 1 at 2:50
Shubham1164Shubham1164
7317
asked Jan 1 at 2:50
Shubham1164Shubham1164
7317
asked Jan 1 at 2:50
Shubham1164Shubham1164
7317
asked Jan 1 at 2:50
Shubham1164Shubham1164
7317
7317
There is no "correct" approach. It's going to be based entirely on what you consider a reasonable tradeoff between complexity, performance and amount of data transferred.
– Robert Harvey♦
Jan 1 at 2:53
What is your preference between the 2 above approaches?
– Shubham1164
Jan 1 at 2:54
1
The one that most effectively meets my specific requirements.
– Robert Harvey♦
Jan 1 at 2:54
add a comment |
There is no "correct" approach. It's going to be based entirely on what you consider a reasonable tradeoff between complexity, performance and amount of data transferred.
– Robert Harvey♦
Jan 1 at 2:53
What is your preference between the 2 above approaches?
– Shubham1164
Jan 1 at 2:54
1
The one that most effectively meets my specific requirements.
– Robert Harvey♦
Jan 1 at 2:54
There is no "correct" approach. It's going to be based entirely on what you consider a reasonable tradeoff between complexity, performance and amount of data transferred.
– Robert Harvey♦
Jan 1 at 2:53
There is no "correct" approach. It's going to be based entirely on what you consider a reasonable tradeoff between complexity, performance and amount of data transferred.
– Robert Harvey♦
Jan 1 at 2:53
What is your preference between the 2 above approaches?
– Shubham1164
Jan 1 at 2:54
What is your preference between the 2 above approaches?
– Shubham1164
Jan 1 at 2:54
1
1
The one that most effectively meets my specific requirements.
– Robert Harvey♦
Jan 1 at 2:54
The one that most effectively meets my specific requirements.
– Robert Harvey♦
Jan 1 at 2:54
add a comment |
2 Answers
2
active
oldest
votes
Since react native follows the pattern of the web so it is smart enough to compress the image size to make it to the size of the Image component you are using, it may take some time for compressing the size, which seems a more viable solution rather than creating a compressed copy by yourself for each asset. Assets may keep on changing so it will be difficult to track.
answered Jan 1 at 3:00
Shubham1164Shubham1164
7317
add a comment |
You need to put logic on the server side. When you tried to upload an image then the server will resize the image in the necessary resolution which you need to use in application along with Original.
You need to render a particular image from the server on a particular screen. For downloading an image you can use FastImage.
answered Jan 1 at 4:17
NirmalsinhNirmalsinh
3,27331437
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53992750%2fshould-i-store-different-sizes-image-for-different-image-component-size-to-impr%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Since react native follows the pattern of the web so it is smart enough to compress the image size to make it to the size of the Image component you are using, it may take some time for compressing the size, which seems a more viable solution rather than creating a compressed copy by yourself for each asset. Assets may keep on changing so it will be difficult to track.
answered Jan 1 at 3:00
Shubham1164Shubham1164
7317
add a comment |
Since react native follows the pattern of the web so it is smart enough to compress the image size to make it to the size of the Image component you are using, it may take some time for compressing the size, which seems a more viable solution rather than creating a compressed copy by yourself for each asset. Assets may keep on changing so it will be difficult to track.
answered Jan 1 at 3:00
Shubham1164Shubham1164
7317
add a comment |
Since react native follows the pattern of the web so it is smart enough to compress the image size to make it to the size of the Image component you are using, it may take some time for compressing the size, which seems a more viable solution rather than creating a compressed copy by yourself for each asset. Assets may keep on changing so it will be difficult to track.
answered Jan 1 at 3:00
Shubham1164Shubham1164
7317
Since react native follows the pattern of the web so it is smart enough to compress the image size to make it to the size of the Image component you are using, it may take some time for compressing the size, which seems a more viable solution rather than creating a compressed copy by yourself for each asset. Assets may keep on changing so it will be difficult to track.
answered Jan 1 at 3:00
Shubham1164Shubham1164
7317
answered Jan 1 at 3:00
Shubham1164Shubham1164
7317
answered Jan 1 at 3:00
Shubham1164Shubham1164
7317
answered Jan 1 at 3:00
Shubham1164Shubham1164
7317
7317
add a comment |
add a comment |
You need to put logic on the server side. When you tried to upload an image then the server will resize the image in the necessary resolution which you need to use in application along with Original.
You need to render a particular image from the server on a particular screen. For downloading an image you can use FastImage.
answered Jan 1 at 4:17
NirmalsinhNirmalsinh
3,27331437
add a comment |
You need to put logic on the server side. When you tried to upload an image then the server will resize the image in the necessary resolution which you need to use in application along with Original.
You need to render a particular image from the server on a particular screen. For downloading an image you can use FastImage.
answered Jan 1 at 4:17
NirmalsinhNirmalsinh
3,27331437
add a comment |
You need to put logic on the server side. When you tried to upload an image then the server will resize the image in the necessary resolution which you need to use in application along with Original.
You need to render a particular image from the server on a particular screen. For downloading an image you can use FastImage.
answered Jan 1 at 4:17
NirmalsinhNirmalsinh
3,27331437
You need to put logic on the server side. When you tried to upload an image then the server will resize the image in the necessary resolution which you need to use in application along with Original.
You need to render a particular image from the server on a particular screen. For downloading an image you can use FastImage.
answered Jan 1 at 4:17
NirmalsinhNirmalsinh
3,27331437
answered Jan 1 at 4:17
NirmalsinhNirmalsinh
3,27331437
answered Jan 1 at 4:17
NirmalsinhNirmalsinh
3,27331437
answered Jan 1 at 4:17
NirmalsinhNirmalsinh
3,27331437
3,27331437
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53992750%2fshould-i-store-different-sizes-image-for-different-image-component-size-to-impr%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
There is no "correct" approach. It's going to be based entirely on what you consider a reasonable tradeoff between complexity, performance and amount of data transferred.
– Robert Harvey♦
Jan 1 at 2:53
What is your preference between the 2 above approaches?
– Shubham1164
Jan 1 at 2:54
1
The one that most effectively meets my specific requirements.
– Robert Harvey♦
Jan 1 at 2:54