Get your Jpegs, png’s and webP images correctly organised to save time in the future. Your time is precious…
Article authored by the ISPC
Images will play a big part in getting your website right. No one buys themselves a counsellor from home bargains… Images help to up-sell the professionalism of your site.
Introduction: Dimensions, File Size and Resolution
Images are a critical component of modern websites, affecting everything from user experience to search engine ranking. Optimizing them properly is essential for ensuring your site is fast, accessible, and professional.
Image size and dimensions
The size of your image file is a crucial factor in website loading speed, and you should always aim for the smallest file size possible without compromising visual quality.
How to determine the best size
Resolution: For the web, a resolution of 72 dots per inch (DPI) is generally sufficient. Higher resolutions are unnecessary and only increase file size.
Dimensions: Size your images to the exact dimensions they will be displayed on the page. Using a 4,000-pixel wide image for a 600-pixel wide section will significantly slow down your site.
File Weight: Aim to keep most image files under 200KB. For small images like thumbnails and logos, files should be even smaller, ideally under 80KB.
How to reduce image file size
Reducing the file size of your images before uploading is a standard practice.
- Choose the right format:
- JPEG: Ideal for photographs and complex images with many colors. It uses “lossy” compression, which permanently discards some data to reduce file size.
- PNG: Best for graphics, logos, or images with transparent backgrounds. It uses “lossless” compression, which maintains perfect image quality but results in a larger file size.
- WebP/AVIF: Modern formats that offer superior compression and quality compared to older formats. They are supported by most modern browsers.
- Use a compression tool: Online tools like TinyPNG or desktop software like Photoshop offer compression features. Many website platforms also have plugins that automatically optimize images on upload.
- Resize and crop: In your photo editor, set the image to the exact pixel dimensions you need and crop out any unnecessary blank space.
Alt text (alternative text)
Alt text is a written description of an image that is crucial for both SEO and accessibility.
Why it’s important
- Accessibility: Screen readers, used by visually impaired users, read the alt text aloud, providing a description of the image content.
- SEO: Search engines use alt text to understand what an image is, which can help your content rank in image search results.
- Fallback: If an image fails to load, the alt text is displayed in its place, so users still get context.
How to write effective alt text
- Be descriptive and specific: Describe the image content concisely. Imagine you are describing the image over the phone to someone.
- Include keywords naturally: If relevant, incorporate a primary keyword, but avoid “keyword stuffing”.
- Keep it short: Aim for 125 characters or less, as some screen readers cut off longer descriptions.
- Avoid “image of…” or “picture of…”: Screen readers already announce that it’s an image.
- Use empty alt text (
alt="") for decorative images: Images that serve no informational purpose (e.g., dividers) should have empty alt text so screen readers skip them.
Image titles (title attribute)
The title attribute is text that appears in a tooltip when a user hovers their mouse over an image.
- User experience, not SEO: The title text is far less important for SEO than alt text, as search engines give it little to no weight.
- Enhance context, if needed: You can use the title attribute to provide supplementary information, but it’s not necessary for every image.
- Example:
<img src="sunset.jpg" alt="A vibrant sunset over the mountains." title="Photo taken in the Swiss Alps">. Wix deals with this for you, all you need to do is write a title, write the alt text and thats it.
Image file names
A descriptive file name helps search engines understand your image content even before they read the alt text.
- Use clear, descriptive names: Instead of
DSC00123.jpg, usered-woollen-scarf.jpg. - Use hyphens, not underscores: Search engines read hyphens as spaces and underscores as a joiner.
Image placement
The strategic placement of images can enhance the readability and engagement of your content.
- Above the fold: Placing an engaging image near the top of your page (or “above the fold”) can immediately grab a user’s attention.
- Contextual placement: The image should be placed near the most relevant text it relates to. This reinforces the content for both users and search engines.
- Avoid banner blindness: Don’t place images that look like ads. Users have developed a tendency to ignore areas where they expect to see ads.
- Break up text: For long articles, use images to break up large blocks of text. This makes the content more scannable and digestible.
- (Although this may seem like talking in code…. once you get started with the website and use the step by step guide it will become clear. Again if you want any professional help please get in touch with Swarming Bee Web Design)
We encourage all ISPC members to consider contributing to ISPC News and sharing their unique perspectives and insights. Your contributions help build a valuable resource for the therapy and counselling community.
And lastly, we appreciate those that have already come forward with their ideas and writings, we are uploading these blogs over the next few weeks and months.
Kindest Regards
