Will resampling still happen if you don't resize your image in Photoshop on save for web?
I understand resizing vs resampling is making print size smaller with same pixels vs. less pixels with interpolation. But what if I'm saving for web, but not wanting to do either? Will it still resample?
Save for web didn't resample your image. The quality and the definition are exactly the same than the orginal.
BUT, "Save for the web" change a CMYN, 300 dpi image in a RGB,72 dpi image without resample anything.
Some of the images that I am using are small icons. How can I scale them when viewing them at much higher resolutions such as 2560 x 1440?
Bojan is right: Using imulus.github.io/retinajs is a good way to accomplish this. A few things to note:
in your initial design, you should set your entire document to 150ppi. This is double resolution for retina display. When you're designing be sure all of the images and icons are scaleable to this size without pixelation.
Before you begin your build, cut out your images at this size and save them out like normal.Then scale it down to 72ppi so as you can cut out regular resolution images, and take measurements while you replicate the design into a website so you aren't constantly dividing by 2.
retinajs will replace your images as needed, but it will require you to assign dimensions to images that may not have them.
hope this helps
I notice that when I measure out something in Photoshop to "ensure pixel perfection" it's usually half of what's measured in Photoshop to go to CSS. So if I measure at 60px, in CSS it goes to 30px.
But only roughly so.. Is there a way to make sure it matches 100% so I don't have to guesstimate? And why does this happen?
When you are measuring out those pixels in Photoshop, you have to make sure you know what size your resolution is. For the web, it uses 72 dpi resolution, check in Photoshop under "image size" to see what resolution your image is. Sometimes images are at 300 dpi which if you use that and then try to save on the web will make the image larger than it should be.
In Photoshop:
Ctrl + N > Web tab > Web Most Common
This Artboard will set the settings to be fir for webpages. Now screenshots from the browser should match the PS pixels values.
Also make sure that your browser settings haven't changed the zoom ratio or font size.
I have an 40px by 20px image with 72 Pixels / Inch.
I would like to create a Retina display version.
What should I do? Double the size? Change the resolution?
And in which format should I save it? PNG? JPG? ...
I am using this image on a web site ...
In your image editor, double the size of your image to 80px by 40px.
In your markup set the width to 40 and height to 20.
<img src="example.png" width="40" height="20" />
You should save as png if you need transparency or the image is line art. Save photographs as jpg.
My answer is convert your image into SVG
Do you have Illustrator? If so save your image as SVG (and have a png as a fallback if you want).
<img src="images/logo.svg" alt="" />
<img src="images/logo.png" alt="" />
As long as you use Modernzr which can work to get svg friendly in most browsers.
You can see it here how it's done:
http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/
Hope it helps :)
A retina display image (or high-density display image) is double the pixel size of a standard image - its scaling factor is 2.0. This means that yes, for your 40x20 pixel image, you will need to make an 80x40 pixel version (that is then displayed at double pixel density on screen). The format doesn't matter as much, both PNG and JPG will work fine (PNG will not degrade in quality with compression, but the file size will be larger than JPG).
However, the problem with high-density display images is that they take up more bandwidth, and are unnecessary for devices that don't have the high resolution or Retina displays. This means more data transferred over the network, inconveniencing mobile users and those with limited data transfer caps.
One solution is to use something like Retina.js. It's an open-source javascript client script that will automatically load the retina-sized image from your server and swap it in-place for the low-density version, if it exists. It follows Apple's standard for naming high-resolution images - #2x, so you can have HTML code like this:
<img src="/images/my_image.jpg" />
and the script will search your server also for /images/my_image#2x.jpg. If it exists, it will load it and swap it in-place without having to worry about messing with CSS.
Generally as of this writing there are two types of retina displays, hence you should create an image for each type.
For a 2× device, you would need to produce twice the logical pixels' width and height with a resolution of 144 pixels per inch (72 ppi ✕ 2).
For a 3× device, you would need three times the logical pixels with a resolution of 216 pixels per inch (72 ppi ✕ 3).
Examples of 2× devices are the MacBook Pro (released in 2012-2019) and most iPhone since the iPhone 4. Examples of 3×
devices are the iPhone 6 Plus, and the iPhone X. However the iPhone Xr is a 2× device.
Hence for your case you would need images in 80 px ✕ 40 px and 120 px ✕ 60 px for 2× and 3× devices respectively.
Retina displays are not dependent on the specific bitmap image format. You can use the original image format. For websites, you should use JPG for photographs and PNG for line-art graphics saved as bitmaps.
You should not just blindly enlarge images otherwise this would create a blurred results – it would no better than if you don't include any high-resolution versions in the first place. Either obtain the original higher-resolution version of the images (typically from vector graphic source) and downscale them or use a machine-learning based image enhancement solution such as Bigger Picture to "convert" your image into a higher resolution.
Photoshop gives you a couple options for resizing an image. For instance if the image is iPhone size you can increase the image size by 200%. Photoshop gives you a couple options for resampling of the image. Bicubic, bilinear and etc. This will remake the image at a higher resolution and interpolate the missing pixels. Hope this helps.
This is a really interesting article showing a nice option for dealing with high res images:
http://blog.netvlies.nl/design-interactie/retina-revolution/
Basically, it's saying that, if you make the image quite large (width and height) but then save it at quite low quality, it still comes out very sharp on retina displays. It means that you can use the one same image on all devices, and that the file size is very low, too, which is an extra bonus. You can set the width and height of the image in your CSS and/or HTML to set it to the visual dimensions you desire.
This article blew me away, and is my go-to approach for dealing with both retina-friendly and bandwidth-friendly images. Win, win.
You can use CSS opacity option.
This will give you an transparent look of your image based upon the value you set to opacity.
Try learning opacity: http://www.w3schools.com/css/css_image_transparency.asp
I want to put on a web page background. I have a background of large 1600px x 1200px. This is a jpg picture. The image size is 320 kilobytes Can I put this big picture in the background? The site will be delayed? As the big picture should be up in the background?
I want to make a quick website. I can not cut image. I give it all, you can not use CSS to repeat
Here is a great tutorial for full page backgrounds
http://css-tricks.com/perfect-full-page-background-image/
You can always increase compression (by reducing quality) of that .jpg file to greatly reduce its size.
https://en.wikipedia.org/wiki/JPEG#Effects_of_JPEG_compression