Simple Suggestion: Use PNGs instead of JPGs #120

Closed
KasimAhmic opened this Issue Dec 19, 2012 · 6 comments

Comments

Projects
None yet
3 participants
@KasimAhmic

I've noticed this quite a while ago but for whatever reason, I've never brought it up. In the Blue Monday and Pink Flag skins, the images with all the controls (jplayer.blue.monday.jpg and jplayer.pink.flag.jpg) are actually pretty low quality. Take a look below.

Low Quality:
Low

After just a minute or two of work:
High

You can clearly tell that the second image is cleaner and the color is much more uniform throught the controls. The reason the image is sort of low quality could be due to the image constantly being exported when it was made. JPGs gradually lose quality over time with each export.

If you were to switch to PNGs, you could support transparency, reduce the file size (albeit only slightly), and you won't lose quality every time you export the image. This is still just a suggestion though. I'm not saying that you absolutely need to implement this.

@ghost

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Dec 20, 2012

Contributor

Hi Kasim,

I think that's probably a good idea. We originally used JPG because PNGs
weren't compatible with all browsers. I can't remember why we choose to use
JPG over GIF (possibly filesize).

Either way I'm pretty sure PNGs are the way to go and thanks for giving us
a nudge on this. We aim to do a lot of work on skins in the new year so
watch this space.

Cheers

Mark B

PS You may be interested in this article :
http://blog.appsfuel.com/2012/11/06/icon-fonts-and-how-to-create-a-pixelfree-audio-player/

On 19 December 2012 23:47, Kasim Ahmic notifications@github.com wrote:

I've noticed this quite a while ago but for whatever reason, I've never
brought it up. In the Blue Monday and Pink Flag skins, the images with all
the controls (jplayer.blue.monday.jpg and jplayer.pink.flag.jpg) are
actually pretty low quality. Take a look below.

Low Quality:
[image: Low]https://f.cloud.github.com/assets/1304204/23222/ede07f7a-4a2c-11e2-9466-9f273f85e57f.png

After just a minute or two of work:
[image: High]https://f.cloud.github.com/assets/1304204/23224/0703a22a-4a2d-11e2-9ce2-96a114257789.png

You can clearly tell that the second image is cleaner and the color is
much more uniform throught the controls. The reason the image is sort of
low quality could be due to the image constantly being exported when it was
made. JPGs gradually lose quality over time with each export.

If you were to switch to PNGs, you could support transparency, reduce the
file size (albeit only slightly), and you won't lose quality every time you
export the image. This is still just a suggestion though. I'm not saying
that you absolutely need to implement this.


Reply to this email directly or view it on GitHubhttps://github.com/happyworm/jPlayer/issues/120.

Contributor

ghost commented Dec 20, 2012

Hi Kasim,

I think that's probably a good idea. We originally used JPG because PNGs
weren't compatible with all browsers. I can't remember why we choose to use
JPG over GIF (possibly filesize).

Either way I'm pretty sure PNGs are the way to go and thanks for giving us
a nudge on this. We aim to do a lot of work on skins in the new year so
watch this space.

Cheers

Mark B

PS You may be interested in this article :
http://blog.appsfuel.com/2012/11/06/icon-fonts-and-how-to-create-a-pixelfree-audio-player/

On 19 December 2012 23:47, Kasim Ahmic notifications@github.com wrote:

I've noticed this quite a while ago but for whatever reason, I've never
brought it up. In the Blue Monday and Pink Flag skins, the images with all
the controls (jplayer.blue.monday.jpg and jplayer.pink.flag.jpg) are
actually pretty low quality. Take a look below.

Low Quality:
[image: Low]https://f.cloud.github.com/assets/1304204/23222/ede07f7a-4a2c-11e2-9466-9f273f85e57f.png

After just a minute or two of work:
[image: High]https://f.cloud.github.com/assets/1304204/23224/0703a22a-4a2d-11e2-9ce2-96a114257789.png

You can clearly tell that the second image is cleaner and the color is
much more uniform throught the controls. The reason the image is sort of
low quality could be due to the image constantly being exported when it was
made. JPGs gradually lose quality over time with each export.

If you were to switch to PNGs, you could support transparency, reduce the
file size (albeit only slightly), and you won't lose quality every time you
export the image. This is still just a suggestion though. I'm not saying
that you absolutely need to implement this.


