I have a designer who designed my site using Photoshop (.psd).
Now i am the one who will convert this to html/css.
In the design, there are icons (images) whose dimension is 70x55 (measured in photoshop ruler)
My question is, when i code these images into html/css, should i be using the following code?
<img src="img1.png" width="70px" height="55px"/>
Is this how converting psd to html works? following the sizes, spacing, distance on whats on the actual psd designed by the designer?
Im a complete noob on this so any help will be great appreciated.
-UPDATE -
By the way, when i am coding this into html/css, i am using a high screen resolution desktop monitor (not the standard monitor laptop screen), i followed all the dimension designed in the psd from images to container divs & dialog boxes (designer has designed dialog boxes).
Now after i finished coding, followed the design (followed what i see on the psd), it looks ok when i view it in a browser with the current big screen i am using. The view i am seeing is the page looks the same in the psd and lot of spaces and not too compact to look. So everything looks good here.
Now when i view it in my friend's laptop with standard monitor screen, the page looks very compact, the images (from psd which i followed the dimensions and coded it in html/css) looks big and some of the elements i coded did not fit on the browser screen. Im sure the reason behind this is because i am using smaller screen.
Now i am wondering, I followed what the designer designed in psd. I followed the distances, dimensions of images, etc... Whos doing wrong here? The designer because he designed the elements in psd which is too big for smaller monitor screen? or me who does not know something or maybe missed something here?
Any guidance would be a big help
Cut out the images using the slice tool in Photoshop and save for web to optimise the images.
The width and height attributes on an image aren't necessary although they save the browser a small amount of time reading the images to work out the dimensions. Use CSS to control the size of the image; but obviously you should avoid stretching the image larger than its native size or it will become pixelated.
By default an image will render in a browser at its native size.
Related
I am using yslow in which it tells don't scale images in HTML but the images are coming from database and I use them using bootstrap grids. Most of the images are show in popup on click.
The image width I set is in the css file in percentages like max-width:100% or width:100%;, but I don't know what to set to not scale the images in HTML.
I don't know how to resolve this issue. Please help me.
YSlow is telling you this because it is not a good practice to resize images in HTML, especially if the images become smaller, as this means you spend too much time downloading.
You don't need to take everything performance monitors like YSlow are telling you as an action item. The reports are only recommendations. As #Amin Gharavi said, if the images load fast enough for you, then it's probably okay.
The problem is if you are downloading images that are MUCH bigger than their apparent visual, which usually means much slower download in addition to lower visual quality in some browsers.
I work for a company that's going through a website redesign, and the designers have sent me a PSD file with mockups of the static pages. This is a typical parallax scrolling type deal that seems to be all the rage right now, and there are some large images in the mockup that will end up on the site.
I've chopped out the relevant graphics from the PSD and saved them with JPG where I don't need transparency, however I'm forced to use PNG when I do and some of these images are pushing 500kb in size resulting in the page size totaling about 3 megabytes, and I'm not even done! This is also being saved with Photoshop's "Save for Web" feature.
Considering over half our traffic comes from mobile devices, this is a big problem. What are some good techniques to cut down on the size of these images?
Your first step should be to go back to the designers, tell them the design is too heavyweight and work with them to find a way to load fewer, lighter images.
Tools like PNGGauntlet and ImageOptim can help reduce the size of PNGs (and JPGs). They tend to get a better (smaller) result than just Save for Web alone.
Lazy loading images so they only get downloaded when they scroll into view is another technique to look into. Where possible, use built-in CSS tools such as gradients, shadows, and the like. Maybe a vector format like SVG can be used for some of the images?
And, as Kobus Myburgh hinted, you can use CSS media queries to load smaller background images on smaller screens. If they're all background images, you might be able to get away with stretching smaller ones (using CSS background-size) on larger screens. Foreground images are trickier, but something like picturefill or a srcset polyfill might do the trick.
I believe what you're looking for is "responsive images". Read more here for techniques to solve:
https://github.com/scottjehl/picturefill
This is but one example of responsive images. There are many out there. Try Googling the term.
Try some lossless compression techniques .
Reference :
Lossless compression of images
I am trying to display a grid of images on my website. The problem is they are all different sizes which makes it look really sloppy if you use a really wide or really elongated image. Is there any resources you could suggest to help with this problem. I would like to make a grid of images that are all the same size. A cropping function similar to Facebook profile picture system would work great.
I found a website that is exactly what I need. There is a website that maintains the aspect ratio and has a nice interface. I think I will implement this on the site.
I have a web template im working on, it was given to me as a psd but im a little confused. The width of the page is 1024 so when I export it and load it into html it has white space on the sides. Is there an easy way of dealing with so that the graphic spans the browser...?
Easy? That is somewhat subjective.
To span the width of the browser window, a design needs to either stretch (not a good idea as this introduces distortion and pixilation), tile (either in its entirety or just in part), or blend to a solid background (or another tiled image).
There isn't a quick fix.
I have few question in this regard
When you create an internet page, does the program automatically create 75pdi?
Could we create 300DPI page could this be able communicate on internet ?
What is maximum DPI resolution you can get on a Web page?
Unless the entire web page is just an image file, web pages don't specify a resolution like that. HTML defines the layout and contents of the page, the video and printer drivers determine the resolution it is displayed or printed in.
Meaningless question, see #1.
See #2.
To answer your questions (I'm presuming you're talking about images on a web page, rather than the web page itself, which is created in HTML, etc.)
You should create the image at 72dpi. Most programs with 'Save for web' functionality should convert the image to 72dpi, but you may need to do this yourself.
You could put a 300dpi image on the web and it should display correctly in pretty much all browsers (and should print at the correspondingly higher resolution), but this is a bad idea as it'll be much slower to load/render, will consume bandwidth, etc. As such, I'd really recommend sticking to 72dpi. If you want a high resolution version of an image, link to the raw image file or create a (resolution independent PDF or SVG, etc.)
As above, there's no maximum (although the web site's visitors machines will eventually grind to a halt attempting to decode an 'n' DPI image).
Web displays graphics at 72dpi. If you make an image that is 300dpi, it's going to look much larger on the screen than was intended.
DPI, be it 72 or 300, is only relevant when going to an output device like a printer, talking about DPI for web graphics is meaningless. On the web, all images are shown 1::1. A pixel of data in the image is a pixel of data on the screen.
You can use any DPI you want for a web image. It makes no difference in how it will be displayed.
BUT - if you are working towards the web you can no longer measure things in inches, centimeters of picas. You need to start working with all dimensions in pixels. If you are viewing your graphics in Photoshop, make sure your view is set to 100%. Then you'll be seeing the same thing that will be displayed in the browser.
Everyones browser is different, so a conservative estimate for a static page design is that your page content should be about 900 pixels or so wide. (People are used to scrolling down, so your page height can be whatever you want).