I dynamically create an invoice off my commerce site. At the top left of the invoice is my company logo. I need that logo to display correctly on the web, but also print sharp (I print directly off loaded page). Currently because the image is web native at 72 ppi, it does not print sharp.
How can I print the logo sharp while also displaying it correctly on the web page?
Try making the logo 4 times bigger. Say the logo is 72x72 pixels. Make the logo 288x288 and include it in your invoice html as
<img src="logo.gif" style="width:72px;height:72px;"/>
It should be downsized by the browser and printed a bit better. If it works, and you need higher resolution, just make the logo as large as you need.
Related
I'm creating a website that loads some images on first load, then if a user clicks on one of the images the same image opens in a popup but bigger (Lightbox).
My question is, is it better to just use the same large image and resize the dimensions for caching (So the user already has loaded the image) or is it better to first load a smaller thumbnail then the bigger image once the pop-up opens?
I'm trying to reduce site speed as much as possible as there are a lot of images.
I'm using Masonry for the site and Magnific Popup for the image expand if that helps.
the thumbnail image size is around 100kb whereas the larger image is between 200-300kb.
The main idea of any lightbox-type script is that they allow you to display preview images (thumbnails) on your page and load larger versions only when needed (e.g, when user clicks on the thumbnail). This greatly helps to reduce page weight and load time. Modern scripts (like fancybox) can display preview image while larger version is gradually appearing over it thus relieving users from staring at blank screen.
image = "Your image link / location here"/ZoomService
image.Zoom(100)
--if you use MilkWar web coding use that
Our app shares a custom open graph story that included a 1200x630px preview image. The preview image however always displays as a small square when posted to the Facebook timeline.
As mentioned here, the header of the website I'm linking to already contains og:image and og:image:width and og:image:height. Still the image is cropped and only a square on the left is visible.
Is there any trick to make the image use the full width? User generated images are not the solution to go for because it removes the link from the open graph object and also stores the image in the user's photo albums.
I know that this has to be possible somehow because it works for apps such as Runtastic Results.
My site have 2 pages and the 2 pages contain a similar picture. If a user comes to the first page, he downloads the picture and then come to the second page, if I make the website so that the picture is shared between the 2 pages then the user no need to download the picture again?
If I want to put the same picture but different in size on the webpage, is it better to make 2 pictures by using image software editor or using CSS to change the width and the height of the picture?
you have answered your question.
if the image is from the same source, and if you have configured the caching on webserver correctly (and if the client has enabled cache), then there are no re-requests sent to view the same resource.
you dont need to create multiple images for different sizes, use html image attributes to show it in the grid dimensions you wish to.
Exception: if the original image is quite large, and you are not sure if the user will want to view the image, then create smaller image for faster loading. Thumbnails on a photo album is a good example for that. There is a program called re-sizer which accepts a folder and create a new set of images with the required dimensions
Resources below
Image Resizer
HTTP Compression
Im making a page/application that presents a wide range of products. One view contains a lineup of about 130 products, eash represented by a png-image, the size varies from 33Kb to 150Kb.
The lineup can be scrolled horizontally whith the users scrollbar or custom controller, and when you hover each product I use som css-transistions to fade out all products except the one hovered, and to enlarge it.
It works perfectly smooth in Safari and decently Firefox, and in Chrome as long as I keep the image count-down. But the more images i try to add, both the scrolling and the transistions progressively gets slower until it's almost imposible to work with.
Is this some cache.problem in chrome? Is there any way around it?
I've tried to preload the images, but the problem isn't the loading time og the image, its the performance that seems to halt due to the sheer number of images.
You can combine all your little images in one big image, and load ONLY the big image, so you do only ONE HTTP request. For display you must set the offset (background-position property) of every image using css.
Tutorial
About catalog images I found smth here http://www.magentocommerce.com/knowledge-base/entry/resizing-catalog-images/.
But it has a path Design > Themes Editor > Customize (Theme) > Catalog Images that I haven't in my admin panel.
As for product images I haven't any idea how to resize image.
I will be grateful for any link and tips.
PS: I read out that image resize is used in the template file directly. If we have 100 images per page it means that Magento resizes 100 times per page loading. Seems it require a lot of additional resources.
I believe you're going about this the wrong way. It is always best to retain the highest quality version. Let's say right now you want to shrink images to 300x300. What happens next year when you redesign you site and you want to feature product images more prominently and you want 400x400 images? You can't because you only have 300x300. As already mentioned, Magento has an resize mechanism that does exactly what you want. It will resize (shrink) the images once and store them in a cache. The first time that image is loaded then Magento does the resize and any subsequent image load will load the already saved image from the cache. Voila, you have both the original high quality image stored and the resized image stored.