Resize to be the same as browser selected image

Right, I understand that. The srcset attribute only selects what quality of image will be uploaded to the browser, has nothing to do with how that image is ultimately displayed, that would depend on CSS. On mobile this is very important because loading a large image on mobile would make the page load time prohibitively long. This is why we only want to deliver the minimum acceptable image quality on a per view-port size basis. I think this is the whole point of this plugin.

I also understand that I only need to define the sizes once. Now that I have .econaImage > img {width: 100%;), perhaps this is a moot point, because regardless what images sizes they choose it will always fill the .econaListImageBlock container. What I was wanting to happen is that the .econaListImageBlock {width:xxx} change when the Sizes attribute changes in Display Options in Content Custom Fields.

But really, I don't want to belabor this point any more. Your plugin is brilliant as is, and if others that come after me want to change the layout of the images on the site, well, then they will just have to read your documentation.

On mobile and tablet I have the images cleared so that they sit on top of the text, on anything larger than tablet such as tablet landscape or notebook and larger, the images are floated left. The .econaListImageBlock container determines how much screen real-estate each image will occupy.

Really I want to rewrite this using CSS Grids and CSS Flex, where the browser will make the decision of how much screen real estate these images will occupy. That way using your plugin, the browser will choose not only what image quality to display but also what size the container should be that displays that image based on the grid layout when fractional units are used for defining the size of grid container element.

Well I wrote a detail of how CSS Grids would work, but the session timed out. I don't know how you have your session timer set up, but I had just decided to edit the post thinking the session timer would be reset when I chose to edit, and I just finished writing and went to post, when I got the 403 access denied. Usually I will select and copy the text before posting, just in case the session has timed out, but this time I was typing for such a short time I didn't see the need, and then about 10 minutes of thoughtful comment was lost.

Don't have time to re-write, it had to do with grid-template-columns, grid-template-rows, grid-area, .row-fluid and .econaListImageBlock.

Thanks. I did the following for the Protostar Template. Looks like it will work. Someone from JoomlaTools cautioned me that by doing this I might introduce incompatibilities. I accept that risk and will deal with incompatibilities as they arise. I will do something similar for the new Cassiopeia template. I am reading another tutorial on CSS Grids that explores some of the more esoteric features of the specification. Notice I got rid of all those 10 digit precision widths and margins needed for Bootstrap.

.row-fluid {
	display: grid;
	grid: auto auto / repeat(12, 1fr);
	grid-gap: 20px;
	*zoom: 1;
}
.row-fluid [class*="span"] {
	display: block;
	min-height: 28px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.row-fluid .span12 {
	grid-column: span 12;
}
.row-fluid .span11 {
	grid-column: span 11;
}
.row-fluid .span10 {
	grid-column: span 10;
}
.row-fluid .span9 {
	grid-column: span 9;
}
.row-fluid .span8 {
	grid-column: span 8;
}
.row-fluid .span7 {
	grid-column: span 7;
}
.row-fluid .span6 {
	grid-column: span 6;
}
.row-fluid .span5 {
	grid-column: span 5;
}
.row-fluid .span4 {
	grid-column: span 4;
}
.row-fluid .span3 {
	grid-column: span 3;
}
.row-fluid .span2 {
	grid-column: span 2;
}
.row-fluid .span1 {
	grid-column: span 1;
}
.row-fluid .offset12 {
	grid-area: 1 / 11 / 3 / 13;
}
.row-fluid .offset11 {
	grid-area: 1 / 10 / 3 / 13;
}
.row-fluid .offset10 {
	grid-area: 1 / 9 / 3 / 13;
}
.row-fluid .offset9 {
	grid-area: 1 / 8 / 3 / 13;
}
.row-fluid .offset8 {
	grid-area: 1 / 7 / 3 / 13;
}
.row-fluid .offset7 {
	grid-area: 1 / 6 / 3 / 13;
}
.row-fluid .offset6 {
	grid-area: 1 / 5 / 3 / 13;
}
.row-fluid .offset5 {
	grid-area: 1 / 4 / 3 / 13;
}
.row-fluid .offset4 {
	grid-area: 1 / 3 / 3 / 13;
}
.row-fluid .offset3 {
	grid-area: 1 / 2 / 3 / 13;
}
.row-fluid .offset2 {
	grid-area: 1 / 1 / 3 / 13;
}
.row-fluid .offset1 {
	grid-area: 1 / 0 / 3 / 13;
}

Here are some breakpoints I thought relevant to the internet device landscape today. What do you think? Do these appear usable?

$wearables "{min-width: 270px)"
$phones "{min-width: 360px)"
$tablets-portrait "{min-width: 600px)"
$tablets-landscape-pro-portrait "{min-width: 960px)"
$tab-pro-landscape-old-laptop "{min-width: 1300px)"
$HD-screens "{min-width: 1680px)"
$QHD-screens "{min-width: 2300px)"
$4K-5K-UHD-screens "{min-width: 3000px)"

// universal styles

@media #{$wearables} {
	…
}

@media #{$phones} {
	…
}

@media #{$tablet-portrait} {
	…
}

@media #{$tablet-landscape-pro-portrait} {
	…
}

@media #{$tab-pro-landscape-old-laptop} {
	…
}

@media #{$HD-screens} {
	…
}

@media #{$QHD-screens} {
	…
}

@media #{$4K-5K-UHD-screens} {
	…
}

I realized that I made a mistake with the offsets, they should be on more that the spans. In other words, .row-fluid.offset5 {1 / 6 / 3 / 13} corresponds to .row-fluid .span5 {grid-column: span 5;}. The shorthand method of declaring these properties require adding one to the column number, such that to reference columns 5 and 12, it is necessary to declare those to be 6 and 13.

Oh yes, I had to add a grid-row: span 2; to each of the spans. I will have three rows, because there is the left column, main content, and right column, and when it is viewed on mobile these need to stack, so I will change the grid-area: k / l / m / n; and the grid-row span m-1; attributes to make that happen.

I find CSS Grids so compelling that I will be replacing the frameworks with CSS Grids in the present. Like I said, optimizing the layout for different devices is just a matter of twiddling with numbers like grid-area: 1 / 9 / 7 / 13; on desktop, to grid-area: 5 / 1 / 7 / 13; for the iPhone stacking the columns in rows in a single column the full width of the device on top of each other, in any order that seems appropriate for that particular device. The browser takes care of making sure everything is sized correctly. No need for margin-left: 256.0128987693487453px; or some other absurdity.

I just want to take this opportunity to say thanks again for a superb plugin, CSS Grid does not obviate the need to econa, because we still need to send the image with the smallest number of bytes possible, while preserving the maximum image quality, to the browser which will display it on screen at the appropriate size, because we want all of our pages to load lightning fast, and econa accomplishes this for us.

OK, gave you a stellar review.

I think lazyload is important because page load times are critical for Google page rank and if there are a lot of images on the page, then those page load times could cause page rank to suffer if lazyload isn't employed.

I think that people expect things to happen instantly on their mobile devices and if it takes time for a page to load, they quickly moved on to something else, kind of like global ADHD. If they get something to look at, even if the images aren't yet rendered, they will more likely wait for the images as they can see something is happening.

So yes, go for it.

I will look forward to the release.