TWCL Forum Index TWCL
Forums for The Webcomic List
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

High-DPI image support

 
Post new topic   Reply to topic    TWCL Forum Index -> Webcomic Gubbins
View previous topic :: View next topic  
Author Message
fluffy
is not a fish.


Joined: 22 Jul 2008
Posts: 113
Location: Seattle

PostPosted: Thu Apr 20, 2017 3:04 am    Post subject: High-DPI image support Reply with quote

For the past three years I've been publishing my comics in both standard (100 dpi) and "Retina" (200dpi) resolution, and decided to just check to see how much of an impact it has in general.

Even with my small viewer base, about 1 in 4 viewers are on a high-DPI display.

Also, for me there's a clear difference between standard and high-DPI comics in terms of how sharp they look - and notably, I started doing this because my comics looked muddy and fuzzy compared to the rest of the page and I got tired of that. If you're on a high-DPI screen (such as a modern MacBook or a system with a 4K display) try opening these two pages in separate tabs and flip between them:

https://beesbuzz.biz/d/20150119.php
https://beesbuzz.biz/d/20150119.php?hidpi=disable

Pretty clear difference, right? (At least there is to me.)

Anyway: if you want to set up high-DPI comics on your site, that depends a lot on the CMS you're using. My CMS is an ungodly assemblage of Movable Type and some custom PHP and so it probably isn't that helpful for others to know how I set it up in mine, but if someone who is so inclined to modify any of the common comic CMSes to support it, here's what I do:

1. I save the image at its native resolution (2880x1440 in my comics' case)
2. I have a script convert it to the two resolutions (100dpi = 960x480 at 90% quality, 200dpi = 1920x960 at 60% quality), with filenames like comicfilename.jpg and comicfilename.HIDPI.jpg
3. When I post a comic, I post it as comicfilename.jpg, and some of the custom junk in my CMS detects that comicfilename.HIDPI.jpg exists and converts the IMG tag to:
Code:
<img src="comicfilename.jpg" srcset="comicfilename.jpg 1x, comicfilename.HIDPI.jpg 2x" width=960 height=480>


Probably the way that one would do this in, say, WordPress is to have whatever plugin you use for displaying comics set out two output resolutions, one double the other, and rewrite the IMG tag accordingly. I know very little about WordPress, ComicPress, Easel, etc. so I'm just hoping this will be useful information for others who are more involved with that software.

If you're HTML-savvy but haven't seen the srcset attribute before, read up about it over on the W3C HTML standard. And stop making your comics look cruddy on high-density displays!
_________________

i am a busy bee
Back to top
View user's profile Send private message
smbhax.com
No! Don't post it there!


Joined: 10 Apr 2009
Posts: 3436
Location: Seattle

PostPosted: Thu Apr 20, 2017 5:48 pm    Post subject: Reply with quote

Fancy! It's a bit over my low-pixel-density head (I do have a cookie-saved option readers can select to view the comics at a larger resolution, but that's pretty basic compared to what this sounds like : o); my low-density Firefox is telling me that the HIDPI version of the comic on your sample page (I don't have a hi dpi display so I had to punch in the image filename manually following the ".HIDPI." naming convention you described, so maybe this is all invalid anyhow) is in fact at what you call your native resolution, and not the 1080p size you say your script converts it to:

Location: https://beesbuzz.biz/d/lewi/lewi-5.HIDPI.jpg
Type: JPEG Image
Size: 274.47 KB (281,059 bytes)
Dimensions: 2,880px 1,440px

So maybe that file didn't get converted to the size you wanted? But I guess on my old monitor I can't actually see this stuff the way it was meant to be seen : o
_________________
Back to top
View user's profile Send private message Visit poster's website
fluffy
is not a fish.


Joined: 22 Jul 2008
Posts: 113
Location: Seattle

PostPosted: Thu Apr 20, 2017 9:36 pm    Post subject: Reply with quote

Ah, that one was probably back when I was putting my full-resolution images online for the HIDPI variant and I never went back and fixed those. The more recent strips are 1920x960. Smile

It doesn't really matter in terms of quality since the browsers which support srcset also properly downsample images that are too large. On that note, it used to be that you wanted your images to be the exact same size as they were going to be displayed, but these days browsers are good at resampling images and so it's okay for there to be a resolution mismatch (but starting with a higher resolution image is always better).
_________________

i am a busy bee
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    TWCL Forum Index -> Webcomic Gubbins All times are GMT + 1 Hour
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group

Hosted by Fluent
The Webcomics List is operated and owned by Ash Young. Syndicate the comic updates.