When we are uploading images, many are REALLY big. What is the optimum size?
1 Like
It kind of depends on how students want to use the image, but anything over about 1000 pixels square will take up the whole page on smaller screens. I usually aim for something in the 300-500 pixel range. If you don’t have a simple image editor available for students to resize images, you can find lots of services available if you google “image resizer” (you’ll have to test out a few and see which ones aren’t blocked by your district filter).
2 Likes
For what it’s worth, my students use Google Drawings because they can resize the canvas by the pixel. They import the image they want to the canvas, resize it, then download it into whatever format they need. Hope this is helpful.
I have just ONE girl who can not get an image to download into the Web Lab. When I look at her on the teacher end I can see these images available in the HTML column but they will not show up on her list as being available.
(Not sure if I am making myself very clear, sorry!) Ideas anyone?
@luftj Hi Jan,
This definitely sounds like a bug. Can you report it through code studio? If you go to the level and choose “Report a Bug” from the hamburger menu (three horizontal lines) at the top right corner, it will help us to figure out what’s going on.
Thanks,
Elizabeth
I have been having my students add the attribute width or height. example It seems to work but I don’t know if this is proper technique.
1 Like
Hi Josh, would you put in those attributes again, they’re not showing up Thank you!
You can use the “width” and/or “height” attribute in your img tag. If you only provide one, the image will automatically scale the other appropriately. So if, for example, I had a really big image called “dog.jpg” that I wanted to constrain to 300 pixels wide, I could write <img src="dog.jpg" width="300px" >. The downside of this approach is that if you have a really big image, you’re still requiring the user to download that huge file, even though they’re only seeing a smaller version of it.
I have been uploading photos “as is” without using a photo editor and I have run into some problems. Can anyone help?
I have one photo that insists on turning upside down when uploaded. I don’t know why, and it appears right side up when I find it in the photo files. It is also about 10 times too large.
With the same upside down photo, I resized it in html using height and width commands, which worked to make the photo small enough to see on the screen. I am not able to turn the picture over, though. Is there an html command to use to turn a photo 180 degrees once it is uploaded to Web Lab? I haven’t found anything that works.
I have a student who had the same problem, except her photo turned 90 degrees when she added it to Web Lab, so I am trying to help her fix that problem.
I have decided that a photo editor will be my best bet to make the image the right size and correct orientation before uploading to Web Lab, but I would like to know if there are any “fixes” you know of once it is in Web Lab. Thanks.
Kathy,
Interesting - first I’d submit a bug report just in case. Second, I would search for a similar image that isn’t as big - you can drag and drop an image onto images.google.com to search similar images (I’ve had random times when an image ids being “weird” and I’ve searched another). Third, check out the references from W3Schools that might be of some help. If all that fails you could try to use CSS to style the image accordingly.
An additional option is to take a screenshot of the image and upload it, but make sure the students are still giving rights to the original image, screenshots can open up a can of worms in regards to intellectual property rights.
Let me know if you have any additional questions!
Brad
Thank you, Brad. I didn’t find any way to change it on css, either. I did forget to mention that my photo was from pictures that I had taken and the student’s photo was one she found on the internet. Thanks also for the information on screenshots.
Kathy
Here is a couple of ways to size images with css.
You can use an inline css element like this. I like to use % because it keeps the ratio of the image correct.
<img style= width:50%; src="lee.jpeg">
You can also use the external style sheet to specify width as well.
img
{
width:50%;
}
The problem with the external way is that all images on the page will now be 50% of their original width. To solve that problem, you need to look at css classes which are taught in lesson 13 https://curriculum.code.org/csd/unit2/13/
John,
Thank you for your response. Sizing the image is not really the problem, but these are great suggestions. I am having the picture turn sideways or upside down and need to have it appear correctly.
Kathy
Hi Kathy,
There are ways to rotate elements in HTML/CSS, but it’s not really what it’s designed for, so it’s complicated and unreliable. You can read more about it here: https://www.w3schools.com/cssref/css3_pr_transform.asp
The best solution is really to edit the file before it’s uploaded.
Sometimes what has happened with photos is that the image is rotated the wrong way in the file, but when you go to view it in the photo viewer, you’re allowed to rotate back to the right way. The problem is that it doesn’t actually change the file, just changes how it’s seen in the viewer, so the photo looks fixed, but it’s really not.
If you don’t have Photoshop or GIMP, this link might help your student: https://www194.lunapic.com/editor/?action=rotate
Elizabeth
Elizabeth,
That makes sense about the rotating picture. I will stick with the photo editor, as you all have suggested. Thank you so much for the help.
Kathy