cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
mmoore1
Community Contributor

Question about IMG html Code

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" />

8 Replies
kroeninm
Community Champion

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


Melanie

0 Kudos
Reply
aaron_bahmer
Community Contributor

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.

0 Kudos
Reply
swinning
New Member

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?

0 Kudos
Reply
kroeninm
Community Champion

 @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

0 Kudos
Reply

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
Community Contributor

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.

0 Kudos
Reply
mmoore1
Community Contributor

That is kind of like restating the question.

0 Kudos
Reply
skhagen
Community Contributor

 @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.