I use leaflet to zoom into images in webapps that I've made (see http://rihannadecoded.com for an example site). In order to make the images work, I need to make sure that they are a square that can break down into 256x256 pixel chunks.
Now I'd like to create a similar site for an image that is 5000x2000 pixels (or whatever other non-square resolution). Is there any way that I can use leaflet to do this?
It shouldn't matter if the image is square and could be splitted ub to 256x256 chunks.
For a 5000x2000 image you e.g. may use 250x250 - tiles(use the tileSize-option to define the size of the tiles).
When the image can't be splitted into square chunks, you still have the option to complete the partially tiles on right/bottom with a background-color of your choice.
Related
I am new to web development and I have a question regarding the natural size of profile pictures vs their actual size.
I noticed that when I inspect element on the profile pictures on popular websites, the natural size of the avatar image is usually twice as large as the displayed size.
Some examples:
And when trying this out on my own, I noticed that images do really look better when you make sure the actual (natural) size of the image is twice as large as the displayed size.
As you can see the 64x64 picture looks a lot more crisp than the 32x32 picture. My question is if there is anything special about the two-factor. Can I make it a 128x128 picture and display it as a 32x32 to make it look even better?
Most images on the web are bitmap1 images, which are made of hundreds of thousands of pixels. For example, a 32x32 image would have 32*32 = 1024 pixels. To display the image, the browser would have to go through every single pixel in the image. So the more pixels in the image, the longer it takes to load it.
As for why the image looks better or clearer is because the number of pixels in the original image (natural size) is the same no matter how much you zoom in or out of the image.
So when you zoom in on an image, you get the following result:
(Image from http://scientificcuriosity.blogspot.com/2006/09/how-is-digital-photo-stored.html)
The "squares" you see are individual pixels.
But if you zoom out, you get the opposite effect:
(Image from https://www.researchgate.net/post/How_can_we_quantify_postural_stability_when_a_human_is_standing_without_perturbation_and_with_it)
As you can see, the image is much more clear when scaled down.
But, there is a major disadvantage to large images (in terms of width and height, or number of pixels), they take longer to load.
The more you scale down an image, the more crisp it will look, but also smaller.
Your best option is to use a medium-sized image and display it scaled at 50% to 100%.
[1] https://en.wikipedia.org/wiki/Bitmap
Image clarity works on the pixel, if you using the high-resolution image for a small display it's not a good idea because High-Resolution image size is big always. your website will be slow.
you can go with this For Example - Natural Size (64x64)px and you can show in (50x50)px not the big difference of Image Pixel.
it will also show your image clear.
I've got a couple questions about the use of images in a html document that I couldn't find an answer for.
Why is the standard 12x12 / 24x24 / 48x48 / 96x96 /... and not 8x8 /
16x16 / 32x32 / 64x64 / ... ?
Why is a 130x130px image resized to 50x50px by the browser (by
setting its width/height in the html doc) going to be more blurry
than a 100x100 image resized to 50x50 ? (is it just easier for the
browser to divide the size by 2 ?)
Is there a specific resolution for images that is worth using over another to be
more 4k friendly ? For instance using 384x384px images instead of
96x96 for 4K screen owners ?
1. Why are there icon size standards?
First of all there are no "standard" sizes for icons but it is always a good idea to create icons with a equal ratio = square images. That does not mean you are not allowed to break the rules, but it depens for which medium you are creating the icons. Android using a differend base size then iOS, because they need to support different resolutions. For desktop it is always good to start from a scale of 16px as a base. reference for icon sizes
2. Why get images blurry when resizes?
Image you are the browser and you need to repaint your 120x120px pixel image into an 50x50 canvas. The problem you face right now is that you need to decides on several point which color to choose especially on edges? What the browser does ist to mix up colors for edges where he knows there is not more enoug space to display it crisp. This is causing the "blurry" effect. No think about resizing the 120x120 to the half. Thats a lot more easier because you dont need to mix colors anymore. Or in more technical term:
Well rastered images when scaled in either direction are going to have some anomalies. When you make them bigger, it’s obvious – things get pixelated quickly. When you shrink them down, whatever is rendering it has to guess on what pixel goes where. https://css-tricks.com/forums/topic/scaling-down-images-with-css-makes-them-blurry/#post-188194
3. Are there a specific resolution for images
Thats basicly a very good question and opens the topic of "responsive" Images. As you know the pixen density on 4k Monitors / Smartphones is a lot higher then on regular screen. The fact that images cannot scale the informations by themself makes them pixelated when enlarged and blurry when shrinked. Best case would be to use SVG as often as you can, icons are best usecase for icons. Normally just putting the bigges image online would do the task, but performancewise it would be catastrophical. If you want to master this topic I can give you some good links to dive in:
https://css-tricks.com/optimizing-large-scale-displays/
https://css-tricks.com/responsive-images-css/
Hope thats answers, at least, a bit of your worries :)
When I'm scaling down big images using canvas and drawImage method, the result is far from perfect.
Compare this images. Left one is actually the canvas with scaled image and the right one is a desirable result. Original of this images is 1600x900 photo. Scale goes from original size to 200x113.
When original image have less width and height or scaling ratio more (ie 0.5 - 0.9), then all fine. But I need to get my users ability to resize big images and make nice thumbnails.
I tried to scale image with multiple small steps (for example 1600px -> 1000px -> 500px -> 200px), the result was better, but it's very bad for perfomance, so I refused this.
If achievement of my goal using HTML5 and canvas now isn't possible, is there any chance that in future it will? I'm just thinking whether should I refuse HTML5 technology and make uploading on ActionScript or keep trying (or waiting) to do this with HTML5? I like HTML5 and actually I don't want to leave such a friendly technology.
The left image was scaled down using a more-primitive form of re-sampling or interpolation. This may be entirely due to how the browser's rendering engine happens to scale images, with the results varying from browser to browser.
If it's an option, one approach where you have full control over the resulting image quality is to upload the image, scale it on the server, and then download it back to the client.
Another approach is to use a JS library to resample the image on the client side. Not sure how practical that is.
I created a black and white collage consisting of a number of images - but saved the file as 1280*1024 - ideally encompassing that rez of a screen.
The issue is, would it be wiser to have the background scale, and stretch the images in the case of a larger screen or should I have it repeat so as not to lose resolution, and have smaller screens cropped from some of the background?
Thanks for any insight!
I personally don't think scaling an image up is ever an option. It's incredibly noticeable, and it doesn't look good. I would recommend using a background image that at least works on 1920 x 1080, and gracefully fade out the image on the edges or tiles well so if someone sees the page on an even larger screen, there aren't strong lines on the edges of the background.
If you are concerned about the bandwidth involved in large images, check out CSS3 Media Queries. All mobile browsers support this CSS3 module, and it will allow you to target certain resolutions and send them smaller images (both in dimensions and file size).
If your image does tile well, I would recommend going with the smallest pattern, and letting css do the repetition for you. There's no point in pushing more pixels down the pipe than necessary.
It's up to the user really but they obviously can't make that decision. I'd scale it but that's not as easy as tiling it. I've never successfully scaled a background image.
It will also depend on your preference.
Are you okay with having a stretched image as a background, in case the user has a larger screen? If yes, then by all means set the background image to stretch. Or, are you more keen on preserving the integrity of the image? In the latter case, it's much better to have the image tile.
If you're interested in creating a full page background image, try one of these techniques found on CSS Tricks: "Perfect Full Page Background Image".
Information:
The images have large transparent sections, so each must be overlapped to create the needed effect. Specifically, the clickable portions of each image are in weird trapezoid shapes meant to be pressed up against each other.
Images have image maps with large portions being overlapped by the transparent portions of other nearby (trapezoid) images. I don't expect any change in z indexes will solve this...
Combining the image files into a larger single one to overlay a single image map for each section seems less than ideal, especially since I may need to re-order or rename them later and such. Never mind hover animations and other possibilities down the road.
What would be the best workaround?
Alright, after much tinkering I think I've found a solution: I just took a 1px transparent gif, scaled it up to cover the whole area (with a higher z-index, of course), and then mapped the image map polygons within that. Seems to work.