Some images are too large

uccser / cs-field-guide

A free online interactive resource/textbook for high school students learning about computer science.

https://www.csfieldguide.org.nz

MIT License

348 stars 75 forks source link

Some images are too large #454

Closed hayleycodes closed 5 years ago

hayleycodes commented 7 years ago

The pictures are currently HUGE

eAlasdair commented 5 years ago

custom html has already been written csfieldguide/utils/custom_converter_templates/image.html

eAlasdair commented 5 years ago

cusom css has already been written as .img-container in csfieldguide/static/scss/website.scss but the images are still huge under certain circumnsances

eAlasdair commented 5 years ago

Images scale to fill most of the width of the screen, this is not inherently a bad thing because it suits some wide but not tall images such as the substitution cipher ones here
However, on desktop screens, images (and videos) above a certain height practically fill the screen, such as the cartoons here
We need a conditional, so that only images above a certain height are scaled to a more appropriate max width
As far as I know, that can't be done in css
The image template csfieldguide/utils/custom_converter_templates/image.html is an html file but is interpreted differently, so as far as I could find it doesn't allow JS of any form

JackMorganNZ commented 5 years ago

This was a topic we spent a lot of time on deciding how to solve for CS Unplugged, I can share our approaches when I return to work.

As far as I know, that can't be done in css

If I understand what you are asking for correctly, this can be done with CSS media queries.

eAlasdair commented 5 years ago

Current solution is to scale down the source images

JackMorganNZ commented 5 years ago

This task involves two steps:

[x] Checking image size (resolution)
[x] Checking image size (file size)

eAlasdair commented 5 years ago

I checked all images in the static/img folder (this doesn't include images within individual interactives) and only the top 4 largest are above 200kb:

compression-comparison.png (540kb)
compressed-jpeg.png (ironically) (441kb)
fruit-bowl-photo-with-canny-edge-detection.png (215kb)
time-capsule.png (206kb)

None of the images are in the MBs (like #512)

eAlasdair commented 5 years ago

Closing this issue as I believe it has been addressed. Reopen if further action is needed