Internal Styles & Resources
Web-Building Resources
last edited October 29, 2025
Visual Best Practices:
- Upload images in .jpg/.jpeg or .png formats after running through an image compressor (see Optimizing Tools)
- .jpgs are best for photos & graphics with greater amounts of complexity. They always have an opaque background and can be compressed at different rates to optimize detail preservation & file size
- .pngs support transparency and are "loss-less" meaning they do not lose quality as they are exported. However, they result in large file sizes quickly once dimensions & complexity are increased, so they are generally saved for graphics
Image Optimizing Tools:
These are free, online tools that are just a bookmark away from making your files wayyyy smaller.
- https://www.iloveimg.com/
Great variety of tools - https://tinypng.com/
Now more than just PNGs! Great general optimizer and consistently one of the best for making smaller PNGs - https://www.websiteplanet.com/
webtools/imagecompressor/
Another favorite with adjustable compression settings which is great for when you're getting too much quality loss from another compression tool (read: another file shrinker made the picture ugly)
Other Tools:
You can always use other editing software you are comfortable with: Photoshop, Figma, etc. that allows you to crop or resize as appropriate and optimize for web.
.webp Conversion
*Pre-launch, we will convert existing media library items to .webp, however, ongoing conversion practices have not been established.
You can convert images via free tools like:
- Figma Extension:
https://www.figma.com/community/plugin/1181873200384736932 - Webp Converter (online or desktop) @ anywebp.com: https://anywebp.com/
Image Dimensions & File Size Recommendations
- GOAL: Image File Data Sizes: ≤ 350KB
No matter the file type, try to keep smaller images below 200KB and the largest images below 350KB.
.JPGs:
- Dimensions:
- Minimum width or height of ~600px preferred if used as an internal graphic
- Large display (ex: row background image): 1600px - 2000px wide is recommended.
- We don't recommend uploading any web images intended for forward-facing display that have a dimension greater than ~2000px (due to maximum display sizes on standard monitors)
- Common Uses: Photos are the most common usage. File compression can be adjusted multiple ways to reduce file size
- Avoid: Using to display logos and text when possible
.PNGs:
- Dimensions: Minimum width ~200px width, 500+ for any larger display purposes
- Common Uses: Display a logo, graphics, text, a chart/graph, or other styled visual elements where Transparency is needed & quality of the image must remain clear
- Avoid: Not usually appropriate for photos - will result in excessive file size
.webp image
.png with transparent background
Blog Posts:
Gutenberg Blocks for Blog Posts
The block editor can be a little challenging- get acquainted with the Gutenberg Block editor or use a "Classic Editor" block to write blocks in a classic What-you-see-is-what-you-get (WYSIWYG) text editor area.
Gutenberg Tutorial:
https://wpastra.com/guides-and-tutorials/wordpress-gutenberg-guide/
