Question about IMG html Code

[mmoore1]

Could someone please explain the different to me between this image code and what happens?  Note the difference between "preview" and "download" in the tag.  I am thinking the second might take longer to display?

1. Inserted from Rich Content Editor (.png)

<img src="https://vcccd.instructure.com/courses/675/files/97080/preview" alt="CourseDesign.png" width="300" height="300" data-api-endpoint="https://vcccd.instructure.com/api/v1/courses/675/files/97080" data-api-returntype="File" />

2. Inserted from Images on the right side bar (.png)

<img src="https://vcccd.instructure.com/courses/675/files/97080/download" alt="CourseDesign.png" data-api-endpoint="https://vcccd.instructure.com/api/v1/courses/675/files/97080" data-api-returntype="File" />

[kroeninm]

Good question, the HTML does look slight different, I never noticed!

Melanie

[aaron_bahmer]

Without the width and height designation, the image is allowed to be displayed in its native size, which could be, visually, far larger than intended. However, by setting the dimensions, a very large image (in size and bytes) has to be compressed to the specified size. This takes a bit more computational work by the browser as well as the time to download the full-sized image.

If the image *is* the same size as the specified dimensions, I think the byte sacrifice is in the number of characters of code to state them (which is insignificant).

I'm more interested in understanding the practical difference between "/download" and "/preview" for the image source.

[swinning]

Hi Matthew, 

I wonder if it is more semantics regarding how the image was placed in there. Did you add the image differently in each one?

I also wonder, since one is preview and one is download, if the one is simply preview without a download option whereas the other one allows you to download it? Do you know if you can download the image that is coded preview once it is in the canvas page?

[kroeninm]

 @swinning ‌ when you insert the image using the instructor tabs at the right for Images you get the "download" in the URL.  When you insert the image using the rich text editor button you get the "preview" in the URL.  I can right click and save either image, neither does anything special if I click on them.  

Melanie

[swinning]

Thanks,  @kroeninm . Does it stay that way after a while or does it cover to "preview" after a while? 

I wonder if that is Canvas' syntax for identifying if an image was uploaded during an edit versus being placed within the Canvas system. 

To be honest, my guess is that this has more to do with Canvas' internal development syntax than anything else. So as a user, I don't think there is any real difference. 

[mmoore1]

Thanks.  I have been noticing some differences between images and videos on pages when viewed via Mozilla Firefox or Google Chrome, and I was wondering if this code was affecting any of that.  Anyway, I appreciate everyone's attempts.

[mmoore1]

That is kind of like restating the question.

[skhagen]

 @mmoore1 ‌, I posted the same question about a month after you did. 

Here's my thread. I've concluded that using the content selector to insert images is a best practice.