Develop Reference

Chrome - background-size: cover;-based gallery causes performance issues

I'm building an app using Vue 2. There's a page that contains a simple image gallery that contains about 20 images and one large page background image.
The background image of the page itself is actually contained in a fixed div element that is position: fixed;, has 100% width and height and uses background-size: cover; to display the image.
All of the ~20 items in the gallery as well are using div elements with background-size: cover; displayed in a 3-column grid and the images are displayed using the dynamically generated background-url CSS property using a Vue computed property. The image paths are never being changed so they aren't being recomputed constantly AFAIK.
The performance of this page in Chrome is abysmal, loading takes forever (those are some high resolution images, though, 4K in width) and once the images are loaded I can somewhat interact with the page but everything is extremely laggy and sometimes the page stops responding completely.
On the other hand, in Firefox and Edge everything is basically buttery smooth, both during the loading of the images and during the scrolling/rendering. The interaction with the app is never blocked.
What I remember trying to fix this is replacing the div elements with regular img tags and loading up images using those. Also, I've tried caching the images, I've tried using static image URLs for testing purposes - the same thing happens every time - other browsers handle it well, Chrome is choking on it.
Here's a screenshot of the performance summary in ~30 seconds, from the moment I click the page URL to the moment that basically everything is loaded and the browser is still struggling to render anything and process any interaction with the page. Obviously the painting phase is an issue here:
Any advice? Thanks!

This question is hard to answer as it is a very specific problem.
You can analyze what is causing this behaviour in chrome by using the developer tools:
Open the developer tools in chrome by pressing "Ctrl+Shift+I".
Go to the tab "Performance".
Hit the record button and do the action which has low performance.
Hit stop and you get a breakdown what happened in the background.
If you don't find the issue with above suggestion, you can post a detailed screenshot of the performance breakdown here, I might be able to help you with it.

Best way to load lots of images without stuttering.

I have a site that I load images only when these are in slightly below the view point.
This way, the site first loads without the images then determine what images are needed to be loaded based on the viewpoint.
When user scrolls, and the image is just below the viewpoint, then it loads them.
It works fine on desktop. No laggy, no stutter.
However on mobile web, when I scroll, it stutters as the images are loaded.
Once everything is loaded, the site scrolls up and down smoothly. Also images are resized on the fly to minize file size.
The question that I have is that, what is the best way to load lots of images?
I am loading them only after the site is loaded, then only if they are just bit below the view point.
Do you think I should load them all to avoid stuttering especially on mobile?
I googleed smooth image loading but I don't think I am searching correct terms.
Anyway suggestions will be much appreciated.
Thank you.

Here is a simple and lightweight JS lazy loader library. It's straight forward and easy to understand.
BLazy.js
There is a walk through example from their site.
<script src="blazy.js"></script>
<script>
(function() {
// Initialize
var bLazy = new Blazy();
})();
</script>
Then in your HTML you would setup your images like this. Give it a b-lazy class and a data-src attribute that points to the image.
<img class="b-lazy" data-src="image.jpg" />
ebLazy.js – A lazyload image script
blazy.js examples

responsive HTML images using width and height values in image tag

Currently my website is setup where the full image that is in it is loaded then automatically sized to fit the screen. This is done by setting image width to 100% in CSS. While it does work nicely, It doesn't seem to follow standards because I don't specify width and height in the image tag itself.
My idea now is to create multiple versions of the same webpage, where the only difference is the size of the image. Each image would have its own filename (like image1small.jpg, image1medium.jpg etc).
The problem is most people want to see the bigger picture right away but this doesn't go well with people with small screens since they have to scroll horizontally to see the whole thing.
I was thinking putting javascript at the top that redirects users who don't meet screen criteria to the page with the better sized image. Something like this:
<html>
<head>
<script>
if (screen.width < nnn){window.location.href="smallerpicture.htm";}
</script>
</head>
<body>
<p>some random text</p>
<img src="image.jpg" width=nnn height=yyy>
</body>
</html>
The thing is a page redirect will occur for people who do not meet the screen resolution requirements for the page. I'm not sure if this can qualify as a sneaky redirect to google.
Is this a good practice to use the code like I showed above to redirect users with incompatible screen size to the correct page? or should I take a different approach to display the correct sized image to the user?
And regardless of the answer anyone gives, I feel I need to specify the width and height attribute for the image tag and I want to stick to the HTML 4.01 strict standard so that the page will work for everyone.

The first draft of the HTML 5 standard was designed to work for everyone - it basically documented "what browsers actually do", rather than what browsers were supposed to do.
The rationale behind specifying the width and height attributes is that it reserves the space on the page even before the image loads, preventing the need to re-flow the content when the image loads.
Choosing to specify the attributes, but then redirecting the page, will cause a worse re-render than using the % width without the attributes. So I think your concern is unfounded as your medicine is worse than the illness.
The desire to server different image sizes is one of the use cases for responsive images, so you can take a look at that as an option rather than reloading the page. There are several fallbacks that give you wide-ranging browser support.

Which technique to hide right column with heavy content?

I'm building a mobile site for a great magazine with a lot of content that is partly heavily. The problem now is that I have to hide the entire right column on the mobile site (yes, I need it in this case).
I've done a great research on mobile design, read a lot of articles, but can't find a solution that addresses this problem. It's usual to hide the right column with CSS or JS. But then everything still loaded. In this case the right column is so big, with a lot of content, it seems worthwhile to not load it for the page to load faster.
What should I do?

You should be able to detect the user's browser on the backend (I assume you're using PHP) and then make a simple control structure where you decide whether to load or not load that right-hand column on your site.
Here are some libraries that you may find useful (obviously you shouldn't have to reinvent the wheel for such a trivial task):
http://mobiledetect.net/
https://github.com/serbanghita/Mobile-Detect
http://detectmobilebrowsers.com/ (uses regex)

If you think that it is not a problem that mobile users wont be able to see that content, then you should not load it. There are php classes to check for mobile devices and based on that you can decide to not load some part of content. There is one problem - php class can only base on user agent settings, not browser size, so in theory someone with high resolution mobile device wont be able to see that content anyway.
One more idea on my mind - you can not load content in php, but after general content is loaded, check in js viewport width and eventually load part of content by ajax if there is enough place.
In summary, as we dont know your site content, it is up to you to decide if you can afford to not show part of content at all (for mobile devices). In this case when resolution change, users still wont be able to see it (i.e. changing device position horizontal to vertical). Of course in this case page will load faster, which also migh be crucial for mobile internet connections.

Load a scaled down/low resolution image in HTML

I have small sized <img> in which I put very large pictures. This makes image loading slow and is a waste since I dont really need to download the whole big picture, I show it in very small size.
Is there a way to make HTML load lower resolution images instead of full image resolution? so the loading will be quicker.

There is no feature of HTML (that I am aware of) that automatically generates a thumbnail sized image for you for faster loading. Some sites will do that automatically when you upload like on Wordpress or various e-commerce solutions. So unless you are using one of those, you will have to do your own image re-sizing, before you upload, or write your own feature of the site that resizes images on the fly on the server side.
You have to do this work on the server side, since HTML/CSS/JS are all client side only (node.js non-withstanding) and could only do the resizing for you once the image was already downloaded, which defeats the purpose.