1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to load images quickly for a photographer's portfolio?

Discussion in 'HTML & Website Design' started by Reinards, Jun 29, 2017.

  1. #1
    Hi!
    My customer wants a portfolio in which he can show of his work.
    There will be many high-quality pictures.
    SEMrush
    How should I go about designing such a website from performance point of view?
    How do I reduce the time spent loading the website?
    Images will be saved locally(On the server)
     
    Solved! View solution.
    Reinards, Jun 29, 2017 IP
    SEMrush
  2. kennedygitahi

    kennedygitahi Member

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #2
    There are three things I can think of:
    1. Lazy loading
    2. Compressing the images
    3. Caching on the browser or using a CDN
     
    kennedygitahi, Jun 29, 2017 IP
  3. Reinards

    Reinards Greenhorn

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    Could you explain me what each option does(I kinda know what compression is) ?
    And could you please give me good learning resources for Lazy loading?
     
    Reinards, Jun 29, 2017 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,481
    Likes Received:
    366
    Best Answers:
    28
    Trophy Points:
    335
    #4
    In any site development, client interrogation is the first step. Find out exactly what he wants to show and tell, and what he wants the visitor to do (e.g. order HQ prints, buy HQ downloads, or sit back and enjoy, etc.).

    Bring together all client content. You'll need all the image files plus all the caption and descriptive text in digital form. Everything should be sorted by genre, assuming he has more than a very few images. If there are only one or two genres, break them down so you have manageable numbers in each.

    HQ image file are huge, and have no business in a web page. Monitors are simply not high enough definition to show them in all their glory anyway. Even an obsolete 24pin, nlq, dot matrix printer has a higher resolution. Another reason is that the browser is a poor image manipulation tool. Slow, too.

    Start by scaling all the photos to a reasonable size to display in the browser. Set the compression level to deliver the smallest file size before a noticeable drop-off in quality. Do the same to create thumbnails. Both of these manipulations can be scripted so you don't have to do it one by one. Hint: It may be better on some photos to crop to an interesting part of the photo, then make thumbnails from the cropped image.

    Use The GIMP, ImageMagick or PhotoShop for the above steps. Tests run a few years ago showed GIMP and ImageMagick to be noticeably superior to PS in scaling. PS may have improved in the meantime.

    Now it becomes a simple job of structuring the site to match the photo groups. Only thumbnails are loaded initially, so it's quick. Larger pics are loaded on an as needed basis. There is no Javascript to slow things down.

    gary
     
    kk5st, Jun 29, 2017 IP
    deathshadow likes this.
  5. Reinards

    Reinards Greenhorn

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #5
    Thanks, Gary!
    Good advice...
     
    Reinards, Jun 29, 2017 IP
  6. Criot

    Criot Greenhorn

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6
    Ensure the images are compressed and stored in appropriate formats, also a CDN is probably going to be a good option as well - Images are large files and depending on how far your visitors are away from your server the longer it could potentially take them to load those images, using a CDN will load the images from the server closest to them which will generally speed up loading times for all of your visitors.
     
    Criot, Jun 30, 2017 IP
  7. #7
    Hello,
    Firstly ensure that your pictures are in the smallest size possible (the display size). You don't need for example to store 2000 x 2000 pixels picture if you display it at 500 x 500 pixels on your website. So, crop pictures and/or resize them.
    Next thing to do is to store in the best format. For photos, JPEG is the greatest way to store it. And for logo and icons, go with PNG. An extra, you can compress PNG with this tool : tinypng.com
    You can also try lazy load : load only pictures in the displayed area. You can do this with Javascript.
    Last thing, uses CDN to host your media. CDN will reduce picture loading time because files will be loaded from the nearest web server of your visitor.
    Hope these lines will help you.
     
    manoaratefy, Jul 2, 2017 IP
  8. Reinards

    Reinards Greenhorn

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #8
    Thank you everyone for your advices, I think I can mark this thread as closed :)
     
    Reinards, Jul 2, 2017 IP