Welcome to TalkGraphics.com
Page 1 of 4 123 ... LastLast
Results 1 to 10 of 32
  1. #1
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Loading high resolution images.

    On a recent thread it was said the OP would look at ways to load high resolution images for viewers wanting this option.
    I will do as you suggest and add the ability to download the full resolution images for those who wish to examine in greater detail.
    LINK
    It got me thinking what would be the best way to do this.
    There were a couple of ways I could think of:
    1. Load the high def images into pop-up layers. Problem with this is the content of all pop-ups are loaded on page-load, so it's a big download required even if the visitor doesn't look at them.
    2. Load each hidef image into it's own page. No issue on a small site but it could quickly become quite cumbersome if there where multiple hidef images required and very large .xar file size.


    Here's my solution. It loads two javascript files, one defines functions and is only required to load once. The second is a javascript array which can contain different array files to load the images.
    The demo only uses 4 images at present but they are not loaded until a thumbnail is clicked. (Unlike Highslide that loads both the thumbnail and the hi resolution image at the same time)
    Each image is 2400 x 1351 px and is between 500 & 1000 Kb's in size.
    The site uses fit to width which I've set to a max of 2400 px ensuring maximum resolution upto that browser size.

    DEMO
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: Loading high resolution images.

    This is a great example where the answer if supported would be webp file format. Every news site I visit used this file format and it is time for Xara if they really want to be a web design application to add this ability.

  3. #3
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: Loading high resolution images.

    Here's an example 165KB webp file that TG software does not support. https://static01.nyt.com/images/2020...y=90&auto=webp

  4. #4
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Loading high resolution images.

    Yes Gary, when I ran the webpage through a site speed test one of the things it mentioned was the use of webp files. This wouldn't be difficult in the situation here as the hi-res photos are held in a 'images' folder and not the index_htm_files folder.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  5. #5
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Loading high resolution images.

    Just quickly loaded the jpgs into a jpg to webp converter. There's a very marked reduction in file sizes see 1001@2x.jpg compared to 1001@2x.webp (higlighted) Same for 1002@2x image.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	export.png 
Views:	79 
Size:	89.4 KB 
ID:	128613  
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  6. #6
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: Loading high resolution images.

    What impresses me about webj is the photos are very clear and the detail amazingly sharp, while the file sizes as you note are small. How hard would it be to bypass one more smart object and give us something we can really use?

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Info Re: Loading high resolution images.

    Quote Originally Posted by Egg Bramhill View Post
    Yes Gary, when I ran the webpage through a site speed test one of the things it mentioned was the use of webp files. This wouldn't be difficult in the situation here as the hi-res photos are held in a 'images' folder and not the index_htm_files folder.
    A useful solution but with all such codings it distracts from the power that Xara already provides. siran and I already bounced ideas around in https://www.talkgraphics.com/showthr...5-Lazy-Loading.

    I have taken my final example and placed the big images into pop-up layers and remove the trigger as the pop-up itself is now the trigger: CSS - Full Xara Lazy Loading Layers.xar.
    To make it work, I have added the images into a second page but the images can be stored anywhere and can be optimised webp without any changes.

    The pattern is:
    1. Add the Website Code (head) CSS to your site.
    2. For each image, add a new CSS ClassName rule that invokes the image as a background.
    3. In a pop-up layer create a sized Box with Placeholder code (body): <div class="lazy ClassName"></div>.
    4. Add a Thumbnail to MouseOff, basically, anything that open the image pop-up layer.
    5. Embellish with Web Animations, delays and speed of presentation; anything you can add to a layer.

    The big image is only loaded when its pop-up layer is triggered.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  8. #8
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: Loading high resolution images.

    This is something Xara should be doing. User's should not be asked to resort to scripting a function that should be part of a professional program.

  9. #9
    Join Date
    May 2014
    Location
    Australia: GMT+10
    Posts
    265

    Default Re: Loading high resolution images.

    Sounds like an update feature that we might actually be happy to pay for

  10. #10
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

    Default Re: Loading high resolution images.

    Quote Originally Posted by jaydear View Post
    Sounds like an update feature that we might actually be happy to pay for
    I'm with you on that. Web Designer Premium owner, and this is the first year I haven't renewed, but certainly would for webp support.

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •