Does it degrade the picture load times to use Bitly addressess?

[JanieGoddard]

In the Caption using HTML, when you are specifying other places for "More Info" AND the picture URL, does it degrade the picture load times to use a Bitly address? I am seeing other pictures load initially and then the correct picture for the location finally shows up. Is this network response time issues or is it hitting Bitly first and then transferring to the correct address and sending the correct picture. I used the Bitly address in the Caption to allow for more caption text.

Thanks,
Janie

[RupertEssinger]

Hi Janie

Could you let us know which Story Map app you are using (Map Journal. Map Series, etc)

Rupert

[JanieGoddard]

Hi,

  Yes it is the Story Map Tour.

Thanks,
Janie

[JanieGoddard]

Also the pictures seem to load correctly on my Dell Desktop. I especially see the lag and incorrect picture while testing on my iPhone5. I see this while swiping through the pictures in "Media" mode. Also in List mode. Only occasionally in Map mode. Of course, once the pictures cache they do better.

[StephenSylvia]

It sounds like you are just adding bitly links in the captions of the photos for more information. This will not have any impact of the photo loading time.

Do you have a public link to share so we can help diagnose the slowness?

A couple things to check:

• Where are the photos stored? On your own server referenced as URLs?
• If they are on your own server
  • How big are they? We recommend optimizing your photos for the web before uploading them
    • Photos should be less than 400kb
    • Thumbnails should be less than 100kb
• We're you on a cellular connection with your iPhone? This is significantly slower than most wifi/ethernet connections.
• The Desktop computer probably already had the photos cached unless you explicitly cleared your cache.

[JanieGoddard]

Hi,

   My public link is http://arcg.is/2bsZWGI 

   I got the idea to make this Web Map Tour a week or so before the event. So I had to go with pictures I could find that were already online. I am now going back and getting this as best it can be for our Cherokee National Holiday in 2017. The pictures that are lagging mostly are the main pictures, when you are swiping through the media on the iPhone.

   I also used the Bitly address on the main pictures and their thumbnails. This is because I am using the file created from this app for a file I can input into the new Web Map Tour. The bitly address, of course, takes up less disk space. I added each event in the web map tour (using the add button) one at a time as I could find online pictures. 

   The photos are stored on other servers. Yes I am referencing them using the URL converted to their Bitly URL.  I used several of our servers that were websites like the Cherokee Phoenix newspaper. Some servers were our Cherokee National Holiday Facebook pictures. Others were our Cherokee Nation Facebook pictures.

   The photos that are lagging are the main photos and the laggers tested this morning are all under 400kb size. Some are even 130 KB.

   My iPhone connection is AT&T but I am on the WIFI here locally at work testing.

   I cleared my cache on my desktop for the Web Map Tour and still didn't see any lagging.

   Now here is the surprise I discovered this morning. Item 50 showed item 47 picture before the picture came in correctly.

Item 53 showed item 50 picture first. Item 55 showed item 52 picture first. So the picture showed incorrectly for a few seconds is always the minus 3 item's picture. So there is a pattern to this.

   Then I started swiping backwards through the media. Item 51 showed item 54 picture. Item 2 showed item 5 picture. The reverse doesn't happen as often, but is also the minus 3 item's picture.

Thanks for all your time,
Janie

[StephenSylvia]

What sort lag are you experiencing? From looking at your app, the photos are loading in about 200 milliseconds on our ethernet and about 600ms - 1 second on a 3G connection. This is pretty typical for images. Are you're loading times much longer? Can you run an internet speed test on your phone?

Also, we attempt to preload the previous photo and the next photo before you swipe. If a user stops to read the description and look at the photo, you should be able to swipe and have the next photo loaded already.

The new issue you discovered should only happen if you are swiping through photos quickly. Because many smartphones do not have powerful processors and do not have access to the phone's full allotment of memory, we cannot render all the photos on the page at once without causing a slow or laggy experience. To solve this we only load three points into a swipable component at a time. The previous point off the screen to the left, the current point on screen, and the next point off the screen to the right. Every time you finish swiping, the app will update the previous point and next point and reposition the displays so you can continue swiping in the right direction. If you continue swiping before the update has finished, you may see an old point being replaced by the new point.

