For retina, double the image’s hight and width, not ppi count). Once you got your maximum dimension JPG out of Photoshop, you can use something like ‘ImageOptim’ for further reduction of file-weight and ‘Retrobatch’ to generate additional smaller sized images. Some people even blur an image very slightly to further reduce its file-weight. Using Noise Reduction also reduces file-weight. Remember that increasing sharpness, contrast, clarity, brightness, saturation in Photoshop also ever-so-slightly increases the file-weight (and vice-versa). Set the Color Depth to 8 bits per channel and sRGB Color Space image format: JPG quality: 30-50% (that really depends on your personal preferences) no sharpening (sharpening increases the file-weight) no embedding of Color Profile (it doesn’t hurt much, but most browsers do not take advantage of color profiles). Image stack Add size limit options per breakpoint (Note: the limits field may not show in. In there, change the dimensions of the image to the largest size that can fill out your web page (in case of banner image, you should probably double that). Not seeing the update coming through in RapidWeaver. The smaller screen sizes might have a wider width than the other breakpoints since the columns may stack. Jimmy, if you still need (or want) to use Photoshop for prepping your images for web, I suggest you use the ‘Save for Web…’ command (Cmd+Opt+Shift S). If you place an image inside a multi-column stack that has a maximum width then you need to determine how many pixels of screen width the image is allowed For each breakpoint.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |