1

I have a high resolution image (TIFF) that I need to fit in a 320 x 440 px asset for the web (preferably JPEG). The high resolution image is usually a photograph and can sometimes have a logo burned in as well. This asset must also be under 300 kb. How do I keep the file size small enough while also maintaining the highest quality possible (for retina)?

Improve this question
6
  • Hi. Welcome to GDSE. What image format are you saving the image in? What kind of image is it, such as a photograph, a graphic/logo? When you say "320x440" what is that in, pixels, mm, cm? What have you tried? What has failed? Please edit your question and add the missing information. Thanks.
    – Billy Kerr
    Commented Apr 3, 2019 at 15:06
  • Have you tried to save a JPG/PNG (whatever you need) and check the file size?
    – Wolff
    Commented Apr 3, 2019 at 15:14
  • Thank you!! The requirements for the final asset are 300KB 320x440px and I would prefer to save as a JPEG. The original image is a TIFF that is 105.5MB and 7260x4840px (parts of the image will be cropped). I have tried dropping the image into a photoshop file that is 320x440px and then resizing within the artboard. Then I save it for web and check to see if it's under 300KB. The final assets is just so blurry :/
    – Kristen M
    Commented Apr 4, 2019 at 18:56
  • Are you remembering to view the final assets at 100% zoom? If you zoom in they will look pixelated/blurry compared to the original. It's hard to tell if there really is an issue with your images or if you are just expecting too much without seeing some examples.
    – Wolff
    Commented Apr 6, 2019 at 11:28
  • @Wolff I am viewing it at 100%. Unfortunately I can't send any examples because of copyrighting issues but I think you're right in that I may be expecting too much.
    – Kristen M
    Commented Apr 8, 2019 at 19:50

1 Answer 1

Reset to default
1

You should be able to save an image that is 320x440 at max settings and easily get under 300kb if you save as a jpg. If this is your own website, I would save at a lower quality so my web pages load faster.

If you want to save for a retina screen, then you have to export at multiple sizes. So if your image needs to be 320x440, then your 2x image will be 640x880.

See relevant question:

Are @2x images simply larger in terms of height and width or do they actually have a higher PPI (pixel density)?

Improve this answer
1
  • Thank you! We save out our images at 4 breakpoints (Desktop, Tablet, Phablet, Mobile-320x440). The Desktop images under 300kb are 50% quality (so not great), but our mobile images are especially blurry even at 100% quality.
    – Kristen M
    Commented Apr 5, 2019 at 14:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.