0
Welcome Guest! Login
0 items Join Now

Alternate Image for Mobile Version of Website

  • Alternate Image for Mobile Version of Website

    Posted 3 months 1 week ago
    • After months of getting the best images, now the site is too slow!! The slowness is accectabe on Desktop, byut on Mobiles it's not tolerable. How do I display lower res images (different Versions of the same image) on Mobile Phones?
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 90630
    • Thanks: 11832
    • Web Designer/Developer

    Re: Alternate Image for Mobile Version of Website

    Posted 3 months 1 week ago
    • There are many answers and solutions to this - some easier than others.

      As a starting point I'd recommend that you look at all your image to see if they can be optimised. Web images only need to be 72dpi and rarely need to be wider than 1950px and then with suitable compression the phisical file can be made much smaller. This would speed up both desktop and mobile views.

      Let's take your home page as an example - you're downloading a huge 14MB of images on that page and it just doesn't need to be that big.

      broadhurstlandscape.png is 2MB! for a 1200px x 900px image - I use photoshop to optimize the image for web use and without trying too hard got that down to 350Kb without any discernable loss in quality.

      There are many tools available online that will help you compress your images much more than they are right now.


      You can't add alternate images and have them switch with media queries because that would make it even worse as both images would be downloaded.

      The official solution is to use "AMP" but that would require substantial modification of everywhere you use images and is probably impractical.

      So... my recommendation is that you optimise your images for web use first - I think that will make a massive difference to your site.

      Regards, Mark.
    • The following users have thanked you: Patrick Mc Cabe

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.

Time to create page: 0.051 seconds