-

Note: You are currently viewing documentation for Moodle 3.10. Up-to-date documentation for the latest stable version of Moodle may be available here: More on images.

More on images: Difference between revisions

From MoodleDocs
(16 intermediate revisions by the same user not shown)
Line 38: Line 38:
</div>
</div>


==Enlarge images==
==Enlarging images==


There are times when you want students to be able to enlarge an image. In this case, despite what has been said above, you must have an original image with a large size even if the image displayed in Moodle is small.
There are times when you want students to be able to enlarge an image.
 
<div style="background:#EEE; border-left: 6px solid #BBB; padding: 1px 15px 1px;">
In this case, despite what has been said above, you must have an original image with a large size even if the image displayed in Moodle is small.
</div>


For example, suppose a complex image needs to be viewed at a size of 1000px by 500px for all of its details to be visible. However, you want to display the image in Moodle at a size of 300px by 150px and let the students enlarge it so that they can see the details. You should then use the image of size 1000px by 500px and, when you upload it to Moodle, you specify that you want it displayed at a size of 300px by 150px.
For example, suppose a complex image needs to be viewed at a size of 1000px by 500px for all of its details to be visible. However, you want to display the image in Moodle at a size of 300px by 150px and let the students enlarge it so that they can see the details. You should then use the image of size 1000px by 500px and, when you upload it to Moodle, you specify that you want it displayed at a size of 300px by 150px.


If students want to view the image at its original size, they can simply right-click on the image and select "Open image in a new tab" (Chrome). The image will then be displayed at its original size of 1000px by 500px, allowing students to see all the details. On the other hand, if you reduce the image to a size of 300px by 150px before uploading it to Moodle, students will only be able to zoom in on the page and the image will be blurry and pixelated.
If students want to view the image at its original size, they can simply right-click on the image and select "ZoomImage -> Orginal size / Normal size" (FireFox) or "Open image in a new tab" (Chrome). The image will then be displayed at its original size of 1000px by 500px, allowing students to see all the details. On the other hand, if you reduce the image to a size of 300px by 150px before uploading it to Moodle, students will only be able to zoom in on the page or the image, and the image will be blurry and pixelated.
 
Note that when you drop an image on a page and select "Add media to course page", Moodle automatically assigns it a "reasonable"<sup> (details needed)</sup> size. For example, if the image is very large, Moodle will display it at a reduced size so that it looks right on the page. Moodle also automatically adds a link to the image, so that when students simply click on the image, it displays at its original size in the same frame as it was clicked. If you want the image to be displayed in a new tab, you can add the <div style="display:inline-block;background-color:#f9f9f9;border:1px solid #eee; border-radius:3px;padding:0 4px 0;font-family: monospace;font-size:95%;">target = "_blank"</div> attribute, for example as follows:
 
<pre style="white-space:pre-wrap;">&lt;a href="https://moodleformulas.org/draftfile.php/5/user/draft/413371223/Mir_1990.png" target="_blank"&gt;
    &lt;img alt="Mir_1990.png" src="https://moodleformulas.org/draftfile.php/5/user/draft/413371223/s_Mir_1990.png" width="385.59882439383" height="400" class="img-fluid" /&gt;
&lt;/a&gt;
</pre>
 
If you want the image to be displayed in a pop-up window, you can use the following code:
 
<pre style="white-space:pre-wrap;">&lt;img onclick="popup=window.open('', '_blank', 'scrollbars=yes,resizable=yes,width=2624,height=2722');popup.document.write('<img src=https://moodleformulas.org/draftfile.php/5/user/draft/284021210/Mir_1990.png style=width:100%; height:auto;padding:0;margin:0;border:0;>')" src="https://moodleformulas.org/draftfile.php/5/user/draft/284021210/Mir_1990.png" width="262" height="272" style="cursor:zoom-in;" class="img-fluid"&gt;
</pre>
 
where <div style="display:inline-block;background-color:#f9f9f9;border:1px solid #eee; border-radius:3px;padding:0 4px 0;font-family: monospace;font-size:95%;">width=2624,height=2722</div> are the dimensions of the pop-up window, whose aspect ratio should preferably correspond to that of the image, and <div style="display:inline-block;background-color:#f9f9f9;border:1px solid #eee; border-radius:3px;padding:0 4px 0;font-family: monospace;font-size:95%;">width="262" height="272"</div> are the dimensions of the image as displayed on the Moodle page.
 
With the above code, you will get something like this:
 
<div style="border:6px solid #eee;text-align:center;">[[{{ns:file}}:MoodleDocs_20210411_0059.png|700px]]</div>
 
where the size of the pop-up window and thus that of the image can be easily adjusted.


==Fixed URL==
==Fixed URL==
Line 50: Line 74:
When you drop an image or upload an image as shown on page [[Images]], you may find that Moodle has assigned a somewhat complicated URL as the source of the image. Moodle handles images very well without you having to worry about this URL. In general, the URL cannot be used directly because it is controlled by the image management carried out by Moodle. When you try to use it elsewhere, the URL becomes "broken".
When you drop an image or upload an image as shown on page [[Images]], you may find that Moodle has assigned a somewhat complicated URL as the source of the image. Moodle handles images very well without you having to worry about this URL. In general, the URL cannot be used directly because it is controlled by the image management carried out by Moodle. When you try to use it elsewhere, the URL becomes "broken".


On some occasions, you will need an image whose URL is fixed, that is to say always the same without it changing over time, not controlled by Moodle's image management and doesn't get broken. An easy way to get an image in Moodle with a fixed URL is as follows.
On some occasions, you will need an image whose URL is fixed, that is to say always the same without it changing over time, not controlled by Moodle's image management and that doesn't get broken. An easy way to get an image in Moodle with a fixed URL is as follows:


*Create a Folder resource.
*Create a Folder resource.

Revision as of 05:37, 11 April 2021

This page presents some tips and advanced uses of images.

Image type

Obviously, the existing images already have a type. But when you create an image using graphics software, you need to decide which type you are going to save it to.

JPG vs PNG

You will often save an image as bitmaps, that is either in the JPG or PNG file format. Since file size can be an important consideration, it is good to know that, for the same image quality, the file size depends on the "content" of the photo.

Indeed, if the image is a photo, therefore containing a multitude of colors and shades of colors, it is better to save it in JPG format. On the other hand, if the image is a drawing, containing a limited number of colors, it is better to save it in PNG format.

If you are unsure, save the image in both JPG and PNG formats. Make sure the image quality is adequate and choose the image file that has the smallest size. You will invariably find that the JPG file of a photo has a smaller size than the PNG file, and that the PNG file of a drawing has a smaller size than the JPG file.

An advantage of the PNG format that should be mentionned is that it supports transparent color, which makes it possible to have a transparent background, which is not possible with the JPG format.

You will find further information on the web about when to use either format, for example here.

Image size

The size of images, specified by their width and height, is measured in pixels (px) which translate to mm (or inches) depending on the size and setting of your screen. Consideration should be given to the size of images, as the size of the image files depends on the dimensions of the images.

Basically, there are two sizes of an image to consider: 1) the original size, i.e. the one before uploading the image to Moodle and 2) the size in which Moodle displays the image. To obtain good results, the original size should be about equal, if not greater than, the displayed size.

For example, consider an image whose original size is 400px wide by 200px high. When you upload the image, Moodle suggests that you display the image in its original size or let you specify a different size. If you choose the original size, the image will be displayed in its original size. This is the ideal situation. But sometimes you may want the image to be displayed in Moodle at a size different than the original size.

If you want to display the image at a size of 200px by 100px instead of 400px by 200px, you can reduce the original size of the image to the desired dimensions using image editing software and then upload the newly sized image.

You can also use the image of size of 400px by 200px and, when you upload it, specify that you want it to display at a size of 200px by 100px. This latter method is perhaps faster but less efficient than the former because, although the image is displayed in Moodle at a size of 200px by 100px, it is indeed the image of 400px by 100px which is actually uploaded to Moodle. It is therefore a file of size larger than necessary which is uploaded in Moodle.

