I have a background image, 1000x666px, and only 93kb. I use it as a background image, with this code:
url(/Optimized-image1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
When i set this image as a background, my jquery effects are very slow and not smooth at all. The same happens with my google maps stuff.
When i set the background just white or any other color, it's all smooth, so I think my CSS-code isn't that good.
I've tried to preload the image with javascript, but that's not good. Also base64 is not working.
Any tips?
It seems background-size: cover; performs poorly, at least in chrome.
see Poor performance of Chrome using background-size: cover
Here's a list of alternative solutions http://css-tricks.com/perfect-full-page-background-image/
Have you tried layering your images and dom objects with z-indexes to make sure they arent competing for resources?
Firstly, you can optimize your images with SMush It . Also you can optimize your all CSS files with Clean CSS .
If you want to 'smush' your images dinamically, you can use Smush It, still.
1) User will upload an image
2) Get new uploaded image's URL ($imgurl)
3) Make a request to
http://www.smushit.com/ysmush.it/ws.php?img=$imgurl and get it's
content (it's a JSON) to $content
4) parse JSON with $newimage = json_decode($content);
5) Your new and optimized image's URL is $newimage->dest download
and use it :)
Related
How do I resize my image to only fit the header for my website? My background-image is url("image/header\header.jpg");
Background-size: cover; Need assistance thanks. The picture isnt my work but a tutorial I'm working with.
You Can use thumbnail class in bootstrap for this purpose.
For more info on this check out Bootstrap CDN.
I am building a website using wordpress and the theme is "Infinite Photography".
My problem is: on the homepage you see the featured images of all posts: www.konradfoerster.de/wordpress
When I change the size of the browser window, the images will be cropped from the middle. I don't want that.
However when you click on an image and open a single post and then change the size of the screen, the image scales but it does not crop. I want this behaviour for the homepage too!
I need the behavior like here: https://demo.kaliumtheme.com/photography/. Here when you make the browser window smaller, the images will be just scaled, not cropped.
How can I do this? I googled a lot, but could not find anything. For example I tried this one, but it did not work. disable cropping featured image in wordpress
Would appreciate any hints.
Edit: here is the screenshot of the document inspector. I think the styles, that apply for each image are in the class .acme-col-3.
screenshot document inspector
.masonry-item.post-item {
...
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I've got the page divided into different parts like header, footer and body. Now i need to set images on the background of header and footer. Should i choose a bigger image which can be re sized according to user's system dimension or should i keep it constant size?
How to keep an image withing the section that has been decided for it?
i'd create separate images for the smaller devices as the smaller file sizes will help when loading on tablet or mobile. Load in the different images using media queries
header-bg-desktop.jpg
header-bg-tablet.jpg
header-bg-mobile.jpg
I agree using separate images is beneficial for performance (especially on phones), though if you wanted to do this with CSS only, you can use background-size: cover, which will ensure the background image does not stretch, but also fills in the entire parent container.
E.G. http://jsfiddle.net/YNBw9/
You want to use background-size: cover to get the images to fill the containers at different size. You also want to use media queries, if possible, to deliver the right sized image to the right screens. That is, you don't want to overload a small screen with more pixels than it needs (not the screen, the bandwidth and load time) and you don't want to scale up a crappy image for larger screens.
http://plnkr.co/edit/bMryzPTGzUK6Y5BbDpWh?p=preview shows an example. Resize the right pane.
More on media queries:
https://www.google.com/search?q=media+queries
More on background-size:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
http://css-tricks.com/perfect-full-page-background-image/
It largely depends upon your website's target audience.
If you are going to target mobile, tablet and desktop all three user bases, then you must supply images for all of them with different background image code via CSS.
Here is a very good reference to get you started,
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
If you target desktop users only then you need to supply one-background image size and that should be enough.
Example code,
<style type="text/css">
body {
background-image:url('<%=request.getContextPath()%>/images/logo.jpg');
background-position: left top;
background-repeat: no-repeat;
}
</style>
If I'm using background-size: cover and I want to make sure my image looks good on a retina macbook pro which has a resolution of 2880x1880, do I just need to make the image that resolution, or does it need to be double that resolution to look good because it's retina (as in when you have an image in the site at say 800px x 400px but displayed at 400px x 200px to ensure that it looks good on retina).
.bg {
color:#CCC;
background-attachment:fixed;
background-repeat: no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}
Thanks - greatly appreciated.
Make the images approximately the resolution of the device. You will likely want to adjust a bit for browser/webclip chrome so the final image size will be a bit different.
See Custom Icon and Image Creation Guidelines for more information.
Additional Background
Retina display devices have a devicePixelRation of 2 - which is the ration of physical pixels to device independent pixels. From quirks mode:
Dips are the abstract pixels that are used to feed information to the
width/height media queries and the meta viewport device-width. They
are best explained by taking a look at the difference between retina
and non-retina devices.
Taking the iPad as an example, if you were to set the viewport to device-width you would end up with (Safari always uses DIPS - see quirksmode):
DIPS Physical
-------- ---------
non-retina: 768x1024 768x1024
retina: 768x1024 1536x2048
You layout your markup based on DIPS but use images based on the physical pixels (x2 in the case of retinal displays).
Another way to look at this is: since the rule of thumb for retina is 2x the size of an non-retina image, use 2x (768x1024) for retina or: 1536x2048
Also, beware of the real-estate taken up by browser chrome. For example, the status bar takes up 20px from the overall screen.
I have a question and I hope someone can help me out. What I am searching for is an equivalent of the CSS property background-repeat in SVG images. Is there any hack to achieve repeating raster images as fills? The point to this is that I am designing a website and want to experiment with SVG graphics to make it scalable. So when the user zooms everything stays perfectly sharp. However, I also need "grainy" raster textures. Now if I apply a raster image as a texture in Illustrator and save it as a SVG, the textures zoom along with the file and a subtle grain becomes ugly blocks of pixels. Now I am searching for a possibility to repeat the image instead of scaling it on zoom. Does anyone know a hack to achieve this?
Another possibility I thought about was taking the raster image out of the SVG and applying it as a background via CSS. Unfortunately there seems no way to prevent a background image from zooming through CSS or JavaScript. Which makes perfect sense because anyone doing so on content elements would certainly go to accessibility hell.
See SVG Patterns. I believe that you can use the patternUnits and patternContentUnits to achieve your zoom-independent behavior, but have not verified this.
I was able to make this work by using the background-size values set in ems rather than percentages. I created the SVG at a larger size (30px x 90px) and scale it down to my target size using ems.
body {
font-size: 15px;
background: #fff url(stripe_pattern.svg) repeat-x left top;
-webkit-background-size: 0.5em, 0.5em;
-moz-background-size: 0.5em, 0.5em;
-o-background-size: 0.5em, 0.5em;
background-size: 0.5em, 0.5em;
}
That at least works for modern browsers. IE can fall back on the raster versions.