# Help Needed - 2 Different Versions Of Headers
**URL:** https://forum.pinegrow.com/t/help-needed-2-different-versions-of-headers/1997
**Category:** Blocks
**Created:** [June 25, 2018, 7:38pm UTC](https://forum.pinegrow.com/t/help-needed-2-different-versions-of-headers/1997 "2018-06-25T19:38:05Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@Badboy](https://forum.pinegrow.com/u/Badboy)
#### Post date: [June 25, 2018, 7:38pm UTC](https://forum.pinegrow.com/t/help-needed-2-different-versions-of-headers/1997/1 "2018-06-25T19:38:05Z")
Hi,
New to Pinegrow. I like what I see so far. Can anyone tell me how to do different size header images? One size to show for desktop / Laptop, and the other size for mobile version. Greatly appreciated. I’m coming from Dreamweaver, just use to right clicking and hiding element.
Thanks
Randy
---
### Author:  [@mandarin](https://forum.pinegrow.com/u/mandarin)
#### Post date: [June 26, 2018, 8:28am UTC](https://forum.pinegrow.com/t/help-needed-2-different-versions-of-headers/1997/2 "2018-06-26T08:28:15Z")
No need for different sizes, Bootstrap will resize automatically over devices provided added to page correctly.
Add a big image, preview in browser, make browser window narrower and see what happens. If image rescales here it will be fine on smaller screens.
You can do the same in standard Dreamweaver html pages as well with just a couple of lines of css. Much easier than messing with more than one image size.
---
### Author:  [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [June 26, 2018, 12:21pm UTC](https://forum.pinegrow.com/t/help-needed-2-different-versions-of-headers/1997/3 "2018-06-26T12:21:44Z")
well… that depends… on just what _Mobile_ is.
iPad, iPhone, Blackberry, …Android toaster etc etc.
as well as what @mandarin suggests, there are other ways to do it too.
The _Bootstrap_ framework… kind of takes care of it.
but you end up with your overly LARGE _for mobile_ images being presented in a smaller format - but the whole image is still downloaded. inefficient.
ie, a stupidly large 4MB banner image would be downloaded to your nice shiny mobile device, but shrunk to fit _just nice_
not very efficient for Phone data connections. Ok for the display render, but would be slow and costly to data package.
And also terribly slow compared to the , say 73KB image that it should have had.
There are also other frameworks that do this too, so that you end up with the end result but really not data efficient.
So! you need different images… different size… but… what sizes?
back to the first point about _just what is mobile_ - in your eyes? do you have user data for your new shiny site? recoreded/anticipated user device data? say …
Hey! 95% of this sites clients use an iPhone! sorted!
If not then you have to cater for the best selection of screen sizes you can currently anticipate your user base having and supply them accordingly so that each device downloads its most apt image size.
This will employ break points, or “Media Queries” where the device reports back its viewing portal size
Pinegrow manages Breakpoints, Media queries quite well.
[https://pinegrow.com/pg4assets/movies/res.mq\_1280.mp4](https://pinegrow.com/pg4assets/movies/res.mq_1280.mp4)
and
> **[Resize Page Views and Add Responsive Breakpoints - Pinegrow Web Editor -...](http://docsbeta.pinegrow.com/resize-page-views-and-add-responsive-breakpoints/)**
>
> From Pinegrow 2.4 you can dynamically resize your page views directly in the application and check the responsive behavior but you can also easily define new responsive Breakpoints from your pages custom width.
and basically, for each media query you would have a link to the BEST SIZE IMAGE for that viewport.
so check those out first , see here,
and also have a look over this, it explains the concepts quite well.
[https://cloudfour.com/thinks/responsive-images-101-part-9-image-breakpoints/](https://cloudfour.com/thinks/responsive-images-101-part-9-image-breakpoints/)
and here is an online tool you could use to create your responsive images, until you figure it all out locally.
> **[Responsive Breakpoints Generator](https://www.responsivebreakpoints.com/)**
>
> The Responsive Image Breakpoints Generator efficiently analyzes each hi-res image and finds the best dimensions for embedding in your website
which follows on from this article.
> **[The Responsive Image Breakpoints Generator | CSS-Tricks](https://css-tricks.com/responsive-image-breakpoints-generator-a-new-open-source-tool/)**
>
> Nadav Soferman has written a great post about the common mistakes that can be made when developers attempt to make images responsive: Whichever responsive
which explains its principle quite well.
as does this
> **[Responsive Image Breakpoints Generator, A New Open Source Tool](https://www.smashingmagazine.com/2016/01/responsive-image-breakpoints-generation/)**
>
> Responsive websites, even the most modern ones, often struggle with \*\*selecting image resolutions that best match the various user devices\*\*. They compromise on either the image dimensions or the number of images. We can solve these issues and start...
And then, I hope someone else chimes in and shows you how to implement this all in Pinegrow, which is probably just what you wanted!
But. I felt this might be beneficial if you didnt want to go down the _framework_ route, were coming from Dreamweaver and maybe didn’t get the “whole image thing” picture.
If you do, sorry, wasn’t meant to be patronising, just trying to help 🙂