<ion-item> best image size for a thumbnail/avatar?

Hi, I’m creating a list like here http://ionicframework.com/docs/components/#item-avatars and the thumbnails below that, my code below.

This links to a page with the full article and re-uses the same dog-running.jpg image and everything automatically scales in a responsive way. However, the thumbnail or avatar looks a little compressed, not as nice as if I had made an actual smaller version in Photoshop.

I could not find in the docs, but what is the normal best practice for this - to create separate images for full and thumbnail sizes and live with the extra download, or let Iconic scale it? Would I get better results with PNG or some other format, or special image settings?

Also, for tablets, would you include am additional bigger image, or again let it scale?

  <a class="item item-text-wrap item-thumbnail-left" href="#tab/news-dog">
    <img src="img/dog-running.jpg">
    <p>This is a nice little dog running on the beach</p>
  </a>

Hi @kevin432 - did you settle on an optimum image size or find any resources suggesting the best approach to this? I’m in the same situation and wondering what the size of my thumbnails should be.

I’m currently thinking of providing different sized images for thumbnail and detail images, and creating the tumbnails for the largest target device. e.g. Say iPhone 6 Plus is largest target, I will create thumbnails at the correct @2x resolution for a list screen on this device, and then let CSS scale them down for smaller screen sizes.

I’m using compressed png images in 8-bit to reduce size. The quality is still fine for small thumbnails

I’d be interested to see what others are doing?

I’ve just seen this other post on the topic

Thanks Edd, Just seeing this now.

I did not do anything as yet as I was working on other parts of the project. So far, just using a single image jpeg about 400-600 px wide seems to work OK on Android and iPhone plus iPad mini. I have yet to try a full size iPad, or Android tablet.

I will play around with PNGs thanks, as I’d like to get the filesize down.

I came across this topic which may be of interest to you:

How did you change the image size?