Reduce pixelrate of background images ?

Hi, as I was tempted to use too big background images, one(2560x1600)and other(1402x1160)in my current homepage,
I quickly found out, that this slows down opening of the page
tremendously.
Is there a way to reduce the pixelrate or size of BR images
but still keep their approximate appearance ?
Thanks for your answers !

Yes. Any special characters or enhancements will make objects get converted to png. Here are some of the tips I've collected from this forum on the subject:
1 - do not use and frames or borders, etc. around photos.
2 - don't use any reflections.
3 - create your own navigation bar with linked text* and turn of the iWeb Navigation bar. The nav bar is all png based.
4 - use only the web safe fonts from the Font pane.
5 - do not use drop shadow on fonts.
6 - turn off smart quotes.
The above will reduce the number and size of files associated with a web page quite a bit. Photos with fancy frames and reflections can generate a thumbnail png of around 110KB whereas the plain version will be a jpg of only 28KB. Although it doesn't sound like a lot, it will speed up loading of the page and be more darkside (i.e. PC) friendly.
Run a test with a test site and publish to a folder. Then follow the hints above and publish to another folder and compare folders.
*Put your linked text directly under the Navigation bar. Then turn off the nav bar in the Inspector window. The nav bar will disappear and the linked text will move up to the top of the page.

Similar Messages

Reducing background image size

Hi all,
I'm working with Captivate 4 and have made a screencast of a particular process for training purposes.
The project has 80 slides - but each background image is 1800+kb. Overall the project comes out at 3 MB even with the highest possible compression in the publishing settings.
The project is to be hosted on the Web so I really don't need this kind of detail in the background images and I can't find anyway to reduce the image size apart from exporting each of the 80 backgrounds into Photoshop, reducing them in size and importing them back into Catptivate. For 80 slides this would take too long.
So, two questions:
How can the background image size be reduced within Captivate?
How can I change the settings so when capturing screenshots the image sizes are smaller in the first place?
Thanks in advance for any tips,
Neil
Is there anyway the

Thanks Lilybiri
I've bene recording at full screen (1024x768 or close enough) in order to get the largest recording space possible - and then resizing the project to 800x600 for the web production. The problem is that there is no optimise for web setting (or none that I can see). I just did another test and each background image is 3000kb - way over the top for something that will be viewed on the web.
Does this help you get a fuller picture? Any advice?
Thanks for sparing your time to answer here btw - much appreciated
Neil

Background image Opacity reduce using tracingsrc not working in any browser

I want reduce Background image Opacity
I found very good optional on DW Cs4 under page properties Tracing Image
when I use this body tracingsrc = I can see on DW Perview Window but when i open same thing in any browser Its just white .
Plzz help me I am beginner in DW .
I have copy paste the html code .
if you know any other method for reducing background image opacity plz let me know thanks you
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>
Font Tag
</TITLE>
</HEAD><body tracingsrc="photo/background/7-cosmos-photo-cosmos-flowers-wallpaper_1440x900.jpg" tracingopacity="40" tracingx="0" tracingy="0">
SOme Text here
</BODY>
</HTML>

I really had to look this one up before answering because I had never heard of that code and it is proprietary to Dreamweaver. The "tracing*" options are only for DW's design view to help you out when you code moving from graphics applications such as Photoshop, Fireworks, etc to DW. The code is not valid HTML so no browser will display this for you. You can find out more here:
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7da9a.h tml

How can I use a refrence background image ?

HI,
I need to register align horizontally and vertically) about 100 images to the first. I don't want to stack or merge them. An ideal way to accomplish this would be to be able to set the first image as a background reference image for all images in the group. There would be left/right buttons so I could advance through the stack, a slider to adjust the visibility of the foreground image, and up/down & right/left arrows so I could move the upper image a pixel at a time in any direction. In this case I don't need to rotate the image, but this would also be something a person might want to control. Then I would move through the group of images, stopping on each one to align the image to the first. One at a time, or after I am done, it would save all the aligned images to a new filename and folder, without changing the transparency of the image or in any way using the background reference image. Without rotating the images, every pixel in the new image would be the same as in the original, except moved. I would start by resizing the canvas of all the images so they have a border area. This way I can move the image around and not lose any of it.
Of course I could put the reference image in the background layer and the image to be adjusted above it on another layer. Then i can use the background as a reference by making the upper image somewhat transparent. Finially I could delete the background layer and save the image with just the adjusted layer. But this would be tedius with 100 images, even worse if there were 1000..
Is there a reference background image capability in Photoshop CC ? Is there a better or different way to do this ? Or can Bridge do it ?

Perhaps I need to explain my specific application. I have 120 images that are part of a time lapse sequence. The camera is photographing a meteor shower. I was able to capture a meteor which left a persistent trail that lasted about 5 minutes. Because the camera is on a tripod, the stars are constantly moving and in fact moved quite a bit during the 5 minutes the trail was visible. These images are of much higher resulution than the 1080 video I am producing. I have used premier to track the spot in the images and show the meteor and trail as a video close up that runs at about 15% speed. because the exposures were 30 seconds ;long, every 33 seconds, the sky has visibly moved from image to image. because I use only a few keyframes Premier tracks the spot smoothly. But since the pictures are each moved, not moving, the stars in the final video move back and forth with each image. they never go anywhere, but this movement is distracting and annoying. Theoretically I could eliminate this movement by having a different key for each frame. But the better way is to prepare the images so they are all aligned. Then there will be no movement at all.
You have seen this effect in documentaries. Here's a hypothetical situation. Someone has handheld video of an important event happening. because of the situation and the handheld camera, the picture moves around like crazy. To be able to view the event clearly as part of an investigation, each frame is aligned to the first so the subject doesn't move at all, while the image frame moves all around. I have seen this many times. Now I need to do it.
I have 120 pictures which all must be aligned so the stars in the picture do not move. i need to see a refrence image through the image to be adjusted, so I can move the image to be adjusted until its stars are perfectly aligned with stars in the refrence image. Of course this is like stacking, which is used to reduce noise and increase detail. but I don't want to stack the images, just adjust them horizontally and vertically, and then save them in their adjusted state.

MS Word Background image not converting

I have Microsoft Word 2007 & Acrobat Pro 9. I created a document in Word, and that doc has a background image. However, when I try to convert it to a PDF, one of two things happens: 1) the PDF is created with no background image, or 2) the background image is reduced in size & tiled in repeating rows in the background. Neither of these is acceptable! I've tried the following:
From in Word -->Print-->Acrobat PDF
From Acrobat -->Create PDF-->From File
From Word -->Save As-->PDF
From Acrobat-->set background image
This is quite frustrating, since I don't want to re-do everything in Photoshop just to render the PDF properly. I set the image as a background in Word because I want it to cover the whole 8.5"x11" space without any margins. The image is a 95 dpi JPG sized at 8.5"x11"

You may need to check Acrobat and be sure you have Display Large Images selected. If that is not the issue, it may be a setting in your print options of WORD. Programs like WORD and PPT often have the default set to not print background images because they use so much toner in a regular printer. Since you are using a digital printer that option is not needed.

Reduce physical size of image with minimal quality loss

Hello,
I have to fit high res, high quality, images behind a presentation frame, which is only about 800x600. Everytime i reduce the high res images to fit behind the frame, even with bicubic sharper on, the reduction in quality is really bad. Is there anyway i can maximise quality when reducing the dimensions of the image?
Any help much appreciated...

Hi Ed,
What approximate sizes are you starting from? My hunch is that you are expecting too much detail to remain in an 800 X 600 which is pretty small. As far as I know the bicubic algorithm is the best for reducing images that Photoshop has ever produced.
You might try an experiment. After shrinking your image duplicate the background layer in the layers palette. On the duplicate layer run Filter > Other > High Pass and set the radius to 0.5. Then change the blend mode of the High Pass layer to Overlay. You may find that you like the subtle sharpening without artifacts.

