Updated: 16 January 2025 for Release v207
The crop tool automatically creates all the different crops needed across the website from the single source image. If that image is larger than a crop it will reduce it to the right size, so we don't need different images for mobile either. Due to the number of possible configurations of parts and layouts, it's hard to give absolute dimensions for images.
You can reveal all crops on any page on the website via the button Reveal crops in the Special Access menu. Clicking on a crop version will take you directly to the settings of that crop in the dashboard.
Revealing Crops
The Special Access menu can be activated when you are logged on in the Peppered Dashboard. Once you are logged on, visit your website, the Special Access menu is visible in the top right corner of your screen.
Click Reveal crops and all the different images available on the current page will appear. Now you can choose the image you want to adjust. You will be guided back to the Dashboard where you can easily adjust the crop of the image.
After clicking on the image you will be able to select the part you would like to crop.
Underneath the dimensions of the original, you can see the dimensions of what you have selected for your crop within the frame on the left (in the example below the crop is 998 x 667, which is enough since the required dimensions are 900 x 600).
After saving this crop you will be able to see an overview of different crops of this image, which you might use for the website or for mailings.
Cropping Tips!
- When using the Reveal crops function you will see a couple of versions of one picture (between 1 and 5). These versions will be used to make your page responsive. In other words, these are the versions of the picture that the system will be using to properly show your page on different devices (mobile, tablet, computer) and screen sizes. Make sure all versions as shown by the function Reveal crops look good. If not, take the time to change them. This way you are ensured that the picture will look good on all devices.
- When you are working on a wide/big computer screen you may not see the crops change. Play with the size of your browser frame in order to see the crops change.
Note about png files
Our crop tool uses the WebP file format to generate all the crops. WebP is a rather new standard for images on the web, and does a really good job to optimize file size vs image quality. However, in graphic artwork, WebP compression can be slightly visible on sharp edges. For graphics with sharp lines and edges, it is best to use the .png file format, because that is a lossless format. In this release we made sure that whenever a png file is uploaded, each generated crop will be stored as a png file, making sure all crispy details will stay crispy, anywhere, any time.
Related articles