I have a development made.
I'm using 430px X 455px images
When I down-scaled image to 184px width:
- Google Chrome: looks perfect
- Firefox (37.0.1) looks very unfocused
- Internet Explorer (11.0.9): "sawtooth" look (very pixelated)
Why is this? Not rescaled images I can use?
What solution could there be?
Development: http://s566904160.mialojamiento.es/desarrollo/
Use object-fit property of CSS.. Read this tutorial
http://www.devtantra.com/273/object-fit-css3/
If you're not bound by latency concerns, consider serving ~25% more pixels than you're specifying in CSS, and let the browser do the downsizing. That will also handle cases such as browser zoom.
You get the best image quality when using images in the desired resolution.that can be achieved either by creating them in a tool like Gimp or Photoshop, or using libraries like ImageMagic.
Related
It looks perfect in chrome and firefox, but the scaling in IE and Edge is terrible. The size is good but the image looks sharper, the actual image is 2 times bigger than the background size. Is there a way to fix it, I've tried several things I found on stackoverflow but nothing seems to work.
The problem is your relying on the browser to resize your images. Browsers have notoriously poor rendering when scaling images. You should use a specific size and pre-format them in a graphic package beforehand.
I would also consider using an SVG for what you are trying to achieve (I assume the scaled down image is so that on different resolutions, things still look good?) I would seriously consider the flexibility it would give you.
I'm designing a website using Bootstrap framework 2.0.1.
But I'm having one issue with the image logo I used on my website. The logo image looks fine on PC and laptops but when I see this logo image on devices like iPhone and iPad it loses it's quality, the image logo looks blur and stretched.
So my question to you is how should I overcome this issue?
Do I need to create three different copies of same logo image with different dimensions and use them respectively for laptop/PC, iPhone and iPad? If yes how?
If there is any other better solution for this problem please let me know.
Thanks in advance.
One option regarding different image copies based on resolution, would be the srcset attribute. It specifies sources for an image based on the pixel density of the user’s display.
For example:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w">
"In the simple example above, all we're doing is telling the browser about some images that we have available and what size they are. The browser then does all the work figuring out which one will be best."
Read more here.
have you considered converting the image to an SVG?
because it uses vectors rather than pixel data it won't distort regardless how far it gets stretched/squashed.
and i believe it's cross-browser compatible back to ie8
http://caniuse.com/#feat=svg
you can download inkscape for free (or use illustrator if you have it) and try converting the image to SVG to try it out
On this page, the images look fine on desktop but are white/not found on mobile devices. I have no idea why this is happening. I'm just calling an img tag but it says its not found on mobile even though it is there
I have checked your files, #MrVimes is correct your should finish your html which will help validate better on slower devices.
However the problem is purely down to size of the image. Chrome Dev tools shows me that they are massive in size, Enable emulator and select iPhone 5 and see what happens. It is just taking a long time to download.
Try using Picturefil.js to serve smaller images or make them smaller in your software application.
This was the picture I got from Google Dev Tools (which is free and amazing):
Also I noticed that your need to change the way the images are handled in CSS, if you open dev tools:
Position:center
Is not valid, maybe set it to relative or static depending on how you want your page structure to look.
I also saw you may want to update your header with this css:
z-index: 99999;
This will make your header appear on top, as the z-index changes the layers of the html elements (much like the fillings in a sandwhich)
sorry my friend but this is false COMPRESSSING THE IMAGES TO 50KB the big images won't appear because your cache browser is full you have to empty your history/cookies/cache of the browser
IOS DEVICE SUPPORT 32 MEGAPIXEL SIZE OF IMAGE IN SAFARI
take a look here for maximum image size and resolution support Apple IOS developper
to delete your cache just go to "Setting=>Safari=>Cleare cache=>clear cache" and that's it
Note: Check the avaible space on your IOS DEVICE should be greater then 50MB
You have to Enjoy the technologie by let the images greater then 1.5mb and works in both of computers/devices
Is there a way to make an image bigger in HTML5 without it getting blurry.
For example, this image is 24x24:
If you instead load it with a width of 150, it gets blurry. I want pixelated!
http://png-1.findicons.com/files/icons/734/phuzion/24/bug.png
Instead I would like to change the rendering engine to display like what you would see in photoshop. Something like this:
I only care about modern browsers.
If you just leave it to the browser, they will try to make it as smooth as possible nowadays (old IE versions didn't). So your best bet is to load it into a canvas and do the (nearest-neighbour) upscaling yourself. I'm not saying that this a sane idea, just putting it out there. :)
That, or have multiple versions of the image and switch them around somehow. There are a few technics you can try, like css sliding-doors.
After some research: unfortunately what you want to do is limited by browser specific limitations. Firefox has a limited experimental code (image-rendering) that can force the browser to stop interpolating the pixels and thus causing the blurriness.
Unfortunately there is no other supported way of doing this currently. My suggestion would be for you to simply scale the image as I did in the edit to your original post.
Like this:
Mozilla's documentation page: https://developer.mozilla.org/en-US/docs/CSS/image-rendering
Is there any image modification tool out there that will work on webkit?
Something like the one on this page
http://developer.yahoo.com/yui/examples/imagecropper/simple_crop.html
Except that when you interact, you interact with the image in a given space and the mask is fixed (i.e pinching the image, rotating the image etc)
Thanks,
Tee
The jQuery image crop plugin should work with Webkit and does cropping. I don't know of a free plugin that can do image rotation at the same time.
WebKit supports html5 canvas and canvas supports image manipulation. You could make an app to do this. I recommend looking here