Now suppose you create an image with dimensions of 100px by 50px and want to upload and display it in Moodle at a size of 400px by 200px. If you do this, you will get a bad result i.e. a blurry or pixelated image. Indeed, Moodle can enlarge an image but it cannot change its resolution.

In other words, if you want to display an image in Moodle at a size of 400px by 200px, and get a good and clear image, you must have an original image that is at least about 400px by 200px.

Enlarging images

There are times when you want students to be able to enlarge an image.

In this case, despite what has been said above, you must have an original image with a large size even if the image displayed in Moodle is small.

For example, suppose a complex image needs to be viewed at a size of 1000px by 500px for all of its details to be visible. However, you want to display the image in Moodle at a size of 300px by 150px and let the students enlarge it so that they can see the details. You should then use the image of size 1000px by 500px and, when you upload it to Moodle, you specify that you want it displayed at a size of 300px by 150px.

If students want to view the image at its original size, they can simply right-click on the image and select "ZoomImage -> Orginal size / Normal size" (FireFox) or "Open image in a new tab" (Chrome). The image will then be displayed at its original size of 1000px by 500px, allowing students to see all the details. On the other hand, if you reduce the image to a size of 300px by 150px before uploading it to Moodle, students will only be able to zoom in on the page or the image, and the image will be blurry and pixelated.

Note that when you drop an image on a page and select "Add media to course page", Moodle automatically assigns it a "reasonable" (details needed) size. For example, if the image is very large, Moodle will display it at a reduced size so that it looks right on the page. Moodle also automatically adds a link to the image, so that when students simply click on the image, it displays at its original size in the same frame as it was clicked. If you want the image to be displayed in a new tab, you can add the

target = "_blank"

attribute, for example as follows:

<a href="https://moodleformulas.org/draftfile.php/5/user/draft/413371223/Mir_1990.png" target="_blank">
    <img alt="Mir_1990.png" src="https://moodleformulas.org/draftfile.php/5/user/draft/413371223/s_Mir_1990.png" width="385.59882439383" height="400" class="img-fluid" />
</a>

If you want the image to be displayed in a pop-up window, you can use the following code:

<img onclick="popup=window.open('', '_blank', 'scrollbars=yes,resizable=yes,width=2624,height=2722');popup.document.write('<img src=https://moodleformulas.org/draftfile.php/5/user/draft/284021210/Mir_1990.png style=width:100%; height:auto;padding:0;margin:0;border:0;>')" src="https://moodleformulas.org/draftfile.php/5/user/draft/284021210/Mir_1990.png" width="262" height="272" style="cursor:zoom-in;" class="img-fluid">

where

width=2624,height=2722

are the dimensions of the pop-up window, whose aspect ratio should preferably correspond to that of the image, and

width="262" height="272"

are the dimensions of the image as displayed on the Moodle page.

With the above code, you will get something like this:

MoodleDocs 20210411 0059.png

where the size of the pop-up window and thus that of the image can be easily adjusted.

Fixed URL

When you drop an image or upload an image as shown on page Images, you may find that Moodle has assigned a somewhat complicated URL as the source of the image. Moodle handles images very well without you having to worry about this URL. In general, the URL cannot be used directly because it is controlled by the image management carried out by Moodle. When you try to use it elsewhere, the URL becomes "broken".

On some occasions, you will need an image whose URL is fixed, that is to say always the same without it changing over time, not controlled by Moodle's image management and that doesn't get broken. An easy way to get an image in Moodle with a fixed URL is as follows:

  • Create a Folder resource.
  • If you don't want students to see this Folder, put it in “stealth mode” (see Stealth activities).
  • In the Folder settings and under "Content / Display folder contents", unselect "Force download of files".
  • Edit the Folder and drop or upload the images into it, then Save changes.
  • In the Folder, right click on an image and select "Copy link location" (Firefox) or "Copy link address" (Chrome).
  • The URL of the image is now in the clipboard and you can paste it wherever you need it. This URL is fixed, that is, it will not change over time and will not be "broken".

An example of using fixed URL images is when you insert images into the choices of a multiple choice question of the Embedded Answers (Cloze) question.