CODEWITHSUNDEEP
javascriptjqueryhtmlcss
veili_13
veili_13

Reputation: 73

Image size with percentage slows down site

A bit wired but this is the problem. I have jQuery animations and many other events that work properly when in my css file the image width and height are given in pixels but when I set them in percentage or auto (height: 100%; width: auto; --> how I need it to be), my whole web site slows down. The events don't trigger right away and my animations aren't smooth at all (I see only 2 or 3 frames of the animations). Any ideas what might be the problem or how can it be fixed ?

Example of my animations(left and right are divs): 

  $("#left").animate({"width":"+=15%"},"linear");
  $("#right").animate({"width":"+=15%"},"linear");

CSS:

 img {
   height: 100%;
   width: auto;
 }

Upvotes: 1

Views: 76

Answers (1)

shennan
shennan

Reputation: 11656

Whenever I have had site performance issues when using animations they have almost always involved images being too large. As you're using percentage sizing, it may not be immediately obvious that your images are much larger than they need to be.

The average desktop screen size is now 1366×768, meaning that for most websites, the maximum image width/height should be 1366/768 for full-screen galleries (obviously less if these images are acting as icons/thumbnails).

Inspect your images' native dimensions in the developers panel, and make sure they don't exceed these dimensions: that may well solve your performance issues.

Upvotes: 1

Related Questions