Reply to this email directly or view it on GitHubhttps://github.com/happyworm/jPlayer/issues/120.

@KasimAhmic

This comment has been minimized.

Show comment Hide comment
@KasimAhmic

KasimAhmic Dec 20, 2012

Well I've been working on an HD version of the Blue Monday skin for HiRes screens such as the iPhone and the MacBook Pro. I have finished everything except for the fullscreen buttons and the record button which should be done by tomorrow.

Here's the skin when zoomed in 200% in Chrome:
Work
(Don't mind the white squares behind the buttons, they won't be there in the finished product)

It doesn't look to great when scaled down so I'll redo it and make an SD version too.

As for your link, I've thought about that several times but I'm not at all experienced working with SVGs or font making tools. That would probably be the best thing to use here so we don't have to worry about scaling issues. Although, the down side to using fonts would be that people would have to install font making programs and learn how to use them if they want to make their own skins. That might be a real pain for some.

For now, it'd probably be best to stick with PNGs. Maybe we'll figure out a better solution in the future.

Well I've been working on an HD version of the Blue Monday skin for HiRes screens such as the iPhone and the MacBook Pro. I have finished everything except for the fullscreen buttons and the record button which should be done by tomorrow.

Here's the skin when zoomed in 200% in Chrome:
Work
(Don't mind the white squares behind the buttons, they won't be there in the finished product)

It doesn't look to great when scaled down so I'll redo it and make an SD version too.

As for your link, I've thought about that several times but I'm not at all experienced working with SVGs or font making tools. That would probably be the best thing to use here so we don't have to worry about scaling issues. Although, the down side to using fonts would be that people would have to install font making programs and learn how to use them if they want to make their own skins. That might be a real pain for some.

For now, it'd probably be best to stick with PNGs. Maybe we'll figure out a better solution in the future.

@KasimAhmic

This comment has been minimized.

Show comment Hide comment
@KasimAhmic

KasimAhmic Dec 21, 2012

I had a little extra time today so I managed to finish the entire HD skin (well the jplayer.blue.monday.png file anyway). Here's the download for the skin: http://www.mediafire.com/?l7h4zyff70co9df

I had a little extra time today so I managed to finish the entire HD skin (well the jplayer.blue.monday.png file anyway). Here's the download for the skin: http://www.mediafire.com/?l7h4zyff70co9df

@ghost

This comment has been minimized.

Show comment Hide comment
@ghost

ghost Dec 21, 2012

Contributor

Thanks Kasim!

On 21 December 2012 01:32, Kasim Ahmic notifications@github.com wrote:

I had a little extra time today so I managed to finish the entire HD skin
(well the jplayer.blue.monday.png file anyway). Here's the download for the
skin: http://www.mediafire.com/?l7h4zyff70co9df


Reply to this email directly or view it on GitHubhttps://github.com/happyworm/jPlayer/issues/120#issuecomment-11598548.

Contributor

ghost commented Dec 21, 2012

Thanks Kasim!

On 21 December 2012 01:32, Kasim Ahmic notifications@github.com wrote:

I had a little extra time today so I managed to finish the entire HD skin
(well the jplayer.blue.monday.png file anyway). Here's the download for the
skin: http://www.mediafire.com/?l7h4zyff70co9df


Reply to this email directly or view it on GitHubhttps://github.com/happyworm/jPlayer/issues/120#issuecomment-11598548.

@KasimAhmic

This comment has been minimized.

Show comment Hide comment
@KasimAhmic

KasimAhmic Dec 21, 2012

No problem! Also, take a look at the Pull Request I submitted: happyworm#121

I updated it with an SD version of the skin.

No problem! Also, take a look at the Pull Request I submitted: happyworm#121

I updated it with an SD version of the skin.

@thepag

This comment has been minimized.

Show comment Hide comment
@thepag

thepag Nov 25, 2014

Contributor

Closing this issue, but will leave PR open.
I had meant to merge this a long time ago, but now this might be hard after I made the ARIA and other repo changes.

Contributor

thepag commented Nov 25, 2014

Closing this issue, but will leave PR open.
I had meant to merge this a long time ago, but now this might be hard after I made the ARIA and other repo changes.

@thepag thepag closed this Nov 25, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment