Skip to main content
L
leemarieturner
Participating Frequently
February 5, 2022
Question

Web page project image files appear pixelated on mobile devices

  • February 5, 2022
  • 1 reply
  • 2865 views

The images I upload for my web page project render pixelated on mobile devices.

This is occuring for both .png files and .jpg files. It is occuring for images uploaded to the title portion and to the glideshow.

This is occurring in mobile devices when viewing the page in Firefox, Safari, and Chrome

 

I have attempted:

  • uploading both .jpg and .png versions of the images
  • changing the file sizes to very small
  • changing the file sizes to very large
  • uploading a variety of file sizes between small and large
  • doing the above for both .png and .jpg files

 

What can I do differently so my webpage images render properly on mobile devices?

 

I have attached a screenshot of how the images appear, as well as an example of one of the files that I've uploaded.

 

I am creating vector graphics in Illustrator and saving as either .png or .jpg to create these files. I am not having this issue with photography-based images.

    1 reply

    Nancy OShea
    Nancy OShea
    Community Expert
    February 5, 2022

    For better accessibility, it's best to use REAL TEXT on web pages; not images of text.  Images of text can't be indexed by search engines or "seen" by screen readers and language translators.

     

    Pixel-based images tend to distort (pixelate) when rescaled.  And it's much more noticeable when viewed on high-pixel density (Retina) displays like iPhones and iPads.

     

    It would be great if Creative Cloud Express supported math-based SVG which maintains crisp, sharp lines at any scale.

     

     

    Nancy O'Shea— Product User & Community Expert
    L
    leemarieturnerAuthor
    Participating Frequently
    February 6, 2022

    Hi and thanks for the response!

     

    In lieu of Creative Cloud Express not supporting vector-based image files AND because my type face and type treatment also isn't available, I chose to go with an image of type, rather than the type itself. Express doesn't allow designers to make any choices regarding typeface in web page projects on the platform.

     

    Are there any viable solutions to my problem? This problem is also occuring with other image files in the webpage, not just the first one. I have attached further examples. You can see the pixelated image on the mobile device vs. the properly rendered image that I uploaded to Creative Cloud Express.

     

    I agree, it would be great if Express supported vector-based image formats, but given that it does not, I need a solution that will solve this problem as it exists.

     

    This problem is not happening when I view the web page on desktops. It is purely a mobile-based problem. My high-pixel density MacBook Pro has no problem properly rendering the files.

     

    Thank you so much!

     

     

    Nancy OShea
    Nancy OShea
    Community Expert
    February 6, 2022

    Use web fonts from Adobe Fonts.

    https://www.adobe.com/express/learn/blog/how-to-add-your-own-fonts-for-branded-content-that-is-just-your-type

     

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices