I think you are in the USA. Right? In the USA things evolved so slowly? Couldn’t I believe this? In 2006 I got the first internet connection at home and I think the speed was 5 MBPS.
Currently, I am at the 100MBPS speed that too 650INR = 10$/month approximately.
@coothead told me once. I have to search for that post, and I also do not like sprite images.
Ah well, @coothead doesn’t like a lot of things 
(as he’s entitled to) but that doesn’t mean he’s always right.
I think having a div with a class setting backround-position on a sprite would be fine. And alt could be discarded. But you have a point that img is covers more the “content” and the corner cases with unloadable CSS, etc.
For the Opener of Post that was interested in how to optimize his webside,
There are several best practices. It is up to you to pick what best suits your needs.
In my opinion, performance is critical and I would sacrifice the alt text and the img tag for a div and have a sprite. If the class is well named, we do have an acceptable “semantic”. And also for debugging. Having one asset for the sprite simplifies debugging the website.
You said sprite is old and not applicable any more. That is not true. Think about it. If you have a hundread of placeholder images to show, you can reduce the number of HTTP requests to only 1. It will be faster to download, and to load and to debug.
No - I’m in a remote part of Scotland. My original broadband was 2Mbps; my current connection is around 20Mbps, which is the fastest available here.
In my opinion, the site visitor is of the greatest importance, and as I have no way of knowing whether or not they suffer visual or other impairments, I will continue to use accepted best practice for accessibility and usability.
I did not know there are polar bears that far south of the polar circle.
Looks like Singapore is doing quite great →
No that is incorrect as the initial value of margin is zero. Auto is a specific value and allows the margins to automatically fill available space to satisfy the requirements of the box model.
I may be misunderstanding your requirement but a thumbnail view should be a much smaller image in both filesize and image size. For the size of the box in your example I would be loathe to use an image greater than 50k. Of course if you click the small image you should be taken to a full size image which should be loaded on request. However even for a full page image I would seldom use a 1mbyte image as that is still too large even for today’s web. In most cases you can achieve 50% optimisation without visible loss of quality so this all needs to be accomplished before you show it to your visitor.
Ok. And sir,
what about my suggested solution →
.screen {
width:auto}
.screen img {
width: 100%}
Is it ok to apply? Currently, it is solving my issue, but I do not know if it is the best solution.
The overlap was caused by the 20px margin you added as already mentioned by Technobear and would correct the overlap issue.
The gap at the bottom of the image when scrolled was because you set a height on the containing div that was more than twice the height of the image.
If you want a fully responsive container using foreground images then you will need to use object-fit or an object-fit method (which I think we have mentioned before). If you are prepared to use background images then it will be easier but I see these images as content so really should be in the html.
I’m only just back now so give me an hour or so and I will knock up a responsive version of my codepen. The original codepen didn’t need to be responsive because it would fit on all screens as it was. However if you need it inside a percentage container then you will need to change things around a bit. I would not have placed them in a percentage container because they soon get too small and I would have used a construct that wrapped the images to a new line when needed.
It depends for what property. The discussion was about width: auto. And auto is the default for width.
Yes, I was just pointing out that auto is not a reset for everything (such as margin) and you need to refer to the intial value in the specs for the property you are using.
auto is used to removed preassigned values by other CSS rules, and let the browser decide the width.
Again it is not as clear cut as this and width:auto for an absolute element is not the same as width auto for a static element. An absolute element with width auto defaults to content width whereas a static element allows the element to fill the containing block. But I understand what you meant
The devil is in the detail as usual with CSS which is why I try to be clear but sometimes its too complicated to give specifics in a few words.
Deleted!
what are foreground images?
What I understand is If we set .screen img {width:100%} → This will pixelate, and this is where object-fit property is needed?`
Hi there codeispoetry,
in post #56, you pointed out that…
Then in post #65, when you were asked…
…you replied…
[quote]@coothead told me once.
I have to search for that post, and I also do not like sprite images.[/quote]
I do not recollect saying that, or ever holding that opinion. 
Don’t let that stop you from searching, though, as I have often been prone
to suffer from “Senior Moments” or, as I prefer to call them, “Brain Farts” . 
coothead
This is a work in progress (as I am short of time) but I would be looking at something like this.
Open and close the window to see the effect.
Within reason it will accommodate images of any size as it uses object fit for modern browsers (not ie yet) and for slightly older browsers it uses an oversize trick to mimic some of the behaviour of object-fit. The code is quite complex as it does a lot.
I inserted the routine into a flex layout for testing as you can see below the initial images. Flex also allows each box to be the same height and have the footers nicely aligned on each.
As I said I just knocked this up in a few minutes so please refine as necessary:)
Off Topic
I think the discussion @codeispoetry remembers about whether or not sprites are an outdated technique may have been this one:
Understanding how to use image sprites - #2 by Andres_Vaquero
That may very well be true, but I was not a contributor to that discussion. 
coothead
I am more often likely to be wrong than right.
This is due to my congenital contrariness and my Luddite tendencies.
coothead
Hi there @coothead,
Off Topic →
I think you are right here. I messed up two things. You never said anything for sprite, but for PSD →
Somehow my mind collected and reproduced the wrong fact. I am sorry in future I will take care of writing anything publically. I am really sorry.
No need for apologies.
You’re probably too young for “Senior Moments”,
but “Brain Farts” can be extruded at any time. 
coothead