Background image not repeating in IE6

I have a background image in a cell of a 1x1 table -
http://savanabar-leros.com/art7tables.shtml
the image is set to repeat x and y.
In FF2 and IE7 it displays as expected.
In IE6 the background image is not repeated
For the moment I've increased the size of the image to
compensate - but
obviously I would like to know what I have done wrong. It's a
very temporary
fix anyway as increasing the text in IE6 shows the text
dropping out the
bottom of the background image.
Jo

I was trying to find this the other day - something to do
with /75 being the
percentage of transparency I think.
Frankly I would love to use an "easy way out" - I have tried
and failed
despite having been given some excellent help - how oh how
please do I do
this?
Jo
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
> What you see there *is* using the htc files. If I would
remove them, the
> transparency disappears, but the background image tiles.
Why don't you
> take the easy way out, and make the background image
have a reduces
> opacity and contain the underlying image bits as well?
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.dreamweavermx-templates.com
- Template Triage!
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
> ==================
>
>
> "josie1one" <joleros[nospam]@yahoo.com> wrote in
message
> news:[email protected]...
>> But... it I remove the htc file it is not
transparent - and yet yours is.
>> I got in a mess with the transparency and there are
two versions... with
>> the htc file and the ie2.css fix. Removing one of
them seemed to prevent
>> transparency.
>> Did you *only* remove the htc file and nothing else?
If so, I don't know
>> what to do <whimper>
>>
>> --
>> Jo
>>
>>
>> "Murray *ACE*"
<[email protected]> wrote in message
>> news:[email protected]...
>>>
http://www.murraytestsite.com/savana.html
>>>
>>> You can see that indeed the png image is not
tiling to fill the table.
>>> If I remove the htc files from the CSS, it does
do so. I conclude that
>>> there must be something in the htc file code
that is causing this to
>>> happen....
>>>
>>> --
>>> Murray --- ICQ 71997575
>>> Adobe Community Expert
>>> (If you *MUST* email me, don't LAUGH when you do
so!)
>>> ==================
>>>
http://www.dreamweavermx-templates.com
- Template Triage!
>>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>>>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
>>> ==================
>>>
>>>
>>> "josie1one" <joleros[nospam]@yahoo.com>
wrote in message
>>> news:[email protected]...
>>>>
http://savanabar-leros.com/images/screen.jpg
>>>> Thanks for looking.
>>>>
>>>> --
>>>> Jo
>>>>
>>>>
>>>> "Murray *ACE*"
<[email protected]> wrote in message
>>>> news:[email protected]...
>>>>> Post a screenshot of what you are
seeing, please Jo....
>>>>>
>>>>> --
>>>>> Murray --- ICQ 71997575
>>>>> Adobe Community Expert
>>>>> (If you *MUST* email me, don't LAUGH
when you do so!)
>>>>> ==================
>>>>>
http://www.dreamweavermx-templates.com
- Template Triage!
>>>>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>>>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>>>>>
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
>>>>> ==================
>>>>>
>>>>>
>>>>> "josie1one"
<joleros[nospam]@yahoo.com> wrote in message
>>>>>
news:[email protected]...
>>>>>> I've cleared my cache but still
seeing non-repeating background on
>>>>>> both computers in IE6. Must be me -
thanks Murray.
>>>>>>
>>>>>> --
>>>>>> Jo
>>>>>>
>>>>>>
>>>>>> "Murray *ACE*"
<[email protected]> wrote in message
>>>>>>
news:[email protected]...
>>>>>>> You're talking about the
translucent reddish rectangle? Looks fine
>>>>>>> to me in IE6.
>>>>>>>
>>>>>>> --
>>>>>>> Murray --- ICQ 71997575
>>>>>>> Adobe Community Expert
>>>>>>> (If you *MUST* email me, don't
LAUGH when you do so!)
>>>>>>> ==================
>>>>>>>
http://www.dreamweavermx-templates.com
- Template Triage!
>>>>>>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>>>>>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>>>>>>>
http://www.macromedia.com/support/search/
- Macromedia (MM)
>>>>>>> Technotes
>>>>>>> ==================
>>>>>>>
>>>>>>>
>>>>>>> "josie1one"
<joleros[nospam]@yahoo.com> wrote in message
>>>>>>>
news:[email protected]...
>>>>>>>> Really? I've now reduced the
size of the image if you wouldn't
>>>>>>>> mind testing. Displays
perfect in FF2 even with Ctrl+ but not on
>>>>>>>> two computers in IE6. In
fact it seems to cycle through several
>>>>>>>> backgrounds before
displaying a narrow background.
>>>>>>>>
>>>>>>>> --
>>>>>>>> Jo
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> "Murray *ACE*"
<[email protected]> wrote in message
>>>>>>>>
news:[email protected]...
>>>>>>>>> It's repeating for me in
IE6, Jo.
>>>>>>>>>
>>>>>>>>> --
>>>>>>>>> Murray --- ICQ 71997575
>>>>>>>>> Adobe Community Expert
>>>>>>>>> (If you *MUST* email me,
don't LAUGH when you do so!)
>>>>>>>>> ==================
>>>>>>>>>
http://www.dreamweavermx-templates.com
- Template Triage!
>>>>>>>>>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>>>>>>>>>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
>>>>>>>>>
http://www.macromedia.com/support/search/
- Macromedia (MM)
>>>>>>>>> Technotes
>>>>>>>>> ==================
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> "josie1one"
<joleros[nospam]@yahoo.com> wrote in message
>>>>>>>>>
news:[email protected]...
>>>>>>>>>>I have a background
image in a cell of a 1x1 table -
>>>>>>>>>>
http://savanabar-leros.com/art7tables.shtml
>>>>>>>>>> the image is set to
repeat x and y.
>>>>>>>>>>
>>>>>>>>>> In FF2 and IE7 it
displays as expected.
>>>>>>>>>>
>>>>>>>>>> In IE6 the
background image is not repeated
>>>>>>>>>>
>>>>>>>>>> For the moment I've
increased the size of the image to
>>>>>>>>>> compensate - but
obviously I would like to know what I have done
>>>>>>>>>> wrong. It's a very
temporary fix anyway as increasing the text in
>>>>>>>>>> IE6 shows the text
dropping out the bottom of the background
>>>>>>>>>> image.
>>>>>>>>>>
>>>>>>>>>> --
>>>>>>>>>> Jo
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>
>>>>
>>>
>>>
>>
>>
>
>

Ipad background image size

I would like to use a background image that I have in my Photos File on my iPad. I selected it and can not resize it to fit the screen. It is currently 216 x 540 @ 72 dpi; 61kb. Does it need to be smaller? I have the same image on my iPhone 5 and it fits the screen perfectly.

Apparently you need to turn off reduce motion. I cant look at where that is exactly because I'm on my old iPad right now, but that will put back the move and scale

Jpgs and background images

Hi gang
I have a slight problem with my site, "Chemin de Nostradamus".
http://www.soli-deo.eu
When I made the background images in Photoshop I saved them as jpgs around 100k in size.
When I upped the site to this domain I noticed slow loading times on each background page, too slow for 100k.
Then when checking on the published files I see they have all been converted to .png around 400k, by iweb.
My image quality is the same but now a much bigger file, 400%, thus 4 times slower on loading.
Is there a workaround for this?
Cheers
Jim
Message was edited by: jimpsky

http://www.soli-deo.eu/chemin-de-nostradamus/LeChemin_De_Nostradamus_files/backgroundimage1.png
Is probably not the file you created. My guess is you started with only the smaller image in the upper right and iWeb added the extra black to fit your page dimensions.
You really don't need to set that image as a background. You should be able to make a 20KB .jpg file from your source and just drop it in the location an size it.
You could also edit the file above to reduce its file size and replace the original on your server with it.

Background Image Cuts Off - Browser Scroll Isn't Long Enough

Okay, fairly new to Dreamweaver, long-time graphic designer. That said, the answer will probably be easier than trying to explain the problem!
Using the Page Properties, I set the following in the Appearance (CSS) tab:
Background color to #000
Appearance HTML Background image (contains the image in question, created in Photoshop)
No-repeat
This Photoshop image is kind of long (960 x 2232) because there is a bunch of text that needs to flow on top. I thought that I reached some sort of maximum in height and so I reduced the height of the image a little and the same problem--cut off at the bottom of the browser. Note that this cut off issue was not a problem until I extended the graphic to this long length. On other pages, it is much shorter and all is well.
I've pasted a snapshot of the bottom of the web browser preview below. You can see that the scroll bar is at the bottom and there is just a small bit of the paper that is not showing. I would like the bottom of the paper to be seen with a little bit of the black background beneath that.
My first instinct is that I'm missing a bottom padding effect, but can't find where to adjust that type of setting.
Another Thought--I would much rather this graphic auto expand as the text flows over it, but did not know how to accomplish that, so I extended the graphic in the Photoshop file. Its not a tile type of image that can be repeated. It is an ancient looking paper, therefore, the top and bottom need to look a certain way, but the mid section could be tiled and repeated. So if this is a better route, please direct me on where to learn how to implement.
Thanks a bunch!

extra carriage returns were needed in the text frame to extend below the background image.
Rule #1 in web design:
Do not use non-breaking spaces, line breaks or empty <p> tags as a layout device. It doesn't work in all devices or by all users.
Rule #2 in web design: Use CSS to style your layout with margins, padding and min-height properties.
HTML & CSS Tutorials - http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Background image blew my flash file

Hi Guys,
hope someone could help me this time, i just have this question about my background image blowing up the size of my swf file. i have a 1000x600 canvas which has the same bg image, and when i publish it, my swf file has a size of 468kb, but when i remove the background image the file was reduced to 57kb.. the image was a png-24 326kb image, and its not the file in my flash that has this file size. just wondering wut happened that it gives that huge adjustment to the file?

Recommendations:
1) I believe the setInterval activity is what ends up breaking things. Get rid of all the setInterval and clearInterval elements. Just use setTimeout instead, which you won't have to worry about clearing.
2) The file performance is likely suffering due to the size of the images versus the portions of them that actually get used. Create/crop the images outside of Flash to the size they will be in the Flash file, optimize them, and then import them. Also, if you combine all the elements that you animate at once together into one symbol (the text, background, and button), and animate that symbol instead of the different pieces separately, things will probably animate more smoothly as well.

Background Image file for 7975

What are the file specifications for a custom background image on the Cisco 7975 Ip phone? I mean, the size, resolution, color depth and so on
Thank you in advance

The PNG files for background images must meet the following requirements for proper display on the Cisco Unified IP Phone:
â¢Full size image-320 pixels (width) X 212 pixels (height).
â¢Thumbnail image-80 pixels (width) X 53 pixels (height).
â¢Color palette-Includes up to 16-bit color (65535 colors). You can use more than 16-bit color, but the phone will reduce the color palette to 16-bit before displaying the image. For best results, reduce the color palette of an image to 16-bit when you create a PNG file.
http://www.cisco.com/en/US/docs/voice_ip_comm/cuipph/7975g/7_0/english/administration/guide/7975cst.html#wp1088046

How can I decrease the size of a green-screened image relative to its background image?

In iMovie 9.0.9 if it possible to reduce the size of a green-screen image relative to the size of its background image? Using KenBurns and Crop I can somewhat enlarge the green-screen image. But is there any way(s) to shrink it?

FrecklesandEmeralds schrieb:
Ridiculous or not, it's what I'm working with...is there any way to do what I'm asking?
I gave you the answer:
But you are not aware that an EPUB is a ZIP file.
FrecklesandEmeralds schrieb:
It's just huge, even before I zip it...how can I see what item is taking up the most space?
I did not write that you should zip.
I wrote UNzip it. And have look into the package, what is inside which is causing the size.

