So I have this issue, on my website i have many sections with background-size:cover property on them, and that causes my website to lag like hell. Is there any solution to contain the 100% width of the picture on every device, but to get rid of website lagging? I've searched some other websites and found, the object-fit:cover on the img tags, but can't seem to implement that on my webpage. Also I compressed every image, so it takes less space. Any answer will be much of a help. Thanks in advance.
The Website
Well first of all your website loads fast for me (but I have a really fast connection). But nevertheless your images are way too big for your needs. For example the box-2.jpg has a size: 3500 x 2333 px. You should resize your images.
Just compressing the images wont help much here, because the size still remains and compressing too much is also bad because you always lose quality. For example the google speed insights always recommends to compress images to the maximum which is not the way to go.
But for you google speed insights is a good way to go to find other elememts which could be optimized.
Related
I am using yslow in which it tells don't scale images in HTML but the images are coming from database and I use them using bootstrap grids. Most of the images are show in popup on click.
The image width I set is in the css file in percentages like max-width:100% or width:100%;, but I don't know what to set to not scale the images in HTML.
I don't know how to resolve this issue. Please help me.
YSlow is telling you this because it is not a good practice to resize images in HTML, especially if the images become smaller, as this means you spend too much time downloading.
You don't need to take everything performance monitors like YSlow are telling you as an action item. The reports are only recommendations. As #Amin Gharavi said, if the images load fast enough for you, then it's probably okay.
The problem is if you are downloading images that are MUCH bigger than their apparent visual, which usually means much slower download in addition to lower visual quality in some browsers.
I was wondering what the best way to have a large HD image load on my website.
When simply using it as a background image, there is a delay and there is nothing on the screen for a about 5 seconds before it slowly slides down the screen.
I had an idea that maybe stacking multiple images on top of each other with increasing quality, so that at first you get bad quality, then when the HD is available and loaded, it is made visible on top of the bad quality image.
I guess really my question is, is this my only solution? Are there any better ways to do this?
Thanks.
Look into image interlacing.
It can supposedly do what you want, though I don't have experience with it myself.
It does seem to be the way Facebook works to me.
Also see this question on SO, as provided by janith in the comments below: Load an image via Interlacing - From low to full resolution - HTML
Currently for my webpage's banner, I'm using http://workshop.rs/projects/coin-slider/ to have 4 images sliding. On the office's slower computers the coin slider seems to be very laggy.
My question is, would animating the 4 images into a single GIF file be better/faster? Are there better options to create a 4-image-moving banner?
Try using a lightweight image gallery, I found some here. The coin slider is lightweight 8KB but there are ones even lighter 2KB or so.
You could technically use a GIF but I think there are some mobile compatibility issues, you can also have better functionality with javascript/jQuery galleries.
As far as slow computers go there isn't much you can do about that, I wouldn't worry too much about it. Just do some extra research on how to minimise files and deliver a faster site.
Gif is not a wise alternet for sliders..you could reduce the quality of your Images and compress them..or if you are using large images and resizing them in slider, you can re size them with any image alteration tool. This will reduce image size too.
And I hope you are not giving images path direct internet links, cause this will automatically increase the loading time.
I have been tasked with optimizing a marketing landing page for speed. It already does really well, but the problem is its very graphic heavy.
The entire thing I would guestimate is 30+ pages long all on one page (It must be like this, and everything must be images due to conversion reasons).
Here's what I've done so far but I'm not sure if there's something else I'm missing
I re-compressed over a 140 jpg's on the page to slightly smaller sizes
I played around with sprites but most of the images are all large (like entire testimonial boxes that are 600px wide). The sprite images ended up being like 2mb. That page actually took longer to load for some reason (by almost 2s) so I took them off
The MOST important thing is that everything immediately at the top loads as fast as humanly possible and before anything else so that the sale isn't lost by someone starting at a bunch of images loading out of order. I used some preaching images with this method: http://perishablepress.com/press/2009/01/18/css-image-caching/ - It did seem to work quite well on the smaller images, but when I add the background (which is very graphic intensive) everything seems to slow down at once, like its trying to do a certain number (5?) of images at a time. Ideally I'd love to group the first 4 smaller images being pre-cached, and then follow it up with focusing all bandwidth on the background, then the rest of the entire page in standard order..
Google Page Speed score is 90/100. the only thing its concerned about is unused styles but that I'm not really concerned about because its about 2kb total... the overhead from the 7mb of images is way more important.
I have the option to use a CDN for the images but I'm not sure how I'd go about doing this or if it would actually help?
I feel I've done all I can but then again I could totally be missing something...
A CDN would definitely help. And with 140 pictures, I hope it
contains more than just server. Just link directly to the IP of
the servers, to avoid unnecessary DNS lookup.
Minimize HTTP requests. You mention that you've been experimenting
with sprites. I still believe sprites to be the way to go, but you
might not want to create just one, huge image. If you have 140
images, you should probably have about 10 sprites.
Make sure that you have set headers to make the client cache all
content. Remember ETags.
Gzip/compress content for browsers that allow it.
If the source code is lengthy, make sure to flush the buffer early.
Consider lazily loading images below the fold? There are a number of javascript plugins to accomplish this
scrolling pagination + combining images as sprites on a per-page basis.
What are the benefits to using an images real height and width when rendering HTML? That is if I have an image that 100x100 pixels but I want to display something that is 95x95 pixels, should I resize the image on the server or can I let the browser handle this? I'm really looking for a general rule along with the reason. Thanks.
<img src="image.jpg" style="width: 95px; height: 95px;" alt="an image" />
Browsers handle resampling/interpolation of bitmap images differently when they're the ones resizing the images, which may or may not be controllable with CSS. This is elaborated on in detail in this post on Flickr's dev blog. If you resize the image in an image editor or by using server technology, you'll get consistent results across browsers.
In your case, a difference of under 5 pixels around will probably not be too much (unless you're concerned about pixel perfection!), but if you're trying to squeeze dimensionally or binarily large images into small rectangles, it's best to resize them beforehand. The reduced image dimensions and file size will help with bandwidth savings.
If you're always going to use the same height, it would make sense to resize it once beforehand - in as nice a way as possible - rather than getting everyone's browser to do it. After all, you can verify the results, make any tweaks you need, use the best software you can find and not worry about how long it takes to perform the resize etc.
On the other hand, I wouldn't expect the results to be very different visually, and unless you're talking about really slow computers (or a lot of images) it's probably not going to take up that much client CPU time. You may want to check the render time on slow mobile phones though, particularly if you're targeting mobile users.
if the sizes are significantly different then you should have a large versin and a small version:
like in your example, 100px and 95px shouldnt be a big deal but lets say you have large images and you want to display thumbnails it will be better to create multiple versions of the images.
The advantage will be:
1 - faster download time when you just want to show thumbnails.
2 - More consistency on different browsers
3 - I am sure people can add at least another 100 advantages in here
Just re-size the image. Otherwise the full 100X100 image will be loaded (which weighs more than 95x95 - and difference in size gets bigger the more you're trying to scale it with html). So it'll take an unnecessary long time to load an image that will not be displayed in its full size. If you scale them down a lot using html and you have a lot of images on the page - that's a lot of wasted traffic and reduced speed.
The whole width/height thing was used when connection was very slow and everyone used phone lines with ancient modems - that way you could see the proper layout of the page before all images were loaded (and it took a while to see all images after seeing the page with all the text).
You should resize the images on the server when it makes sense. I doubt if resizing a 100x100px image to 95x95px will save you more than a couple of KBs so you're probably OK in this case.
If the difference (dimension-wise) is significant e.g. on master page you show a 100x100px thumbnails and on the detail page you have 640x480px image then you better create two versions of the image. This will make your thumbnails page load faster and you'll only serve the minimum amount of data.
On the other hand if the difference (dimension-wise) is not significant then serving two images will actually double the amount of data transferred.
Here is what Google's PageSpeed have to say about it: Serve scaled images