Tech Images too small in the marketplace

[DrTobbogan]

I noticed while browsing the marketplace that images seem too small. I thought it was just a front end design choice but when I click to open the images in a new tab, they are the same size. Idk if they are being stored at a small aspect ratio or something in the back-end, but I imagine I'm not the only one who wishes pictures were bigger so that we can actually inspect whatever items we are looking at. Other than that, I'm loving how quick and intuitive this website is. It puts Calguns.net to shame tbh.

 

[ikeo1]

I noticed while browsing the marketplace that images seem too small. I thought it was just a front end design choice but when I click to open the images in a new tab, they are the same size. Idk if they are being stored at a small aspect ratio or something in the back-end, but I imagine I'm not the only one who wishes pictures were bigger so that we can actually inspect whatever items we are looking at. Other than that, I'm loving how quick and intuitive this website is. It puts Calguns.net to shame tbh.

Welcome on board! Thank you for the comment!

This was a conscious decision to keep the page loading fast. If you click on the image, it'll expand to the full resolution up to 1280x960, which there is a limit of 3. For now, we offer a couple of different views for free that will be restricted later to subscribed members as it uses more bandwidth to do a full pull of the images. Just above the marketplace in the top right, you can switch to tile view or grid view which will enhance the experience.

The majority of users here are mobile so thumbnail is usually enough, while having the option on desktop for a larger view. I had to limit this because modern phone camera's take very high resolution pictures that are large in file size. We try to keep the payload small so pages render quickly. The file sizes are up to 6x larger x number of listings on a page (20).

For anonymous users, we default to thumbnails without any ability to switch, to save bandwidth. Right now, we're small enough b/w isn't an issue so users now can continue to try it, but I may have to close it off if i have to manage bandwidth.

 

[ikeo1]

Thanks to this question, I took a deeper look at why I was consuming more data than necessary and found a bug in my caching algorithm.

Page rendering times should significantly improve now. What was already fast before should be considerably faster now. So as you navigate from page to page, only new listings will be downloaded once. All cached data will hit and will cycle out as the ads expire. This is specific to image threads and also the classified section when using tile & grid layouts.

The picture below represents when a user visits the classified section and previews the listing. The little green bars means that's downloading from the edge server on each request. You can see the time it takes to download each of the larger images. This is taken from the edge browser. On each page load, the browser would download each image from the CDN provider. Now, you'll do one pull direct to cache since the image names won't really change.





After Optimization we're able to reduce the latency by over 100x.

 

[D00DST3R]

It's interesting to see how a small tweak can make a big difference in performance and cost as well. Has the data consumption dropped significantly since this change?

Thanks to this question, I took a deeper look at why I was consuming more data than necessary and found a bug in my caching algorithm.

Page rendering times should significantly improve now. What was already fast before should be considerably faster now. So as you navigate from page to page, only new listings will be downloaded once. All cached data will hit and will cycle out as the ads expire. This is specific to image threads and also the classified section when using tile & grid layouts.

The picture below represents when a user visits the classified section and previews the listing. The little green bars means that's downloading from the edge server on each request. You can see the time it takes to download each of the larger images. This is taken from the edge browser. On each page load, the browser would download each image from the CDN provider. Now, you'll do one pull direct to cache since the image names won't really change.


View attachment 426


After Optimization we're able to reduce the latency by over 100x.

View attachment 427

 

[ikeo1]

It's interesting to see how a small tweak can make a big difference in performance and cost as well. Has the data consumption dropped significantly since this change?

It’ll take some time to really show but this will certainly reduce bandwidth usage for all users while making pages loads instantaneous.

My testing has shown it goes from 1-3.5 second page load to 250-500 milliseconds depending on the page. Any pages with images will notice the improvement.

I’ll do a segment on this in engineering as it was an interesting challenge with huge benefits for the user and server side.

 

[D00DST3R]

It’ll take some time to really show but this will certainly reduce bandwidth usage for all users while making pages loads instantaneous.

My testing has shown it goes from 1-3.5 second page load to 250-500 milliseconds depending on the page. Any pages with images will notice the improvement.

I’ll do a segment on this in engineering as it was an interesting challenge with huge benefits for the user and server side.

Time and more engagement on the forum, we love dataaa

 

[DrTobbogan]

Thanks to this question, I took a deeper look at why I was consuming more data than necessary and found a bug in my caching algorithm.

Page rendering times should significantly improve now. What was already fast before should be considerably faster now. So as you navigate from page to page, only new listings will be downloaded once. All cached data will hit and will cycle out as the ads expire. This is specific to image threads and also the classified section when using tile & grid layouts.

The picture below represents when a user visits the classified section and previews the listing. The little green bars means that's downloading from the edge server on each request. You can see the time it takes to download each of the larger images. This is taken from the edge browser. On each page load, the browser would download each image from the CDN provider. Now, you'll do one pull direct to cache since the image names won't really change.


View attachment 426


After Optimization we're able to reduce the latency by over 100x.

View attachment 427

Awesome! Glad my post helped out haha

 

[ikeo1]

Awesome! Glad my post helped out haha

It definitely did! Keep’m coming! Hope you tried the tile and grid layouts. That should help with the visibility.

I shrunk the max size to 1024x1024 for future uploads to keep file sizes down. Previously, they could get up to 300k with compression. Once .webp processor is stable we’ll move to that which should compress even further. I’m trying to sizes 60-200kb per image to keep the speeds.

The smaller images you reference are less than 50kb. So switching to grid/tile will increase it up to 4x but way better images