Image best practices.

A big factor in site loading time/site speed are your images (and other types of media). They can also affect UX (User Experience) and SEO. Here are some basic image optimization practices that you should follow–being consistent with this checklist will make a huge difference in how people interact, how your business is portrayed, and how your site functions.

check iconPicture Perfect

Choose images that are on-brand, professional, and high-res. That’s a given, right? These can be images you’ve taken, you’ve purchased the rights to use, or the amazing head-shots or action shots by the professional photographer you hired.

Big take aways here are that 1) You have obtained the rights to use on your website or else where; 2) The images are high-res, professional looking, and on-brand.

Photo Sourcing:

check icon

Crop & Size

Use appropriately sized images. Meaning, don’t use a 2,500 pixels wide image if you only need the image to be 400 px wide (for a certain spot on your site). Not only does this help with site optimization, it also helps with image rendering.

Photo Cropping Tools:

check icon

File Types

Save images in the appropriate format. PNG for times when you need a transparent background, or JPG, WEBP, (convert to/from WEBP), and SVG for logos or other graphics (you may need to install and activate the “SVG Support” plugin).

check icon

Naming

Name images appropriately. Give them names that describe exactly what the image contains. Something that makes sense using SEO-friendly names such as “chateaubleu.jpg”; not file12345.jpg. Bonus: Helps with organization and with accessibility.

check icon

Optimizing

After you’ve sized/cropped as needed, run your images through an image optimizer such as ILoveImg.com, Shortpixel.com, or Squoosh.app.

This will help to make sure your site size size stays under control. Images you add to your site (in most cases) should no larger than 240kb max.

Bonus tip:

Once you’ve added your images to your website, don’t forget to add descriptive Alt Text explaining what the image or graphic is about. Full sentences are fine. This is important for accessibility (screen readers) and your SEO. Example: “Two dogs chasing a ball at the dog park”.

Pretty as a picture.

Your images tell a story. Using image finesse (next level best practices) can boost visibility, guiding search engines through your content, provide visitors with a first impression, and help ensure that everyone can experience your visual wonders. It’s the key to inclusivity.

Ready to “Next-Level” your website’s images, design, functionality, and more? Let’s chat!

À bientôt !

Janet

Janet Hoover | Create Launch Grow Website Design & Development

Hi, I'm Janet

Web designer, developer, and digital strategist for growing businesses. Learn more about how I can help you keep moving forward with a transformative, conversion-focused website that works wonders and helps you go from stuck to strategic.

Website tips for Next Level businesses delivered straight to your inbox. 👩🏻‍💻

Please enter your name.
Please enter a valid email address.
Something went wrong. Please check your entries and try again.

Your privacy is important. View the
Privacy Policy.

Leave a Comment




Give yourself a website that transforms