Streaming live at 10am (PST)

Converting Mobile page preview into HIDPI png

What are the best tools to convert page into a HIDPI mobile render into a 1242x Width HiDPI PNG?

Do you mean how to take a screenshot of a page in hidpi while having non-retina device or something?

@dram
I’m current taking screenshots on 4k display zoomed in 400% with window resizer and resize my browser, i have to flip it 90 degree mode.

image

Match DPI scaling zoom:


Than take browser screenshots.

Unfortunately this is tedious and its multiple screenshoots multiple sections. I’m looking for a solution that outputs hidpi png of MOBILE view only at 414hidpi or 1242 pixels wide at whatever dpi scaling that iPhone does. I’m talking 10-50mb png per page. This then goe back to another adobe editor designer to make some tweaks / notes / edits etc.

Maybe I am missing something but why won’t you just press f12 in chrome, enter whatever dimensions you need in the upper bar (or better yet select any device from the list or even add your own devices in the settings for the dev options), then press “more options” (vertical ellipses) and choose “take screenshot”? It can even take a screenshot of an entire page.

@dram
Chrome F12 max DPI scaling is only 1.5
image

My Current shots I must crop each fold like this
image
image

I jut need one uncropped shot at DPI scaling.

Sorry, I do not understand how it is max 1.5? If you select “iPhone X” from the list of devices and take a screenshot it will be exactly 1125 by 2436 px

Are you sure? output 568x1230 is only 1.5

Am I doing it wrong?

Here is how I take screenshots. It will be saved into your default download location.

1 Like

So did it help? I am curious to know what was the problem.

@dram
Thanks.

Console screenshot version does help with per fold screenshots faster.
Are you aware of way to capture entire page without folds?

there is a ''capture full size screenshot" in the same menu