Web Dev

Image Tips for Marketers & Web Developers

Andy Forsberg
11 Jan 2022
5 min read
  1. Use a JPG unless the image is transparent,  use a PNG or SVG code instead as needed
  2. Don't render larger than actual size, unless you're doing the 2x thing then use the Retina plugin with appropriate naming conventions
  3. Optimize them! Use Optimizilla
  4. Generate the ideal versions of them for each social network with tools like Canva
  5. Keep text 20% or less the size of the image in Facebook ads
  6. Always test them in-context (mobile and desktop) - nobody really cares about tablet let's be honest
  7. Store all of your brand assets in figma and share them with everyone who has a current or future need for them to take care of your future self
  8. Serve them from a CDN - I'm a big Cloudflare fan personally
  9. Don't be an asshole and upload a massive image rendered small that takes forever to load even with a fast connection or I'll despise you and your lazy and/or masochistic tendencies
  10. Use thenounproject for all your icon needs and implement them on your site with SVG code
Share this post

Get the Latest Updates

Get notified via email when I post new content.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.