How do I use resized images with the image element in cornerstone?

[aaronabramson]

When adding an image using the Image Element in cornerstone, it lets me select from my existing images, but it only lets me insert the ORIGINAL image (or the edited image).

I would like to be able to choose a RESIZED image.

If I edit a post without cornerstone, and simply hit the “add media” button, this lets me choose resized images to add.

This attachment display settings DOES NOT show up in the add-image element in cornerstone.

[nico]

Hi @aaronabramson,

Thanks for writing in.

As of now, Cornerstone adding image does not have that function however, you could adjust the size of the image in the image element setup.

You could also use force regenerate thumbnails to optimize all your images in your site.

Hope it helps.

Let us know how it goes.

Thanks.

[aaronabramson]

When I upload a full resolution photo (1500px by 1000px), and use the cornerstone width setting, it still loads the full resolution image giving me poor performance.

According to GTMetrix:

The following images are resized in HTML or CSS. Serving scaled images could save 750.8KiB (92% reduction).

https://www.pro-1.com/wp-content/uploads/2017/12/Soller_Wedding_171023_131030-web.jpg is resized in HTML or CSS from 1500x1000 to 368x245. Serving a scaled image could save 239.1KiB (93% reduction).
https://www.pro-1.com/wp-content/uploads/2017/01/dancing-on-a-cloud-red.jpg is resized in HTML or CSS from 1152x768 to 368x245. Serving a scaled image could save 183.1KiB (89% reduction).
https://www.pro-1.com/wp-content/uploads/2018/01/2012_theKnot_pick500x500.png is resized in HTML or CSS from 500x500 to 122x122. Serving a scaled image could save 105.2KiB (94% reduction).

I’m not sure how force regenerate thumbnails will help if cornerstone is still only referencing the original image, and not the resized thumbnail images (which I already have).

[rad]

Hi @aaronabramson,

The theme is responsive, the ideal size of an image is around 1000px, especially for the retina devices. The question is, how GTMetrix analyze a site? Is it based on single device? Or is it based on classic mobile devices?

The purpose of the responsive layout is to cover almost all devices, hence, the image should able to maintain its quality regardless of device.

Let’s get a sample, let’s say in desktop there are 3 columns, and each column has 350px width, hence, image respond to it and it follows 350px ( and that's what GTMetrix wanted you to do, just because it's displayed in 350px container then you should change it to 350px ). But what if it’s viewed on a tablet or mobile where the 3 columns collapsed into a single column(that’s how responsive works) then that means the container width will change to fill the device width. Hence, in 1024px tablet, the image will respond to 1024px (full-width). Then what will happen if you change your image’s actual dimension to 350px? It will going to be blurry since it will stretch to 1024px or will remain in 350px but small and floating in the corner.

It still up to you what you’ll be going to follow, is it the actual devices? Or is it GTMetrix’s view of your site. Again, their analysis report is only based on their own single view.

Or you can upload your images as exactly as 350px so it won’t generate other versions of that image. That should also solve the GTMetrix issue

As for cornerstone image, it doesn’t have size selection like from your screenshot. The only option it has is the toggle retina display/size. It will only use the image provided by media library as is, hence, uploading the exact image is the only workaround for now.

Thanks!