I’m trying to create my own default icons for a list, but the icons also needs to be able to scale to be a header image.
I’ve uploaded the image as an .SVG thinking it’ll be able scale and not get pixilated.
I’ve made some HTML to go into a Rich text - which scales the svg nicely.
However once I use the svg’s directly in the list component or as a title image, they get very pixilated.
I off course can just crank up the the image size, however I’m also afraid that my app will get slow. I read somewhere else on the forum that the size of the image might not matter - is that true?
How does everyone else deal images and icons that needs to scale?
If it’s a default image I think it will be loaded just once since it’s just one URL? If you push the size up I don’t think it would matter too much regarding the loading time. You can try to see if it is a problem though.
It’s just one image for now, but the plan was to make many default images. Fx I have 14 different categories each needing their own default image, and then adding some default images to Q/A section header - so in the end I’m looking at maybe 30 images which might make more of an intense load.
So I’m kind of looking for some rough rules to adhere to to not accidentally make the app too heavy. Do you have experience with what kind of ~size would work well for these things?
Well I haven’t had much experience with an app that requires too many images. The only time I have had problems that seems to be related to images was when we had to load like hundreds of images at once, combining with Cloudinary. Personally I don’t think 30 is too much, but you would know best once you try it out.
I use a LOT of images - but I run them all through templates in Canva first so that they are all consistently sized and downloaded to a small but clear size. I tend to run my main photos at 1200x500 and my avatars at 100x100. 90% of my users are on mobile so using a higher resolution doesn’t really add anything to their experience. And I download everything as a .png file.
I have also started just grabbing the url of a photo hosted elsewhere if it will work for my needs - usually a company logo from their website - and then by using the url I’m not even taking up space for images.
Thank @ThinhDinh & @kabookie for both your input.
I’ll try to experiment a bit. It seems 300x300px is the sweet spot for me.
I just wanted to have some of reassurance that before I start to design my 30 illustrations it wouldn’t be a waste of time due do a slow app. But I’m more reassured now.
