I'm designing a website that has a lot of high quality images. Right now, I've got the images set at 1000px x 1000px. A majority of them are .png with transparency. I've noticed that as some browsers scale DOWN the images, they pixelate the images pretty severely. I've noticed this already in Internet Explorer and Microsoft Edge; however, in firefox and chrome the images look great
Question
I was curious if there was a html/css/javascript method of preventing that from happening?
I will eventually put a system in place that loads a different size image based on width of window; however, for now I'm hoping there is an easy solution available for this.
Sorry if this is a duplicate. Every time I search for this, people are asking about scaling UP images. I couldn't find anything about how browsers effect scaling DOWN images that had a solution.
EDIT
I was asked for the code and I will post the code associated with the images; however, I don't forsee it being a css code issue as it is only effected on certain browers (the two I've noticed are IE and Microsft Edge)
Its fairly basic code
#tribox_1 img,#tribox_2 img,#tribox_3 img { clear: left; width: 50%; height: auto; }
Related
I noticed on some screens and initial load my website content jumps up to meet up with the bottom of the banner. When you resize the window the banner seamlessly resizes to fit. However while resizing the window you will notice the content jumping up and down. I feel like it has something to do with the header height but not sure why it would be delayed in meeting up with the bottom of the banner.
I have posted code question on here without asking this question direclty trying to solve the issue. (For example making a script that changes the header height when the banner size changes.) But was unsuccessful in getting it to work the way i needed and think it was the wrong route anyways.
You can see the site HERE - Resize your browser window to see the content jump and and down.
Any help in the right direction where I could solve this issue would be great! Thanks!
You are using a CSS layout which tries to 'fit' everything perfectly. This is known as a reponsive design (on each 'breakpoint' defined in your css it even tries to use a different height). While this is nice for a website to have (it means that on any device it looks good, to fit) it does put some stress onto the css.
Unfortunately, it is very hard in a comment to help you out. Since it requires some basic refactoring to get a much better performance. If you are interested in fixing it however, a good place to start learning what to take on is: https://developers.google.com/web/fundamentals/performance/rendering/
Also, and this might help allot if you are interested, you can actually 'see' how hard your computer (or device) is working for the drawing performance. When in Chrome (OS X or Windows, doesn't matter) you can open the inspect view (ctrl+shift+j) and go to the timelime tab in the upper bar. When you have opened your website, press the leftmost 'record button', then resize the browser and press stop recording. You will end up with a screen similar to this: https://i.stack.imgur.com/6lS3I.png (this is just an example, not your site).
In the timeline view you can keep track of your performance, you want to avoid purple (layout) bars since that 'costs' a lot performance wise (also the link mentioned earlier explains this very well). As developers we tend to aim for 60fps drawing performance, however this takes quite some effort to reach (especially on full responsive websites). Currently the layout trashing alone takes about 15ms and 10ms paint on your website (on my game pc!). As I 'strip down' the site (leaving only the header) the resizing is fast enough to render smoothly. Clearly the solution to your problem can be found in optimizing your CSS.
On a side note, other than the resizing, you don't seem to have many issues regarding performance it seems. No heavy scripts run around scrolling or anything. Which is a GOOD thing already. And I am quite sure most of your visitors won't be resizing all the time ;-) Hope this helped!
I'm not sure but i think it's because of your responsive design has no min-width and max-width defined.
It's used to limit an element that has responsive design to not get too big or too small.
sample:
.header {
opacity: 0.7;
font-size: 8pt;
color: grey;
width: 100%;
min-width: 150px;
vertical-align: top;
}
you could try reading bit bout it here, good luck trying to fix that page :)
http://www.w3schools.com/cssref/pr_dim_min-width.asp
I'm working on a script and have an issue with Chrome.
Here's what I'm doing:
1. Loading large images into a DIV.
2. Scaling the images to fit the size of the DIV.
3. When the browser is resized, the image is scaled up and down with the browser.
Everything is working 100% in all browsers except Chrome.
I've checked the profiler in Chrome and don't see anything unusual.
These are large images, however are working just fine (even live) in all other browsers.
I've read a ton of places that have noted this issue when using down-sized images in Chrome...but not solution.
Nothing special going on, just using a
var img=new Image();
$(img).load(function(){ .... {);
Does anyone know of a workaround or solution that will work in Chrome?
Thanks!
So it appears that Chrome just sucks when it comes to handling large images and even images that aren't large, but just scaled down. I've searched around endlessly only to find similar questions without resolutions.
Still not sure why all other browsers (even IE 7 and 8) can handle large images (tested with 7mb scaled-down PNGs), but Chrome can't even manage to do a 700kb scaled-down JPG without lagging.
So, I'm answering this question with: in this instance, Chrome sucks.
I had exactly the same problem, but recently solved it. Huge amounth of performance takes up chrome's anti-aliasing, because it recalculates the entire image whenever you resize it.
So to solve it you just add this line to the css if your image:
#myImage
{
image-rendering: -webkit-optimize-contrast;
}
You can turn it off by javascript when the image is still.
More about anti-aliasing: Disable antialising when scaling images
How are you resizing the images? Using height/width or CSS transforms? The latter might result in better performance.
Some info:
Improving the Performance of your HTML5 App
When you're profiling issues with image resizes and decodes in Chrome, it's best to use the Developer Tools Timeline for this as it can give you relatively accurate stats on exactly what took a long time to be decoded.
Downsizing (or re-sizing) involves Chrome having to both decode the image (JPEG/PNG/GIF) you're sending down the line and then do extra work to resize that image into the container (div) that you would like to display it in. Where possible, the advice from the Chrome team is to prescale your images to the correct width/height needed.
Now you might be wondering: well, surely this issue is just down to desktop Chrome sucking, right? It's not as clear-cut as that. Particularly on mobile devices where browsers have less access to a powerful GPU/CPU, it's going to be costly to perform those resize operations there as well. So in short: yes, rescaling large images can be slow in Chrome sometimes. Try to prescale where possible and these performance bottlenecks should disappear.
I have a one-page website and I've added some sections with big background images set on them. I wanted them to have a "fixed" effect so when user scrolls they don't move. So I used background-size: cover; and background-attachment: fixed. This does the job. The problem however, is it's extremely laggy in Chrome, I think chrome doesn't cache images or something. You can test it here:
http://jsfiddle.net/sallar/rwyfZ/1/
its not smooth like other browsers. So I tried using images (in this case using $.backstretch). Using this method the scrolling lag is fixed and scrolls very smoothly, but it doesn't have the "fixed" effect I wanted. So I thought I should use a parallax effect. But none of the parallax plugins or methods I tried did a good a job on "images", they were all optimized for background-image which I can't use because of that problem in Chrome.
Here is a demo of Backstretch example:
http://jsfiddle.net/sallar/FX4Cn/1/
So, What should I do to make them have a fixed style and make the page scroll smoothly like the second example?
Thanks in advance.
I cant see any big difference except that the second one isnt fixed for sure.
I think your "issue" is that Chrome scrolls in steps, what Firefox and Opera dont (i dont really know about the others atm). Next time you may try to google something like "smooth scrolling chrome" to see one of hundrets questions and solutions for this "problem".
It theoretically is possible to do this with Javascript, but i cant find any useful/working example atm.
I'm going steadily more mad if this continues:
Firefox versions 6 - 13 seem to have serious image-rendering performance issues on Mac and Windows XP.
Whether I move multiple Images around in a DIV via position: absolute; left: Xpx or using CSS3 transform: translateX(Xpx); or even in a canvas element the images stutter heavily while being moved around.
You can check my latest Canvas test here: http://jsfiddle.net/5YCmH/6/
My question is; why is this happening?
As I see and read it on the web CSS3 and Canvas should be hardware accelerated by now.
So I checked the various settings in about:config and even reset them to default. Nothing works. While Safari and Chrome are rendering everything smoothly, Firefox looks like IE7.
I tested on 3 different machines, same problem everywhere. Whats happening people?
Any pointers or insight would be helpful!
PS:
I haven't used FF much since I switched to Chrome like one year ago. Before that I made an image sliding widget and tested it in FF 3.6.xx and it worked smoothly (using the position: absolute; left: xx; approach). Now I'm testing code I primarily developed in WebKit browsers also in FF and it doesn't work at all.
Is this real life? I feel funny.
EDIT:
Here's another fiddle showing the same stuttering with old-school animation: http://jsfiddle.net/XZAE6/3/
And with CSS3 translateX(): http://jsfiddle.net/h3UNk/3/
To answer your question: Yes, this is real life... ;)
The problem could possibly be remedied by using smaller images. Your aquatics.jpg is 193 kilobytes and velodrome.jpg 140 kilobytes. I'm sure the size can be reduced by at least 50 % without noticeable loss of image quality.
Ok, this is pretty weird...
Here's the page in question: http://s289116086.onlinehome.us/lawjournaltv/index.php
The main blue callout background was originally a PNG, but when I applied some jQuery trickery to it (click the numbers in the top right to see what I mean), an ugly white border appeared where the transparency should be. See this screenshot from IE8: http://skitch.com/darkdriving/n62bu/windows-xp-professional
I figured I could sacrifice the quality/flexibility of a PNG and just resaved each of the backgrounds as GIFs and set the matte color to white (for now). Well, I was proven wrong because IE is treating the GIF transparency the same as the original PNGs.
I've read here that the issue with PNGs, Javascript, and IE has something to do with multiple filters can't be applied to one image, but shouldn't GIFs be exempt from this because they lack the Alpha Channel? Is there any way to make this page look similar in IE to Firefox or Webkit browsers?
Thanks in advance!
This is a bug in IE.
No current version of IE supports the opacity CSS proeprty, so jQuery uses the Alpha filter instead. However, filters force the element to be fully opaque, so they don't work orrectly with transparent PNGs.
To use transparent PNGs in semi-transparent elements, the PNGs need to be applied using the AlphaImageLoader filter (even in IE8). For example:
if ($.browser.msie)
$(something).css({
background: 'none',
filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/Folder/Image.png", sizingMethod="scale"),alpha(opacity=100)'
});
(This code works; I'm using it right now)
I basically solved this by loading a different set of images (using PHP) on each page refresh. It's not as dynamic, but my attempts at using the ugly, proprietary CSS filters or other javascript-based plugins were all fruitless. In my eyes, this is clearly one of the biggest bugs I've come across in my time spent hacking away at IE. In fact, I'm suprised it took this long for me to encounter it.
Word to the wise in this case: try to back transparent imagery on a solid color or suffer the consequences in IE.