On a site of mine, my client is reporting that images that are reduced in size by code (i.e. specified a width/height) are appearing jagged and pixellated. I have asked her what browser she uses and inevitably it's Internet Explorer.
Is there a way to optimise images in IE or do I need to manually resize the images on photoshop before I put them on the site?
The images in question are resized from 220x220 to 80x80 and I have javascript that expands them to 220x220 upon clicking.
Resizing down or up in a browser can look terrible. It varies from browser to browser, but apparently IE is the worst.
It's best to either write a server side script to create thumbnails, or to manually do it yourself if quality of the image is important. It also saves bandwidth as you don't need to load the big image and only display 1/10th of the pixels.
You should avoid using width and height for resizing. It'll cause a longer loading time (on slow connections and big images).
A better idea is making thumbnails (with Photoshop for example) and use the "Web save" option to reduce the size even more.
http://acidmartin.wordpress.com/2009/01/05/better-image-scaling-and-resampling-in-internet-explorer/
Bicubic image resampling is turned off by default in IE. You can use this to turn it on in your reset stylesheet:
img
{
-ms-interpolation-mode: bicubic;
}
use timthumb, it will create thumbnails for you, you just need to link to the script, and specify the size of the thumbnail and that's it. http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/
i'm using it on one of my sites -> http://iv-designs.org/
you can see the images are clean and not pixelated.
Assuming your images are JPEGs, the easiest option is to use IE7's bicubic image resizing feature, which you can turn on using CSS:
img { -ms-interpolation-mode: bicubic; }
Be aware that it's got performance implications (using it a lot will slow the browser down). It also has no effect in IE6, and is no longer needed in IE8.
Another way (which does work in IE6) is to use Ethan Marcotte's wonderful Fluid Images script, which uses some damn clever CSS filters to fix the problem in IE6 and 7. My own variation on the theme fixes the right click problem, but requires jQuery.
Related
I am building a website for me and I care about performance, speed, user experience and a lot more. When I started I didn't know much and I made an initial design using adobe xd. Then using webexport plugin I got a html file that has 2k+ lines of codes for scale to fit any screen and proportional resize of everything. I think I made a 1080p standard artboard but somehow it was way too big like 3554px by 2216px. So the webpage is now that big and scaling is running on it. I don't think it's too big for a browser to handle. Things were good before chrome 97 or 96 update. After that chrome and any browser running on chromium just can't scale my webpage fast enough to fit the screen. I see big divs getting smaller and it takes kinda like 500 ms to settle with decent setup. A lot of variables can affect the performance like if the machine(pc) and network is slow the scaling takes couple of seconds which is too much.
Is there any way to hint the browser to do the scaling first then make the page visible? The older version of chrome was doing it right. I can make the page visible after 600 ms using setTimeout function but doesn't seem what I want.
CSS
will-change: transform;
Tried this but it has bad effect like blurry text on my content. I don't know why it's pushing the browser to it's limit sometimes, maybe I can better optimize my page but these browsers should be more powerful (safari is the worst - can even render the webpage)
This is the home page
https://elomymelo.com/
You should see big page fitting inside the screen and it'll probable take 200 ms pretty fast
proportional resize on window also works
This is a heavy article page
https://elomymelo.com/oneplus%20nord%20review.html
I tried to hide the scaling effect in this page but not satisfied because browsers mess up sometimes. I need the javascript scaling done much faster like visitors will not see that weird transition.
I am trying to make a website with a minimalist feeling to it, so I put a fullscreen image on the background as background-image of body. I have a transition: background-position 1s set as a CSS rule for body and an easing function, to create a smooth scrolling effect when going to other pages in the same HTML file (I have no actual scrollbar, just navigation elements). The thing I noticed was that once I started scrolling, the memory reserved by the page went from a small 77MB to over 500MB! I tested this in Firefox, but it doesn't seem to happen (either because pages have no separate processes or memory allocation works differently, I imagine). Why does this happen in Google Chrome and not in other browsers? And how can I reduce the enormous amounts of memory reserved by my page?
To give some information on what I am using:
Browser: Google Chrome
RAM: 8GB The page uses javascript with the
following plugins:
jQuery
Bootstrap
Background image dimensions are: 1440 x 540
A few possible causes of the problem:
The image is too big to be rendered with a transition and an easing function.
I should not use background-image for this, but create a new <img/> as a background.
I somehow only checked it with developer tools open in Chrome, increasing the memory allocated.
It's not the image causing the problem, but the web fonts I scroll simultaneously with the background image, also using transition and an easing function.
And I want to add that maybe this is not even a problem after all, it's just that I have never seen a page go over 300MB with memory allocation.
Not sure if this should be posted as a comment instead, however:
Nothing you can do about that. Chrome trades RAM for performance.
For instance each chrome tab runs on its own process for that purpose.
I had cases when a single youtube tab took over 1.5gb memory & virtual memory.
Even a blank tab takes 45mb memory for me.
So there is no issue with your code at all.
I have a background image which is responsive. It adapts to the container with the background-size: 100% method which keeps the aspect ratio. However, for older browsers like Firefox 18 and below and all versions of internet explorer I get a bad image when scaled (jagged or blurry). I tried the css bicubic interpolation (internet explorer) and "image-rendering" (firefox) fix yet no effect what can be observed.
My question is: is there a jquery or javascript way that does the same job while preserving the quality? Like a browser independent scaling method. Googled but found nothing.
I know this is not ideal in terms of speed and I should instead do the resizing in my image editing software but this is not an option in my scenario.
Would be happy to hear about your answers,
Sincerely,
Michael
The only good solution I found to provide the best possible quality is by using a css responsive method.
For latest chrome & safari you have the new HTML attribute SRCSET.
For olders browsers, you can use your images as a div background and change it dynamically with CSS only.
For very old browsers, the only way is to grab images with different sizes using JS...
I'm currently building a XenForo theme that's designed to showcase a full-screen, moderately high-resolution photo background using transparency and fun CSS3 effects. However, I'm fearing a rather nasty scaling problem - especially on small devices. As you might imagine, it pains me to think of a visitor trying to load a photo that's nearly a megabyte on a 3G or GPRS connection.
The background in question is a fixed background-image attached to the <html> element.
What would be a suitable way of dealing with the scale problem? There's only so much compression I would do, so would a JavaScript-based solution to serve a suitably sized image for the viewport/device be effective enough? Are there any other solutions that I could consider?
Thanks for your time :)
You should deliver a lower resolution image to mobile browsers. One way to do this is to use CSS media queries: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
As mentioned above using the CSS functionality #media you can serve the right image size for all device types. Have a look at Twitter's CSS framework Bootstrap.
I would recommend using a small image for all requests but replace it only for desktop browser but tablets could use both, a slow internet connection as well as fast wifi access. This requires a more complex solution.
In addition using AJAX for serving the images would likely speed up the page a lot.
I am dynamically sizing a transparent .gif on my web page using JavaScript. The original image size is around 200x200 pixels and it’s typically resized to between 600x600 and 800x800. In IE8 and FF3, the resized image results in a nice looking gradient where the colors appear to be stretched. However, in older browsers such as IE7 and FF2, the resized image does not show a gradient, but just blocks of the same color. Obviously, there is something built into the browsers that causes this however I am curious if there is a way around this without having to change my original image.
There isn't. Older browsers just take the pixels in the image, and multiply them according to the new size you gave the image.
Newer browsers seem to have more advanced image rendering with anti-aliasing and such, but older browsers just aren't capable of that. If you want the image to look good in all sizes, take the biggest you can and then let it shrink if needed. Upsizing a small image will look ugly, expecially in the old browsers, and there's nothing you can do.
If you are just using it as a gradient, why not just whip up a new one in Photoshop/Gimp that's at the correct resolution for what you need. It will be far simpler in the long run then trying to get an up-scaled image to display properly in all browsers.
It looks like IE7 supports bicubic if you add "-ms-interpolation-mode:bicubic;" to your img css style. I haven't tried it myself, and wonder if it'd work on gifs or if it'd only work on true color images.