When adding images to your website, it’s essential to optimize them properly to ensure fast loading times and accessibility for all users. Follow these steps to save, upload, and optimize your images effectively.
Never upload full-resolution images to your website. Keep your site fast by resizing images before uploading. Use 72dpi, keep them under 2000px wide, and under 1MB before compression (aim for under 400KB after compression). Adjust based on where the image appears — hero images should be 2000px wide, but about page photos can be 800px. Need a reference? Download a similar image to check its dimension.
• Adobe Photoshop: Use the “Export As” option to adjust the size and resolution.
• Quick Online Resize: Use Bulk Resize Photos for a fast and easy resize.
Once resized, images should be compressed using lossless compression to reduce file size without sacrificing quality. Smaller images improve page load speeds and SEO rankings.
• Imagify: If your site has the Imagify Plugin installed, upload the image to your media library, and it will be automatically optimized. (*Your image must be under 2MB for Imagify to process it. Under 1MB is better!)
• TinyPNG: If Imagify is not installed, manually compress images using TinyPNG.
• Batch Compress: If you have more than 20 images to process at once, use Batch Compress.
Before uploading, rename your image files to be descriptive and meaningful. This helps search engines and screen readers understand the content of the image, improving both SEO and accessibility.
Setting ALT tags is crucial for accessibility, as they provide descriptions of images for visually impaired users who rely on screen readers. If you have the Auto Image Attributes plugin installed, image file names will automatically be converted to ALT tags. If you need it, let me know and I can install it for you.
• Go to the Media Library in your WordPress dashboard.
• Click on the image you uploaded.
• Enter a descriptive ALT tag that accurately represents the image content. You can also include your SEO keyword in the ALT tag. Remember you want to target only one keyword phrase per post or page.
• Save your changes.
When adding buttons in Elementor, it is important to ensure they are accessible to all users, including those using screen readers. This is especially true if the link is vague like “Click here” or if it opens a new tab. Properly labeling links ensures better navigation for users relying on assistive technologies and improves overall accessibility.
• Select the button or text link you want to edit.
• Click the gear icon next to the link to see more options.
• Scroll down to the Attributes section.
• Add an aria-label and the | character followed by a description without quotes to provide a clear description of the link’s purpose. Notice there are no spaces around the | character.
Example:
aria-label|Read more about our services or
aria-label|Visit our vendor's website, opens in a new tab
* While it is possible to add aria-label attributes to links on blog posts, it has to be done with the HTML code editor. On blog posts, try to have your links be descriptive enough that aria-labels are not needed. For example, “click here to read more about us” vs “click here”.
If you need it, the HTML code looks like this (notice ‘=’ vs ‘|’ and quotes around the text):
<a href="https://www.example.com" aria-label="Visit the Example Website">Click here</a>
Making your website accessible isn’t just great for your visitors—it’s also important to stay compliant with laws like the Americans with Disabilities Act (ADA), which ensures that everyone, including those with disabilities, can use your site easily.
