I'm using this HTML
<img src="stone.png" height="100" width="100"></img>
to display a tiny image that originally contains 5x5 pixels to instead be 100x100. The image becomes extremely blurry when I do this. Is there any way I ca retain the intentional "pixely" design when resizing it?
Note: I don't want to repeat the image, I just want to display it in a larger way and keep each pixel distinct.
No, there isn't.
When you scale an image of 5x5 pixels to 100x100 there needs to be 20x interpolated pixels for each axis (generated synthetically using bi-cubic or bi-linear interpolation) between each points which will always result in a blurry image.
You cannot even fix a huge scale-up like that in dedicated software.
The only solution is to create your image at the intended resolution or close to it. It's also better to down-scale an image as you would remove information rather then generate it.
Related
So I just created a blog on Blogspot. And I'm currently using a simple free blog template from the internet.
You can refer my blog here - https://hariinisayarasa.blogspot.com
Im using the free template from here - https://www.way2themes.com/2020/08/sylva-blogger-template.html
As you can see, you can compare the slider image on my blog is blurry and pixelated compared to the one on the Demo Page here - https://sylva-way2themes.blogspot.com/
Is there any way I can resize my image or any setting that can be done in my template coding so that the slider images are not blurry anymore?
Please let me know if I can provide any code for you so that you can help me solve this problem.
Or you can download the code here - https://www.way2themes.com/2020/08/sylva-blogger-template.html
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element.
Resizing img with HTML
<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg"
width="400"
height="500" />
Resizing img with CSS
img { width: 400px, height: 300px}
From what I've seen, you're using very small raster images.
notice the 'intrinsic size' property
same goes here
Photographs are always saved as raster images. It means that the data of an image is stored in the form of a pixel map - a matrix of squares. If you try to scale the image up, every pixel is also scaled up. Therefore, you lose quality, and the pictures seem pixelated/blurry.
There's no way to keep both the size and detail. Alternatively, you could try to keep the initial size of an image (or at least scale down) - this would, on the other hand, not fill the entire container space.
now check the intrinsic size of one of the images on the demo page
The more scaled image is, the more blurry it gets. The pictures on the demo page have the scale aspect of 2. However, your photo that is 72 x 72px has been scaled up a lot more.
If those photos have been taken by you in higher quality, you might want to use the raw version.
I have many small icons in my website. Instead of loading all of them independently, I am thinking of using CSS sprites due to performance gain.
Consider the following code
<div style="width: 24px; height: 24px;background: url('img.png') -10px -10px;"></div>
vs
<img src="css-sprites.png" style="width: 24px;height: 24px;">
As expected, both gives same result. When loading as an image (second case), if I keep resolution of actual image a higher value, say 128*128, and using 24*24 for display, I am getting better resolution even when we zoom the page in browser (tested in mozilla).
But when using css sprites, since I have to keep the same display resolution in the sprite, the image gets blurred when zooming.
Is this expected behavior or am i doing something wrong? Is there any way to overcome this issue when using css sprites?
I do not have much experience with html and first time going to use css sprites. Please help.
Edit: also, many posts I could see in internet about cross-browser issues while zooming. Is this some point of concern even now?
If your sprite size is 200x200 px, and you want to get better resolution by zooming - make you background-size: 100px 100px;. So if you will zoom to 200% - the quality of you image will still be good. Obviously, your sprite image should be twice bigger the size you are going to use on your website. To avoid problems - do not mix % and px or any other different units in one background-size. Use only px in your case and everything will work just fine.
Summarizing. Make sprite twice bigger, set background-size twice smaller the size of sprite image. Tested it in Chrome and FF. Works fine on zooming.
If you are familiar with svg files - try to do your own vector font (for icons) using http://fontastic.me/. No scaling issues will disturb you. You can set size by font-size and make them any color by color in CSS, like a text.
I have been messing around with some new ideas in Javascript, but I'm not very good at making extremely detailed images in Paint, Paint.NET, etc. The problem is when I have a 64 * 64 image or an 8 * 8 and I want it to display 640 * 640 or 16 * 16; the images get blurry. I've seen many other forums and things were people ask this question or a similar one, but I'm relatively new to this and don't want to make the image larger in photoshop or whatever. On a similar note, can I display only part of an image at one time but have a larger image than shown, so that I don't have to make multiple images of the same thing?
Maybe this CSS attribute on your img helps:
image-rendering: pixelated;
I found it in this blog post:
https://css-tricks.com/keep-pixelated-images-pixelated-as-they-scale/
The reason your images get blurry when enlarged is because it is a rasterised graphic (pixel based image) and not a vector graphic (path based image).
When you try to enlarge the rasterised image, the pixels expand in size too which leads to the lower quality/blurry result (also referred to as 'pixelation').
The difference between vector and raster graphics is that raster graphics are composed of pixels, while vector graphics are composed of paths.
Source: http://pc.net/helpcenter/answers/vector_and_raster_graphics
You can't make it bigger without the picture becoming blurry. You are using a raster image. A raster image is an image that is made up of pixels. a color is assigned to each individual pixel. If you enlarge the picture. Each pixel will just be scaled so that it takes up more space on the screen. This will cause the image to appear blurry.
Here's an example:
rrr
rbr
rrr
"r" is a red pixel and "b" is a blue pixel. The dimensions are 3*3.
If you try to make the dimensions larger than 3*3, lets say 6*6, this happens.:
rrrrrr
rrrrrr
rrbbrr
rrbbrr
rrrrrr
rrrrrr
With the image was enlarged, each pixel just became bigger. In the larger image, each 2*2 square was originally 1 pixel in the original image. Now with this example, the new image wasn't blurry because it was just a square. But if you have a more complex image, it becomes blurry.
To fix your problem, use a vector image. A vector image is different from a raster image. Instead of being made up of pixels, it is made of shapes and lines and stuff like that. Each shape has a width, height, x coordinate, and y coordinate. Some shapes have even more variables. Because of this, vector images can be zoomed in indefinitely without becoming blurry. Sometimes when you zoom in on a vector image the quality even becomes better!
Here's an example:
rrr
rbr
rrr
Again, "r" is a red pixel and "b" is a blue pixel. Let's say this image has a width of 500. But you are zoomed out so far that it appears as a 3*3 square on the screen. In the center of the image is a blue circle. Now it doesn't look like a circle because it only takes up one pixel on the screen. So it looks like square. The circle has a fixed radius. and it is located in the center of the image.
Let's zoom in:
rrrrr
rrbrr
rbbbr
rrbrr
rrrrr
The image still has dimensions of 500*500. It is just zoomed in farther so that it takes up 5*5 on the screen. But the circle looks less like a square and more like a cross. and a 3*3 cross looks more like a circle than a 1*1 square.
The farther you zoom in, the more the image will look like a circle. But since you are using a raster image, enlarging it will result in a blurry picture.
To fix your problem use vector images instead of raster images.
For any form of res-sizing images, you will need a Vector-formatted image.
Vector formats are of the following:
CGM
Gerber format (RS-274X)
SVG
Image File Formats - Wikipedia
Use vector based graphics (svg), not raster bitmaps (jpg, png, gif).
Good thing about SVG is you can add CSS and JS to interact with it in a webpage.
Check this article on how to interface with the SVG
I am trying to 3d transform a floor tile pattern in flash, But when i do so the tile lines become dotted (dashed) here is the screenshot
The best solution is as LDMS said, thickening your lines (even if it is an image), or if you can, enable Anti Aliasing (which i think is what smoothing does)
As for why this happens, this is due to texture sampling. You will probably see that if you move your camera around the gaps/dots in the lines move. Now without going into too many details these are the basics:
Close to your camera the amount of pixel from your image that fit into a pixel on your screen will be less then 1, meaning that one pixel from your image is bigger then an actual pixel on your screen, so it will just display that color from the image. But what happens, if your image is so far away that multiple pixels from your image are so small that they combined fit into one pixel on your screen? With smoothing and Anti Aliasing you run an algorithm to combine colors and get en estimated result. But if you do not do this it will have to pick a color, say we have 2 pixels of black (your line) and 2 of the red background for the same pixel on screen, it will (randomly or based on some variable) pick a color and display it without regard of the other colors.
This is why you sometimes see your line and sometimes the background.
Let's say I have < img src="http://www.always-going-to-be-absolute.com/images/thisimage1.jpg" width= "some px" /> (only a .jpg or .gif). With only the width specified, are there any (any!) circumstances under which the height and width of the image may not scale accordingly, or may not scale at all, assuming there is no CSS or other code affecting it? I can't think of any circumstances (and research doesn't bring up any), but I'd like to be sure by running this by some people who have more experience than I do.
thanks!
No there are not. However, note that is it quicker to load an image of the correct size.
If any other css code or anything else is not affecting it, then I don't think there should be a problem. Try using images of correct sizes though. Helps reduce loading time and preserve quality of images as well. Try it out and if you get any scaling or other problems, you know where to ask, right? ^_^
It looks like you're scaling the images through width. From section 13.7 of the HTML 4 specification:
All IMG and OBJECT attributes that concern visual alignment and presentation have been deprecated in favor of style sheets.
I think the only two problems you may have here are:
Small images: If the image is 10x10px and is scaled to fit a 1000x1000px container, it will be pretty hard to make out what the image is supposed to be.
Thin images: If your container is 1000x1000px and the image is 250x25px, scaling the image to fit the container will result in a 1000x100px image.
OR, is there a way to at least determine the width of an image from a URL.jpg (if it's not specified in the html) without downloading the image?
In front-end JavaScript you can simply:
img.clientWidth;
img.clientHeight;
On the back-end, PHP has a getimagesize() function which returns height and width. I imagine other languages also have similar functions.