Paperclip: Image resize options
Paperclip uses the imagemagick resize options like 100x50> , 100x50<, 100x50# etc to resize images.
See the link what options are available.
- ('!') Ignore Aspect Ratio
- ('>') Only Shrink Larger
- ('<') Only Enlarge Smaller
- ('^') Fill Given Area
- ('%') Percentage Resize
- ('@') Pixel Area Limit
- ('#') Crop thumbnail centrally and ensure the requested dimensions, not documented at imagemagick doc
Related cards:
ImageMagick: How to auto-crop and/or resize an image into a box
Auto-cropping
ImageMagick can automatically crop surrounding transparent pixels from an image:
convert input.png -trim +repage output.png
You need to +repage to update the image's canvas, or applications will be randomly confused.
Trim...
CarrierWave: Processing images with libvips
When you write your next CarrierWave uploader, consider processing your images with libvips instead of ImageMagick.
Reasons for libvips
There are several **upsi...
ImageMagick: Cropping images
ImageMagick takes a string with several options when cropping an image. See the command line options for how to provide the expected image geometry for details.
Note that I...
Heads up: You should always use "current_window.resize_to" to resize the browser window in tests
I recently noticed a new kind of flaky tests on the slow free tier GitHub Action runners: Integration tests were running on smaller screen sizes than [specified in the device metrics](https://makandracards.com/makandra/492109-capybara-running-test...
Always convert and strip user-provided images to sRGB
Debugging image color profiles is hard. You can't trust your eyes in this matter, as the image rendering depends on multiple factors. At least the operation system, browser or image viewer software and monitor influence the resulting image colors ...
ImageMagick: Converting SVG to raster image formats like PNG or JPEG
Conversion
ImageMagick can convert SVGs to raster image formats.
Example for PNG:
convert input.svg output.png
If the SVG has a size of 24x24 (viewBox="0 0 24 24"), the resulting PNG will also have a size of 24x24.
Resizing...
Imagemagick: Batch resize images
Trick: Do not use convert but mogrify:
mogrify -resize 50% *
This overwrites the original image file.
In contrast, convert writes to a different image file. Here is an example if you need this:
cd /path/to/image/directory
...
Carrierwave: Built-in resize methods
Carrierwave includes some handy helper methods you can use to resize your images. Here is a quick summary of them, if you need more details read the [docs](https://github.com/carrierwaveuploader/carrierwave/blob/ff0ffc06f902aa92b30ad6a40d3624511e4...
How to: Specify size of Selenium browser window
Applications often show or hide elements based on viewport dimensions, or may have components that behave differently (like mobile vs desktop navigation menus).
Since you want your integration tests to behave consistently, you want to set a specif...
Generating test images on the fly via JavaScript or Ruby
When you need test images, instead of using services like lorempixel or placehold.it you may generate test images yourself.
Here we build a simple SVG image and wrap it into a data: URI. Al...