SEO - Easier images optimization

HubSpot Ideas

Status: Idea Submitted

1

When going through content and trying to optimize image size and weight - It is very hard to locate the image in the media library.
The suggestions below will save significant time in trying to locate the image source.
My suggestion is based on few points:

  • Allow “open image in a new window” on every image field (even if the image is in a template)
  • Once “replace” option is clicked the system will show me the image in the library so I don’t need to search for it.
  • Same with featured images (which are very hard to locate in the library)

See images below -

Image 08-03-2023 at 16.57.jpeg
Image 08-03-2023 at 16.57.jpeg299×606 33 KB

Image 08-03-2023 at 17.05.jpeg
Image 08-03-2023 at 17.05.jpeg734×441 67.3 KB

2

Optimizing images for SEO is an important aspect of improving your website’s performance and user experience. Here are some tips to make the process of image optimization easier:

  1. Choose the Right Image Format:

    • Use JPEG for photographs and images with gradients, as it offers a good balance between image quality and file size.
    • Use PNG for images with transparency or simple graphics, as it provides lossless compression.

  2. Resize Images:

    • Resize images to the dimensions they will be displayed on your website. Avoid uploading larger images and then resizing them using HTML or CSS.

  3. Compress Images:

    • Use image compression tools or plugins to reduce the file size of images while maintaining acceptable quality. Popular tools include TinyPNG, ImageOptim, and Compressor.io.

  4. Optimize Alt Text:

    • Provide descriptive and relevant alt text for each image. Alt text helps search engines understand the content of the image and improves accessibility for users with disabilities.

  5. Use Descriptive Filenames:

    • Rename image files using descriptive and relevant keywords before uploading them. Avoid generic filenames like “image123.jpg.”

  6. Utilize Lazy Loading:

    • Implement lazy loading to load images only when they are visible in the user’s viewport. This improves page load times, especially for long-scrolling pages.

  7. Consider Responsive Images:

    • Implement responsive image techniques, such as using the srcset attribute, to serve different image sizes to different screen resolutions and device types.

  8. Use a Content Delivery Network (CDN):

    • A CDN can help deliver images more efficiently to users by caching and distributing them across multiple servers around the world.

  9. Avoid Using Text within Images:

    • Whenever possible, avoid using text within images. Instead, use HTML text for better SEO and accessibility.

  10. Optimize Thumbnails and Featured Images:

    • If your website uses thumbnails or featured images, ensure that they are properly optimized to reduce load times and improve user experience.

  11. Regularly Audit and Update:

    • Periodically review your website to identify and update outdated or oversized images. Regular maintenance helps keep your site loading quickly.

  12. Use Image Sitemaps:

    • Include images in your XML sitemap to help search engines discover and index them more effectively.

  13. Consider WebP Format:

    • If supported by the browsers you’re targeting, consider using the WebP image format, which provides high-quality images with smaller file sizes.