[JanieGoddard]

Stephen,

    That makes sense about me seeing an old point being replaced by the new point with this happening 3 photos behind.

     I started a stop watch online app. I timed each item load and didn't have any lag until I got to event 11 the Children's Fun Days. It took 7 seconds and 9 milliseconds on my WiFi on my iPhone 5. Our work WiFi Connection has 54 mbps speed. My iPhone showed AT&T with 2 of the 3 bars lite up. It showed the event 8 Veterans Building while it loaded. Most of the others loaded so fast I couldn't time them. Event number 43 John Ross Museum took 5 seconds to load and displayed event 40 the Hummingbird picture while it loaded. The event 55 Murrell Home took 1 second 66 milliseconds to load. While it was loading it displayed event 52 John Ross Reunion. When I scrolled from the last event 56 to the next media which was event 1 the Introduction, it took 4 seconds 17 milliseconds to load. It displayed item 54 The Four Moons while it was loading. Again 3 photos backwards.

     So this makes much more sense now. It does work much better, if you slow down your swiping.

     I also spoke with others that have iPhone7.  But I know some of my friends are still using flip phones. So I guess it is what you can afford and your priorities. 

    I took my iPhone5 to another building that made it say AT&T LTE. The pictures loaded so fast you could only once in a while see one loading but couldn't tell what the old picture was.

    I took my iPhone 5 to yet another building that registered AT&T with the 3 bars lit up (3G)? The occasional picture would load just slow enough I could barely see the old picture.

    So I guess this is a network and iPhone model issue. Would you agree?
Thanks,
Janie

[StephenSylvia · Accepted solution]

Yes, I believe most of the lag is due to processing power of the phone and your connection speed. Even if you are on wifi with both your phone and desktop, your devices may vary widely in speed. Desktop wifi radios tend to be much stronger, and may be able to work with more channels to get a stronger signal. If you haven't tested the speed from your iPhone specifically, it would be good to try that as well. fast.com, is a really easy site to do that. Also, the iPhone 5 is a couple years old and if you have continued updating the OS, you may notice that it is also running slower because the new OS requires more memory and CPU power. This will affect the browser speed as well. Also, check if your phone has less than 1/3 of the available storage left as this can start to significantly effect your performance as well.

All that being said, I have noticed a few items that may improve the image load times if you are willing to spend a little time updating the app:

1. All the thumbnails look like they are using the same full size photo as the main image which will increase your initial load time. It will also slow your performance on smartphones because it has to hold more data in memory. I recommend resizing to a width of 175px and compressing these to about 80% quality to reduce their size. Or store them on Flickr and import them in the app. (see below)
2. It looks like your internal server hosting photos is a bit slow. This photo: http://anadisgoi.com/images/archive/1332/main.jpg, is about half the size as this photo on facebook: https://scontent.xx.fbcdn.net/t31.0-8/14242476_960994780678058_919529462775967431_o.jpg, however the first photo takes about twice as long to load as the Facebook one because the server it's coming from is slower. A photo hosting site is recommended in this case.
3. When you copied photos from facebook, you may have copied various sizes without realizing it. Facebook will serve up different image sizes depending how big your browser window is. Before copying a photo from a photo hosting/social media site, resize your browser window to make the size of the photo is closer to the size you will use in your app. Also, we no longer recommend using photos stored on Facebook. Recently, they have changed their URL structure which makes them expire without notice and you may find photos disappearing from your app.

My best recommendation, if you are able, would be to upload all the photos to Flickr and import them into the app using the Flickr importer built into the app. Flickr will automatically optimize your photos for the web and create different sizes. The Flickr importer will also grab the correct sizes it needs (one for the thumbnail and a larger one for the main image).

[JanieGoddard]

Hi Stephen,

    We will probably import them into our web server library and resize and compress them for the two different photo sizes needed for each event. We are checking into Flickr. It is great how it works with the size of the photos and grabs the correct size for the thumbnail or main photo. The only draw back on Flickr is you have to have a Yahoo account to access Flickr and give your mobile phone number. That is not so great for companies. I tried it on my own account and Flickr is very user friendly.

   Thanks so very much for working with me on this and pointing me in the better directions!

Thanks,
Janie