Shrink images to the size they are actually used #152
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Also adjust pixel dimensions very slightly so that all images are the exact same dimensions. We're talkin' one- or two-pixel changes, but the misalignment is noticeable if you look closely. Finally, the pixel density of the images are adjusted as well. The change is not noticeable, but results in much smaller file sizes. These changes result in a visual improvement. Not only does it fix the aforementioned aspect ratio mismatches, it improves the quality of the scaled-down images. I guess the browser did a poor job scaling the images down, because more detail is visible in the scaled-down versions.
|
Wow, very awesome. Great work -- shipping! |
Cantido
added a commit
that referenced
this pull request
Nov 3, 2016
Our application JS is bloated with minified libraries, while our actual application Javascript barely amounts to more than two hundred lines. I propose removing these libraries from our sass file, and instead load them as separate resources in `<link>` and `<script>` tags. This has several advantages: - By using common CDNs, users are likely to have many of these libraries cached already. - Even if the files aren't cached, the CDN is likely to deliver them faster. - We can use the HTML5 'async' attribute to load these libraries asynchronously, so users aren't held up while they download. - Our fully compiled application JS is much, much smaller, which reduces the load on our host. Also, on the topic of load times, I realized that in #152 that one of the images was a PNG, not a JPG. I had tried optimizing the image, but I didn't realize that it wasn't a JPG like the others. Here, I converted it to a JPG, and it is significantly smaller, and it is visually unchanged. I'm having some difficulty testing on my local machine, so I would appreciate some additional manual testing before merging this.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Also adjust pixel dimensions very slightly so that all images are the exact same dimensions. We're talkin' one- or two-pixel changes, but the misalignment is noticeable if you look closely. All of the content-type images were resized to 600x400, and the DPI for some images was reduced to 72 pixels/inch (they were sometimes as high as 150 px/inch). For digital-notebook.jpg, I cropped out the part that wasn't being displayed. Its position is shifted slightly due to that change, but it's still centered and everything.
These changes result in a visual improvement. Not only does it fix the aforementioned aspect ratio mismatches, it improves the quality of the scaled-down images. I guess the browser did a poor job scaling the images down, because more detail is visible in the scaled-down versions.
Fixes #150.
Size changes
This means these images are ninety-nine percent smaller with no noticeable degradation in quality. 😸