I'm quite new to web development and I just came across to speed loading problems. My website is 14mb right now and it takes minutes to load. Well I'm hosting my website from my computer for testing but still this is not the problem. From a google search I found out that the average size of the 10,000 most visited websites, is 1.4 mb.
Of course I already know the problem with my website's size. I use pictures with resolutions of 3k-4k in each dimension. I was just thinking "the better the quality, the better will render in different screen sizes".
For example, most of my images scale depending on the screen size so in big screens they seem larger and in small screens smaller.
The question is, how am I going to resize my images (using photoshop) to reduce the images size but also support big screens like TV's?
1) One way I'm thinking right now, is to create different images for each device and use an img element with srcset attributes. So in mobile phones I will use the smallest resolutions possible, on tablets a little bigger resolutions, on Desktop full hd and so on... Of course images which I let them grow up to a certain resolution (fixed maximum size but scale able down, for example thumbnails) I can resize them to that maximum size, reducing the image file size as much as possible.
Of course this works quite well, but still if someone tries to view my website from a 4k TV he will need to receive 3k-4k images!!! It would take forever to load! What am i going to do in this situation?