This Article Is For:

1. All users
   
2. Is applicable to: all themes
   

NEEDS RELINKING

Web images and content must adapt to varying layouts in order to be optimized for readability and presentation across a variety of screen sizes and uses.

Ensuring that your website is optimized for your users, no matter how or from where they are accessing your content, helps to maintain if not increase your site traffic, and to limit your bounce and abandonment rates

Things To Consider :

1. Modern users now access web content on a wide and growing range of devices and screen resolutions from across the globe, e.g. small to large mobile devices, tablets, e-readers, screen readers, laptops, desktops, tv's, other web-enabled devices, etc.
   

2. Additionally, web content also needs to be optimized for a variety of different use cases, e.g. browser window re-sizing, portrait vs landscape orientation, multi-tasking, split screen mode, multi-screen use, etc.
   

Best Practices :

1. Please note that while all SoCast websites and mobile apps are built to be optimized for mobile responsiveness, there are still other details that you must take into consideration when designing and building your website and/or mobile app content.
   

2. Critical content should always be readable and viewable at all times on any screen.
   

3. Critical content including text, should never be embedded as part of an image if the content is not readable or cannot be deciphered when the image is resized to the width of a small screen, such on as a mobile device.
   

   1. Such content can only be embedded as part of an image if the image is complementary to the content but not the sole means of communicating the content.
      

4. Note that some browsers and e-readers may block images altogether to optimize page speed and/or to adhere to preferences configured in user settings.
   

5. Website visitors with visual impairments may be using screen readers that convert text to speech and may not be able to see your images.
   

6. For these reasons, text and other critical content, e.g. logos, should always be created as separate web elements (in HTML), and not embedded within an image when possible.
   

7. Mobile responsive images are intended to be decorative for aesthetic or branding purposes, or complementary to content for visual reference, but should never be relied upon to be the sole website element to communicate critical content.
   

8. By keeping all critical content elements as separate pieces, it allows the content layout to adapt seamlessly across various sizes while maintaining the readability of text and the overall integrity of the content.
   

9. Your website content should ideally be optimized for the most popular desktop and mobile screen resolutions used by your visitors according to your website analytics, e.g. Google Analytics.
   

   1. Maximum images sizes can be optimized according to the screen resolutions of your target audience as well as your specific website theme specifications.
      

   2. Minimum image sizes also need to take into account their context of use, e.g. Does the image appear in a side, bar, within a column layout, as a background, etc.
      

   3. Image and content presentation for mobile responsiveness can be easily previewed and tested by resizing the browser window on a desktop device to see how it adapts, and then make any necessary changes to optimize the presentation
      

   4. For maximum image sizes, and more on the media library see: https://cs.socastdigital.com/portal/en/kb/articles/how-do-i-add-media-files-to-the-media-library