Bugs in my background image

I wrote a GUI that display a background image. There are other component like combo box, label etc...that are added to a panel that is superpose to the background. Everthing in my program works except that when my frame appear, the background image contains bugs like lines that aren't suppose to be there or black rectangle. If a minimize the frame and then remaximize it, the image is ok and bugs disappear. Also, the system is particulary slow (for exemple when i want to choose an item in a combo box, the mouse doesn't react instantaneously as it should do).
Do you have any idea of what could be the source of the problem??
The code for displaying my panel image is the following:
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class ImagePanel extends JPanel {
Image image;
public ImagePanel(Image image) {
this.image = image;
public void paintComponent(Graphics g) {
     ImageIcon img = new ImageIcon(image);
     ImageIcon bigImage = new ImageIcon(img.getImage().getScaledInstance (getWidth(), getHeight(),Image.SCALE_REPLICATE));
     super.paintComponent(g);
     g.drawImage(bigImage.getImage(),0 , 0, this);

Here's my thought's on what could be the problem.
First, the incomplete background image could be because it hasn't finished loading before it is painted the first time. You may need to use a mediaTracker to ensure it has fully loaded before you use it. See java.awt.MediaTracker. It's pretty easy to use. Basically, just create the tracker, add the image, then call waitForAll on the tracker. It will block until the image is fully loaded.
The performance issue you are having is probably a result of all the stuff going on in the paintComponent method. Since this is the background component it gets paint called any time any other component on top of it needs painting. You should reduce the work in the paintComponent method by creating the scaled image in the constructor, not every time paint is called. If the ImagePanel class is resizable, then you could add a componentListener to it which will recreate the scaled image each time the ImagePanel is resized. This will greatly reduce the work needed and should give a big performance boost.

Resizing 1) background images and 2) div's containing images

I just created a web page consisting of little more than an image (about 900 pixels) wide which is set at width=100% in a style sheet. It works great, but I'd like to substitute a smaller image (to reduce page loading time) in mobile devices.
If it was a background image, I could just declare two different background images based on screen size, but I don't know of any way to swap between images actually inserted in a page.
So, is it possible to give a background image a width in percentage, similar to a static image? In other words, if my screen was 651 pixels wide, then a static image inside a container spanning the entire screen should also be 651 pixels wide. Can I rig it so that a background image in that container would also be 651 pixels wide?
Of course, the obvious problem is height. If a background image measures 900 X 1200 pixels, and a screen is 600 pixels wide, then even if there's a style that makes the image 600 pixels wide, it would also have to calculate a height of 800 pixels, and I'm guessing that can't be done.
Anyway, I'd just like to know what kinds of tricks one can use in making background images and divs containing static images display in percentages based on screen size.
Thanks.

Use background-size:cover; for your background images.
Further reading: http://css-tricks.com/perfect-full-page-background-image/
EDIT:// For swapping out placed images, it's a little harder to do right now as there is no specified solution from W3C. Some people want to use the srcset attribute, others the <picture> tag. There is no perfect approach right now. See: http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good- thing/
One idea is you could hide the image and then load a background-image in the container which is smaller in size. But this would likely bloat your HTML and CSS as you use multiple images - the device will also load both images so you don't gain any real advantage unless you intend to show a croppoed or different image.
Other ideas: http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
<div class="image">
     <img src="YourImage.jpg" alt="" width="500" height="250" />
</div>
@media only screen and (max-width: 480px) {
     .image img {display:none;}
     .image {
          background:url("YourImage_Mobile.jpg") no-repeat 0 0;
          background-size:cover;
Another idea is to show/hide the relevant image:
<img src="YourImage.jpg" alt="" width="500" height="250" class="desktop" />
<img src="YourImage_mobile.jpg" alt="" width="300" height="180" class="mobile" />
@media only screen and (max-width: 480px) {
     .desktop {display:none;}
     .mobile {display:block;}

Reduce pixelrate of background images ?

Similar Messages

Maybe you are looking for