20 Resizing Images
Accessibility Requirements
Via Yale University’s Usability & Web Accessibility: “In general, text in images should be a generous size to mitigate pixelation when zoomed. A minimum size of 19px is a good rule of thumb, with larger being better.” While you can’t directly measure text size in images, use your best judgement. If the image is 100px in height, and the height of one line of text is half of the image height, the text is about 50px.
Other Considerations
Mobile and PDF versions should also be taken into account when resizing images.
Manual Resizing (Reccomended)
It is easiest to resize images (especially when it is only a couple) manually with the visual editor. Click on the image, then the pencil (“edit”) icon. Set the width to your desired pixel width (usually with the “Custom Size” option in the dropdown under “Display Settings”), and the height will automatically adjust depending on the proportions of the photo. These are each set to width=300
These are set to width=100
A Note on Using Percentages
With <img class=”resize”>
And Custom Styles:
.resize {
width: 50%;
}
This sets the image width to 50% of parent element, which, in this case, is <section> with width 688px. So, the width of these images are 344px.
I highly recommend learning how to use Chrome Devtools (or really just the “Inspect” option when you right click on the page.) It shows you the HTML & CSS behind the whole page, which is really insightful. You can click on each element and see what property (like size, color, etc) is coming from where. If you hover over relative units (like em, %, rem) under “Styles” when you pull up the “Elements” tab (should be the first thing that pops up), it will show you the pixel value.
Basically, width: 50% == 50% of the page width (or div/section width, if in a div/section)
