Translate
Images
Images in the new templates are responsive by default. That means they will resize to fit their containers.
Responsive images
This image is 767 pixels x 263 pixels, but because it is responsive by default, it will resize to it's 4 column container.
Non-responsive images
In rare cases, you might need an image to not be responsive. An image map is an example of such a case. This is the same image with the class img-non-responsive added to it. See how it runs off the page because it has not resized to its container.
Images in addons
Images will resize to match their containers. If you place an image directly into a two or three column addon, it will scale down to fit the addon column.
Image sizes
Note that images will scale down smaller to fit their container, but they will not scale up to fill a larger container. They will stop scaling when they hit their original size. For instance, the three column images will not fill the width of a high resolution cell phone screen because the original image is only 255 pixels (px) wide.
On the current kingcounty.gov design, a full-width column is 767px wide, so there's no point in having a responsive image that exceeds that width.
The current recommendation is 300 ppi for things not meant to be printed, 600 ppi for things that are meant to be printed at reasonable quality, and let the graphic designer choose for things that are meant to be downloaded and printed professionally.
Tools
-
If you need to change the size of an image, free online tools like http://www.picresize.com/ let you crop, resize and more.
If you need to reduce the file size of an image, free online tools like http://optimizilla.com optimizing images for the Web.
Image size: the details
Modern digital cameras like the ones on cell phones create absolutely huge images: huge in dimensions, huge in resolution (pixels per inch [ppi] for digital display, or dots per inch [dpi] for print), and huge in file size. This leads to equity issues on the web, notably because:
- The majority of the visits to our site are on mobile devices.
- Mobile data plans have data limits.
- Less expensive plans like those available to the economically disadvantaged charge according to use. Your decorative and arguably unnecessary stock photo could cost someone their grocery money.
- Even a cell plan that bills itself as "unlimited" has a data cap; when you exceed it then the provider slows down your connection, rendering the mobile device a lot less useful.
It also leaves people waiting 60 seconds to load something that displays the size of a postage stamp, because the actual image is 12 inches square and the file size is 20 megabytes.