Web Images Best Practices

Follow these tips and tricks to keep your images an asset to your website rather than an issue for your users.

Resize images before you upload.

Keep your giant files for print. When it comes to web, you need to keep images small so they don’t slow your website down. Your target is to keep banner images around 2047 pixels wide, 1 MB in size, and smaller images between 400 and 1000 pixels wide and in the KB range for file size.

Helpful Tool: ImageResizer.com

Optimize your images before upload.

Before dragging and dropping, make sure that all images are optimized for web.

Helpful Tool: ImageOptim

Keep important text out of images!

Website images with text as part of the exported image is highly discouraged because it’s not searchable by Google, and it won’t resize correctly.

Use SVG.

When possible, specifically for logos and icons, use a flexible file type like SVGs, which keep your file size small but allow them to be resized infinitely for web without sacrificing file size or quality.

Filename matters!

Uploading DSC012213402.jpg isn’t descriptive for your website’s SEO. Naming the file with more details allows the robots a bit of info for what they’re crawling through. Just name it what it is!  For example, golden-retriever-catching-frisbee.jpg — just look at those keywords!

Have Alt attributes for SEO. 

Alt text is important to help search engines find your image and your website. Besides your image file name, you can describe your image. For example, Lebron-james-lakers.jpg could have an alt tag of “Lakers basketball player Lebron James dunking on unoptimized images”

Tips for better Alt alternatives:

Alt attributes are for your developer or content editor to implement on the website. When you upload an image to a CMS like WordPress, there is typically a field labeled “Alt Text” or “Alt Description” where you can describe the image for robots, screen readers, or browsers that are unable to load images.

• Describe your images in plain language (remember our golden retriever catching a frisbee?)
• If the image is for a product, add serial numbers or model numbers.
• Warning: Danger, Will Robinson. Alt Attributes are not for keyword stuffing. 
• Overuse of keywords is noticed by the Googlebots and may reduce your page score.
• Helpful Tip: Imagine describing the image to another human!

Photoshop Exports 

If you have access to Photoshop, there are many ways to export an image to work well on the web. There isn’t a perfect way to optimize every image but these tips are a start.

• Set resampling to “Preserve Details”
• Width set to 2048px max for banner images, and smaller for other images.
• Export at 10% quality or lower (depending on how complex the image is - you can set the preview to 100% and move the slider around to test the image quality.
• PNGs will always be larger because it takes more memory to save that transparency. Keep this in mind and don’t use to many PNGs on your site, or make sure they’re all optimized.

What about images that are already on my site? 

While everything above is great for the future, what can you do with your current site that already has thousands of images? Good news! 

• Alt Attributes can be updated anytime (set aside some time or ask us for help!)
• WordPress offers plugins that can optimize your current Media Library. We like to use ShortPixel, but there are many available with different pricing and features.
• Enabling a CDN is helpful if your host supports it. We love using Cloudinary for developer-friendly asset delivery. Some web hosts include a CDN for your website like Fastly.
• Including cache rules or a caching plugin is also beneficial for your website's speed. We love using WPRocket for our WordPress builds.

‍